前回はデータベース連携の機能を紹介しましたが、今回はページ内の要素の表示・非表示をボタンクリックで切り替える方法に挑戦してみます。

また、それ以外にも公式サイトにあるデモをご紹介します。

Wix Codeは独自のJavaScriptを使いますが、サンプルコードもあるので
すぐに導入が可能ですよ。

デモ1.ボタンクリックで画像を切り替える

ボタンをクリックすると、画像が切り替わるシンプルなデモです。

動作デモ

サンプルコードを実際に組み込んで動かす方法

こちらのサイトの一番下にある「Open Editor」ボタンをクリックすると
自分のWixの画面に組み込む事が可能です。

■Example&Wixへの読み込み

↑「Open Editor」の場所はこちらです。クリックするとWixのログイン画面が表示され、ログインをするとサイト内のエディターで表示をしてくれます。

設置するためのコード

このサンプルで記述するJavaScriptは以下の内容になっています。

let showing = 'outside';

export function theButton_onClick(event) {
	if (showing === 'outside') {
		$w('#theImage').src = "image://v1/画像名が入ります。";
		$w('#theButton').label = "Look Outside";
		$w('#searchVLine').hide();
		showing = 'inside';
	}
	else {
		$w('#theImage').src = "image://v1/画像名が入ります。";
		$w('#theButton').label = "Look Inside";
		$w('#searchVLine').show();
		showing = 'outside';
	}

}

$wと言う独自の変数を使用します。
記述の仕方はjQueryと似ているので、jQueryを触った事がある方は
触りやすいかもしれませんね。

画像を変更する方法

サンプルデモのコードを修正する際に画像の変更方法に迷うと思いますので
変更方法をご紹介します。

↑画像のパスが記述されている箇所をマウスオーバーすると
メディア管理画面表示されます。
表示されたOpen Media Managerをクリックします。

↑通常の画像設定画面が表示されるので
ここから画像を選択すればOKです。

クリック後の画像を切替える方法も同様に可能です。

デモ2.マウスオーバーで吹き出し表示/ハイライト処理

↑このようにマウスオーバーする事で吹き出しを表示し、
画像のハイライトをする事が可能です。

動作デモ

設置するためのコード

マウスオーバーした際に 該当箇所のshow()を呼び出しています。

export function yellowHotspot_onMouseIn(event) {
	yellow.show();
	captions.show(0);
}

export function yellowHotspot_onMouseOut(event) {
	hideAll();
}

実際の利用はこちらも「Open In Editor」から利用してください。
■Example&Wixへの読み込み

デモ3.グリッドレイアウトとタイルレイアウトを切り替える

↑ボタンをクリックすると、
レイアウトを切り替える事が可能です。
サンプルではタイル表示とグリッド表示を切り替えています。

動作デモ

実際の利用はこちらも「Open In Editor」から利用します。

■Example&Wixへの読み込み

デモ4.要素の折りたたみ

↑列をクリックすると
折りたたんでいた要素を表示する事が可能です。

動作デモ

■Example&Wixへの読み込み

デモ5.操作に応じて要素を非表示にする

バックパックに追加できる4つのアイテムのそれぞれがonMouseIn、onMouseOut、onClickイベントハンドラを使用して、各インタラクションの適切な画像を非表示にして表示します。

↑アイテムをクリックすると、バックパックの中に表示されます。

動作デモ

■Example&Wixへの読み込み

デモ6.プリローダー

外部のWEBサイトからのデータ取得など、読み込みに時間がかかるものがある場合に使用すると、Webサイトのコンテンツがロードされていることを知らせる事が可能です。

↑コンテンツが読み込まれると、プリローダーがフェードアウトして
コンテンツを表示します。

動作デモ

実際の利用はこちらも「Open In Editor」から利用してください。

■Example&Wixへの読み込み

まとめ

Wix Codeを使用する事で今までにないインタラクティブなサイトが構築できるようになっていますね。

JavaScriptを触った事が無い人でもサンプルを見ながら操作できるので、
興味のある機能がありましたらぜひ使ってみてください。

突然ですが、Wix.comは使っておりますか？

先日Wix.comでJavaScriptやデータベース連携ができる Wix Codeと言う機能がリリースされました。

Wix Code is now open to everyone!

This revolutionary product will allow you to create without limits.
Intrigued? Read more about #WixCode >>https://t.co/Dow8grSPQ6#WebDesign pic.twitter.com/WVPmSX7NDo

— Wix.com (@Wix) 2017年12月5日

この機能は、
WixでJavaScriptを使いたい!
データベースと連携して大量にページを自動生成したい！

と言う要望を実現するためのツールです。

インポートしたExcelと連携してページ出力が出来るなど、
大量ページ作成がかなり簡単になっており、Wixの印象がかなり変わりました。

データベース連携が出来れば、
今まで出来ないと思っていた他サイトからのデータ移行などもスムーズに出来そうですね。

公式サイトによると以下のような事が出来るようになるとの事です。

具体的には、動的ページの作成、サイト訪問者の情報収集、データベースの情報抽出、訪問者の行動に沿ったインタラクティブなサイト作成、Wixと外部APIの連動、など様々なことが簡単にできるようになります。

Wix Code新登場 : コーディングの力で限りない拡張性を実現する新ツール｜Wix公式ブログ

データベース連携の機能の使い方

Wix Codeには沢山の機能があるのですが、本日はデータベース連携の使い方をご紹介。

Wix Codeを有効にする

まずはWix Codeの機能を有効にします。

↑サイトエディタを表示し、「ツール」から「デベロッパーツール」にチェックを入れます。

↑すると、「サイト構成」の中に「Database」と言う項目が表示されます。

「+」ボタンをクリックし、「New Collection」を選択します。

↑「作成をはじめる」をクリック

↑データベースコレクションの名前を入力します。

英数字のみ入力可能ですので分かりやすい名前をつけてください。

「What’s this database collection for」の欄は
「Site Content」とします。

その後、「Create Collection」をクリックします。

↑エクセルのような表が出てきますので、カラム名と内容を自由に追加が可能です。

↑「+」ボタンをクリックすると、カラムの追加が可能です。
追加するカラム名とデータ型を選択します。

↑各項目を追加していくと、このような表が完成します。

↑データ入力が完了したら、データベース名の横にある歯車マークをクリックし
「Add a Dynamic Page」をクリック。
ここでデータベースと連携するページを作成します。

↑ダイアログが表示されたら、「Item Page」を選択し「Next」をクリック。

↑URLの形式を指定します。

データベースの値とURLが連動しますので、
どの値を使用するか選択し、「Create Page」をクリック。

↑ページが作成されました。
データベースと連携するためのデータセットアイコンが表示されていればOKです。

↑ここからはデザイン面の作業をします。

追加ボタンをクリックして、データベースと連携したい項目を追加します。
今回はテキストを追加します。

↑追加されたテキストの右上の「データに接続」をクリックします。

↑接続先データベースを先程作成したデータベースに、
テキストの接続先を表示したい項目を選択します。
次に画像を追加します。

↑追加する画像を選択します。
画像はデータベースの物を表示するため、配置する物は何でも構いません。
今回はWixフリー素材を選択します。

↑画像を配置しました。

↑「データに接続」をクリックします。

↑先ほどと同様に接続先データベースを選択し、
画像を表示したい項目に指定します。
altタグ、リンク先などもデータベースの項目と連動可能です。

↑ここまでの内容がきちんと反映されるか動作確認をしたい場合は、
画面右上の「Preview」をクリックします。

↑プレビュー画面が表示されました。
データベースに入力したタイトル、画像が表示されている事を確認します。

↑次、前ボタンを押すと、他のデータに移動ができます。

↑同様の手順で他の項目を追加し、レイアウトを整えます。

↑レイアウトが完成したら、「公開」をクリックします。
以上で設定は完了です。

URL規則について

URLは先程登録した以下のフォーマットになります。

http://www…/ recipes/{ title }

​​
titleに基づいて表示する内容が設定されます。

Wix.comで動作するサンプル

ここまで一通り説明した内容が動作するサンプルがWix.comに公開されています。

Wix Code – Advanced Web Application Development | Wix.com

上記リンクからサイトを作成できますので、
まずは触ってみたいと言う方はぜひご覧ください。

Wix Codeの特設ページではその他にも
テーブル表示の仕方やフォーム入力の作り方、Wix Code APIについても記載があります。
サンプルは英語版のみとなりますが、興味がある方はぜひ見てみてください。

Wix.comで無料ホームページ作成を始める

使ってみた感想

Wixでネックだと思っていたのが、ブラウザ内のエディタのため、
多少もっさりするんですよね。。
（これはWixに限らずですが・・）

このもっさり感がデーターベースを使う事でストレスがかなり減りそうだと感じました。

以上、Wix Codeでデータベース連携をする方法でした。

jQueryとPurlライブラリを読み込む

Purlは以下からダウンロードをします。
GitHub – allmarkedup/purl: [NO LONGER MAINTAINED] A JS utility for for parsing URLs and extracting information out of them.

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='purl.js'></script>

JavaScriptコード

以下のコードにて全てのaタグにGETパラメータを付与します。
外部リンクにはパラメータは不要なため、内部リンク（http://～から始まるドメイン名および相対パス）にのみ付与する処理をしています。

jQuery( function( $ ) {

　//GETパラメータが無い場合は処理終了
  if (location.search == '') {
    return;
  }

  //GETで取得する値
  var req_params = $.url(location.href).param();
  var reg = new RegExp("^(https?:)?\/\/"+document.domain);

  $('a').each(function(){
    var url = $(this).attr('href');
    if(typeof url !== "undefined") {
        if (url.match(reg) || url.charAt(0) === "/") {
            //内部リンク時の処理
            var parsed = $(this).url();
            var old_params = (parsed.attr('query') == '') ? {} : parsed.param();
            var new_path = parsed.attr('path') + '?' + $.param($.extend(old_params, req_params));
            $(this).attr('href', new_path);
        }
    }
  });
});

すでにリンク先に指定のパラメータがある場合も想定されるため、
既存のパラメータにマージする処理をしています。

以下のサイトを参考にさせていただきました！
jQuery クエリパラメータを全リンクに付加

PHPバージョンを7.1に変更した際に以下のようなエラーが表示されるようになりました。

Warning: Parameter 2 to SyndicationDataQueries::posts_search() expected to be a reference, value given in wp-includes/class-wp-hook.php on line 298

Warning: Parameter 2 to SyndicationDataQueries::posts_where() expected to be a reference, value given in wp-includes/class-wp-hook.php on line 298

Warning: Parameter 2 to SyndicationDataQueries::posts_fields() expected to be a reference, value given in wp-includes/class-wp-hook.php on line 298

Warning: Parameter 2 to SyndicationDataQueries::posts_request() expected to be a reference, value given in wp-includes/class-wp-hook.php on line 298

エラーメッセージを見ると、
参照渡しではなく、値として渡す必要があるとの事。

対処方法としては以下ファイルを修正します。

feedwordpress/syndicationdataqueries.class.php

41行目

function posts_search ($search, &$query) { 
↓
function posts_search ($search, $query) {

78行目

function posts_where ($where, &$q) {
↓
function posts_where ($where, $q) {

95行目

function posts_fields ($fields, &$query) {
↓
function posts_fields ($fields, $query) {

34行目

function posts_request ($sql, &$query) {
↓
function posts_request ($sql, $query) {

上記修正をする事でエラーメッセージが表示されなくなりました。

参考サイト
https://github.com/radgeek/feedwordpress/issues/86

BASIC認証のかけかた

/etc/httpd/conf/httpd.conf内、<Directory>の箇所に以下の記述を行います。

<Directory "/home/www/html/">
AuthUserFile /home/www/html/.htpasswd
AuthGroupFile /dev/null
AuthName "Basic Auth"
AuthType Basic
Require valid-user
</Directory>

初期設定の要素を削除

しかし、httpd.confには初期で様々な記述があり、不要な情報を削除する必要があります。
私の場合は以下記述を残していたため、ダイアログが表示されませんでした。

Require all granted

Require all granted を記述すると、全アクセスを許可してしまっている状態となります。
Apache 2.4 の Require ディレクティブは、デフォルトでは複数定義すると or 扱い(暗黙のRequireAny)になるので、「無条件でOK か ベーシック認証できたらOK」という条件になり、常に全アクセスを許可する記述となっています。

ですので、Require all grantedを削除する事で正常に動作が確認できたと言うオチでした。

Movable Type6をインストールするためにCPANモジュールをインストールする際にハマりました。

まずは普通にcpanをインストールします。

# yum install perl-CPAN

その後、モジュールをインストールしようと思いcpanを実行します。

# cpan

すると、以下のようなエラーが出てcpanが実行出来ませんでした。

Can’t locate Socket.pm in @INC (@INC contains: /usr/local/lib64/perl5 /usr/local/share/perl5 /usr/lib64/perl5/vendor_perl /usr/share/perl5/vendor_perl /usr/lib64/perl5 /usr/share/perl5 /root) at /usr/share/perl5/Net/Ping.pm line 12.
BEGIN failed–compilation aborted at /usr/share/perl5/Net/Ping.pm line 12.
Compilation failed in require at /usr/share/perl5/CPAN/Mirrors.pm line 43.
BEGIN failed–compilation aborted at /usr/share/perl5/CPAN/Mirrors.pm line 43.
Compilation failed in require at /usr/share/perl5/CPAN/FirstTime.pm line 11.
BEGIN failed–compilation aborted at /usr/share/perl5/CPAN/FirstTime.pm line 11.
Compilation failed in require at /usr/share/perl5/CPAN/HandleConfig.pm line 579.

Socket.pmが無いためのエラーが出ておりました。

対処法

Socket.pmをインストールするために、perl-coreをインストールします。

# yum install perl-core
・・・
Complete!

これでcpanが使えるようになりました。

cpanモジュールをインストールしてみる

cpanコマンドを利用してNet::SMTP::TLSをインストールしてみます。
cpanに-iオプションをつけインストールしたいモジュールを入力しEnterキー押します。

# cpan -i Net::SMTP::TLS
  AWESTHOLM/Net-SMTP-TLS-0.12.tar.gz
  /bin/make install  -- OK

以上で設定は完了です。

こちらのサイトを参考にさせていただきました。
感謝！
http://ll.just4fun.biz/?Perl/CPAN/CPAN環境を構築する

以下に手順をまとめます。

1.CPIコントロールパネルへログインを行う

まずはWEB画面にてコントロールパネルへログインします。

2.「テストサイト構築」から「テストサイトSSHを利用する」をクリック

（公開サイトの場合には公開サイト用の箇所を確認ください）

3.利用開始をクリック

すると、「公開鍵が登録されていません。鍵ペアを生成するか、公開鍵をご登録のうえ、ご利用を開始してください。」と表示されるようになります。

4.公開鍵を登録

以下のファイルの内容をコピーします。

~/.ssh/id_rsa.pub

コピーした内容を管理画面の以下の箇所に貼り付けて登録します。

5.SSHアカウント設定を確認する

この画面が表示されれば設定は完了です。

SSH接続する際に、テストサイトと公開サイトでポート番号が違うので注意してください。

以上で設定は完了です。

SSH接続を行う

以下コマンドを実行する事でログインができました。
※テストサイトの場合

$ ssh -p 10398 [aeから始まるユーザーID]@[FTPホスト名]
Welcome to FreeBSD!
#############################################################
#                                                           #
# Environment you are logged in a staging environment is    #
#                                                           #
#############################################################
 test %

無事に接続が確認できました。
以上、CPIサーバーへSSHで接続する方法でした。

Wix.comは2008年にβ版がリリースされてから、現在では世界一億人ユーザーが使う無料ホームページ作成サービスです。
見た目に美しいデザインがドラッグ&ドロップで簡単に作れるのが特徴で、
カスタマイズも直感的に可能です。

ネットに詳しくない方でも使いやすいインターフェイスになっているのが特徴です。

そんなwix.comですが、実はブログも作れるのはご存知でしたでしょうか？

Wix.comのブログはデザイン性が高く綺麗なテンプレートからカスタマイズが可能な事や、
写真や動画がボタン一つで投稿できること、SEO対策としてパーマリンクやメタ情報も設定機能もある非常に高機能なブログサービスになっています。

こんなにすごい仕組みなのに無料なのが驚きですよね。

ブログを始めて見たい方、もしくは今のブログサービスに満足していない方のために、使ってみた様子をご紹介。

ブログの始め方

まずはwix.comのブログ開設ページにアクセスをします。

↑「今すぐはじめる」をクリック

↑テンプレート選択画面から、好みのデザインを選びます。
ビジネス・ネットショップ・写真・飲食店・イベント・美容・健康向けなど16カテゴリ、400個以上のテンプレートから選ぶことが可能です。

↑テンプレートを選んだら、ブログのタイトルや位置を自分好みに変更します。
ドラッグ&ドロップで直感的に操作ができるので、見た目にもこだわる事が可能です。
背景の変更やテキストの修正など、リアルタイムに修正できます。

Liveチャット機能の追加やフォーラムの追加など、機能単位の「アプリ」を追加する事で機能を追加していく事も可能です。

↑ブログ・パーツも設定可能。画面は新着記事を追加する様子です。

↑ブログパーツはその他にも関連記事の表示機能、Facebookコメントの表示なども設定可能です。

これだけ沢山の機能があれば自分好みのブログにカスタマイズできますね！

ブログ投稿に便利な機能

ブログ投稿時の機能も非常に便利なものが揃っていますのでご紹介です。

↑シンプルなブログ投稿画面
ボタン要素をアイコンにする事で画面全体がすっきりとしていて、書くことに集中出来るようになっています。

↑画像のアップロード画面。自分のコンピューターからアップする以外にも
無料フリー素材から選択可能です。
この写真が非常に沢山あるため、写真に困る事はなさそうです。
ビジネスでブログを立ち上げる場合などで、他のサイトで使っている写真と被らないようにしたい場合は、有料のbigstockの写真も割引価格で購入可能です。

↑画像ギャラリーの作成。自動再生のOn/Offやスライドショーの表示時間についても細かく設定が可能。
レイアウトをタイル型に変更する事も出来ます。

↑動画の投稿もボタン1つで可能に。
YoutubeとVimeoからキーワード検索をして貼り付ける事ができます。
その他にもGIFアニメの貼り付けも同じように操作可能です。

↑HTMLタグを挿入したい場合も専用の入力ボックスから可能。
JavaScriptやiframeも挿入出来るので、
FacebookやTwitterのウィジェットや、他のサイトのパーツを埋め込んだりする事も可能です。

↑SEOの設定が記事入力時に可能です。
metaタイトル、metaディスクリプション、記事抜粋を指定する事で検索に引っかかりやすくする設定が可能なのです。
URLパーマリンクの指定、モバイルタイトルも指定出来るようになっています。

↑関連記事の指定が可能。
過去に投稿したブログ記事から検索し、どの記事を関連記事エリアに表示するか指定します。

モバイルエディタ

↑モバイルの見え方は「モバイルエディタ」に切り替えて設定できます。
モバイル版ではブログパーツの追加は出来ないようになっています。

見栄えの調整が主な用途になりそうです。

最後に

ブログは作って終わりではなく、記事を更新してコンテンツを追加していく必要があります。
長く使うために必要なのが使いやすさだと思っていて、
どんなに高機能でも使いづらかったりすると、続けて行くのは難しいと思います。

その点、Wix.comのブログは非常に使い勝手が良く、初心者の方も直感的に使えるので途中でつまずく事なく設定ができると思います。

興味のある方はぜひ使ってみてください。

Macで使いやすい画面キャプチャソフトを探していたら
「Annotate」と言うソフトを教えてもらったので自分用にメモ

最近までMonosnapと言うソフトを使っていたのですが
日本語が中華フォントみたくなってしまい、業務では使えないので辞めて
乗り換えました。

有料のソフトですが、非常に使いやすいですよ。
よかったらぜひ

https://itunes.apple.com/jp/app/annotate-capture-and-share/id918207447?mt=12

jQuery必須。

jQuery(document).ready(function($) {
	$("#check_link").click(function(e) {
		e.preventDefault();
		if($("#checkbox_doui").get(0).checked) {
			location.href = $(this).attr('href');
		} else {
			alert("チェックボックスをチェックして下さい");
		}
	})
});
document.write('
 チェックをするとボタンクリック可能です　アンカーテキストを記載');