ファンタスティックな万華鏡風花火です。スピーカ音量は小さめに！
ウェブにおいて動的コンテンツの開発はFlashを採用することが当たり前でしたが、スティーブジョブズ氏の言葉を借りるまでもなく、Flashはバッテリーの消耗が激しいなどの問題を抱えているようでした。
ウェブアプリはブラウザの充実により、特別な専用ツールを使うことなくHTML5を主軸とした開発に移行しています。時流に乗るべくこのウェブアプリはHTML5canvas要素＋Javascriptで開発されました。
《参考資料》『HTML5canvas要素+Javascriptで作る、動的コンテンツ』
はじめに
あみだくじは当初、パソコンで動作するEXEタイプのアプリケーションをC言語で記述し発表しました。次にスマホで動作するAndroidアプリを開発して発表しました。
今回はパソコン、スマホ、タブレットで動作するウェブ上で動作するあみだくじを引くゲームをJavaScriptを用いて作成しました。ブログの利用規定をお読みいただいて無料でお使いください。あみだくじの由来や作成法については「あみだくじ作成法」をご覧ください。では取り扱い法を示します。
あみだくじの概要
ウェブサイトで動作するあみだくじです。動作画面は次の図に示すように、参加人数を設定するページとくじ引き結果を表示するページがあります。くじを引く前にくじ引き結果の使い方を取り決める必要がありますが、くじ引き参加人数を設定するだけというシンプルさが特徴です。
あみだくじの構成
あみだくじは3つの要素から成り立っています。
①あみだくじを引く
あみだくじを起動するページで参加人数を設定します。
②阿弥陀（Lottery）
あみだくじを実際に作成し実行結果を描画するページです。
③あみだくじを引く取り扱い説明書
あみだくじを引くため、取り扱い方法について記載された本ドキュメントです。
このくじはシンプルさが目玉であり、当たり人数や当たり先を設定しません。参加者の人数のみ入力します。くじは制御ソフトが自動的に引き、乱数を使って処理しますので毎回、異なる結果になります。参加者名を入力しないので、整理番号で管理されます。罰任務や褒賞はくじを引く前に参加者の間で決めておきます。
利用方法
①ブラウザでJavaScriptを有効にします。あなたのブラウザでJavaScriptを有効にする方法を参考にして設定しますが、すでに有効になっている場合が多いです。
②起動ページはあみだくじを引くです。
③参加者のIDを決定します。受け付け順、出席番号の若い順、年齢順、背の高さ順、名簿順、住所が北の順などで０から始まる連番です。出席番号の場合、欠番や不参加に留意ください。
④参加者を3～16の範囲で設定します。
・任務（ミッション）や褒賞の当たり先を決定します。例として大当たりはＡ、当たりはＣなどとです。
・たとえば、12名の参加者を4人ずつ3チームに分ける場合、ＡＢＣＤ、ＥＦＧＨ、ＩＪＫＬとグループ化すると決めてからくじを引きます。
・オレンジボタンをクリックするとあみだくじがすぐに描画されます。全員がそろってからクリックしたほうが公平です。
・クリックのタイミングは乱数を使うため結果への影響は皆無に近いです。
⑤あみだくじ参加人数を設定のオレンジボタンをクリックします。
⑥阿弥陀画面への移行を確認し、ファンファーレが鳴るまで待ちます。
⑦ファンファーレが鳴ったらあみだくじ上部の参加者番号や下部のくじ記号を見て結果を確認します。
⑧「前のページに戻る」をクリックすれば、参加者人数を変更してくじ引きを再実行できます。
⑨あみだくじを引くや阿弥陀をウィジェット欄のカレンダーあるいはサイト内検索から起動した場合、ヘッダータイトルにカーソルを当てクリックし選択を確定してください。ブラウザの仕様でカレンダーや検索からの起動では、複数記事が対象になることがあるため、ヘッダータイトルがクリックされるまで半確定状態です。半確定のままでは正常動作にならないことがあります。
⑩「あみだくじを引く」を経由せずにいきなり「阿弥陀」を呼び出しても、参加人数が不明であるため実行することはできません。
⑪「阿弥陀」から「あみだくじを引く」に戻ると《直前のくじ引き結果》が表示されます。画面の小さなスマートフォンではこの方が見やすいです。
利用例
①スピーチの発表順を決める
②合コンの席順を決める
③チーム分けをする
④部屋決めする
⑤掃除当番などの任務を割り振る
⑥焼肉パーティーの準備に用いる
⑦役員を選出する
⑧車の運転順番を決める
進行度
①ブラウザはインターネットエクスプローラとグーグルクロームで動作確認済みです。順次、他のブラウザを確認します。
②スマホでの動作確認はこれからです。
③16名を超える参加者のくじ引きは将来、別の方式にて発表されます。
まとめ
動作の確認については、環境構築が多岐にわたるため時間がかかります。よって多くのコメントをお待ちいたします。
あみだくじを引くに進みます。
スポーツニュースを視聴するとき、出来ればひいきのチームが逆転勝ちしたときの方が興奮します。だから試合結果のほか途中経過がわかると満足感が高いです。スポーツニュースの報道でいきなり結果を報道せずに、本をめくるような効果（めくり効果）を出せたら視聴率が向上するのではないでしょうか。
今回、NIVOスライドショー(Meta Sliderプラグイン)のスライドアップ機能によってめくり効果を実現しました。余談ですが、米国フランクリン・ルーズベルト大統領は「８対７」で決着する試合が一番面白いと語ったそうです。その他、はるか昔に個人名を冠にしたプロ野球チームがあったようです。[metaslider id=5564]
当サイトはWordPressによって記述されています。WordPressはphpで開発されたオープンソースのブログソフトウェアであり2003年5月末にリリースされて以来、世界で最も多くの人々に利用し続けられているブログソフトウェアと言えるでしょう。
この記事で述べていることを実践することにより、階層化された情報の表現方法が可能になり、47都道府県地図から指定された県の詳細情報が得られるようなサイトを構築できるようになります。そのための基礎的なカスタマイズについて記述されています。 ある程度、解明できた階層化表現方法を使ってWordPressのカスタマイズを整理し、合わせてその表現方法を浮き彫りにしていきます。
WordPressのカスタマイズ方法が公開・ドキュメント化されています。カスタマイズといえばテーマに関する記述が多いのですが、ここでは実践的なカスタマイズを取りあげます。 当記事は長くなることもあり、微に細に触れることは避け、詳細なことは他の記事を参照していただきます。
参照記事がなく先陣を切る内容についてはこの限りではありません。 先頭から順を追って読みますが離れた箇所の記述を読む場合は、右下のScroll to Topをクリックして先頭に戻り、サイドバー（ウィジェット）の目次のタイトルを選択してください。
ウェブサイトを表現するWordPressはソースが公開されているので安心感があるのですが、仕様はすべてに一律に有効です。ある記事だけ表現フォ－ムを変えたい、広告を表示させたくないなどと特別仕様で動作させたいことがあります。 
特別な仕様にするためchildフォルダに示す4ファイルを変更することが多いです。 この場合、インストール時に収納されたファイルを直接、変更してもかまいませんが、WordPressがバージョンアップされても新仕様が引き継がれるように、子テーマを作って特別な仕様を追加するように推奨されています。
子テーマとはカスタマイズしたい親テーマ（Twenty Thirteenなど）の普遍的な機能に対し自分用に定義された集まりであり、親テーマに上書きするものです。 
今回は、バージョンTwenty Thirteenを使っていますが、子テーマを採用しないでバージョンアップした場合は、改訂・追加した機能は反映されません。
自分流に定義されるファイルは一つのフォルダ（例ではchild）にまとめられ、親テーマと同一階層に置かれます。このように前、現、次世代という同じ階層であるためバージョンアップに対応することが可能になります。
子テーマに関する項は
①【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-
②【注意】子テーマ作成でトラブルが起きたら…子テーマをつくってのカスタマイズ方法-functoins.php篇-
③WordPressでページごとに別のスタイル（外部CSS）を適用させる方法
を参考にしてまとめられています。先駆者の皆様、わかりやすい解説をありがとうございます。
このたび、TwentyThirteenのWordPressをカスタマイズした内容をファイル単位に示します。カスタマイズするには以下に示したファイルで指定します。
先に述べましたが本家本元のファイルを修正しても問題ありませんが、将来のために子テーマとしてまとめたフォルダ（今回はchild）に必要な機能のみを定義した同名のファイルを用意します。
このように設定しておけば、WordPressの処理系がまず、本元のファイルを読み込んだ後に子テーマファイルを読み、追加してくれます。同じ関数名ならば上書きされ、新規関数名ならば追加されます。 以下にファイル内容を画像イメージで明示し、追加した機能を解説します。山の頂上を極めるのに複数の道があるようにあくまでも一つの方法です。
スライドショーは一連の表示が終了すると元に戻り再び繰り返し表示されるようにloop機能がオンに設定されていますが、function.phpを改造することによって特定のスライダーID（例では319、370、390）においては１回で終了するようにカスタマイズしています。
もう一つのinclude_custom_css関数は、インストールで収納されているstyle.cssを超越して、指定されたページでは別のスタイルを適用させる機能を追加しています。複数cssを取り込めるようにするこの関数をfunctions.phpに定義します。するとカスタムフィールドで取り込みたいcssファイルを絶対パスで指定できるようになります。
single.phpは投稿ページを管理するファイルです。オリジナルファイルは赤枠行が＜？php get_sidebar();？＞になっています。実際、＜？＞は半角です。指定されたカテゴリーのときだけウィジェットを表示するように改造したのが上例です。
その後、ウィジェット記事の表示に条件を設定できるCustom Widgetsプラグインが見つかりましたので、single.phpは削除されました。 上記例は、カテゴリー名が’soft’であるときのみサイドバーが表示されるような設定ですが、月～金曜日だけ表示されるようなサイドバーの作成に参考になるでしょう。
style.cssはWeb
サイトの表示方法を決定しています。#site-title aでタイトルの文字色を変更しています。#import uri(“../twentythirteen/stye.css”);は指定したファイルを取り込むことを指定しています。この例ではタイトルの文字色以外は標準のstye.cssに依存します。
jquery.jsはクリッカブルマップをサイズ可変な画像に対応するように、即ちレスポンシブデザインをサポートするために定義されました。具体的な効能は別稿に記述されます。
サイドバーにはテキストウィジェットで記事を載せることができますが、改行など編集しにくいことが起きます。テキストウィジェットの拡大版ともいえるプラグインツールCustom Post Widgetを使うと、自由度の高いテキスト編集が可能になります。インストール方法と使い方は、『ゼロからはじめる WordPress』が参考になります。
ウィジェット記事といってもメイン
エリアの投稿記事と変わりなくリンクを貼ることもできます。今回はここにメイン記事の目次を作ってパワーポイントのような動作をするウィジェット記事の作り方を後に示します。
ウィジェットはすべてのページに表示されます。カレンダーなどはそれで問題ありませんが、メイン記事と連動する上記のようなウィジェット記事は表示条件を設定しないと見苦しくなります。 条件付きで特定のウィジェットを表示・非表示にしてくれるプラグイン『Custom Widgets』を使います。
使い方は『条件付きで特定のウィジェットを表示・非表示させる方法！Wrodpressプラグイン「Custom widgets」の使い方』、『指定した条件でウィジェットを表示させるWordPressプラグイン→Custom widgets』、『ページ毎（サイドメニュー）に好きな項目だけ表示』を参考にさせていただきました。
今回は、特定の投稿記事でのみ表示されるように設定しました。条件設定は多岐にわたり、様々なケースに対応するには入念な検討が必要のようです。
一つの画像に複数のリンクを貼るにはクリッカブルマップという手法を採用します。四国地方の地図や簡略化した下図の該当箇所をクリックして県別の詳細な情報が得られるようなページを作成できます。
イメージマップの設定例を以下に示します。
通常のメインエリアに表示される投稿記事が完成されている場合、その記事をウィジェットに表示させても動作しません。また、上記例ではサイズ600X450の画像からクリックされた県のURLにジャンプするように作成してありますが、最大化から縮小に変えて地図をクリックした場合も、期待した動作にはならないでしょう。
このような場合においても、変動した画面サイズに対応可能にするプラグイン『jQuery RWD Image Maps』があります。 画像のサイズの変動に対応するための準備について、『クリッカブルマップ(イメージマップ)で１枚の画像に複数リンクを設定する』を参考にさせていただきました。その後に、カスタマイズの具体例で説明した➍jquery.jsを用意します。
以上で前準備が完了しました。ここからはすべてが整っている前提で話を進めてまいります。本文の記事がおおかたの完成時に実施します。では当記事「WordPressのカスタマイズ実践編」目次をウィジェットに作成する手順を示します。 ①ダッシュボード-外観-ウィジェット-副ウィジェットエリアを開き、Content Blockを副ウィジェットエリアの最上位にコピーします。
Show Post Titleの左ボタンにチェックを入れ、保存をクリックします。 ②ダッシュボード-Content Blocks-Add Content Blockと進み、Add New Content Block画面を表示します。
上図のように、タイトルと本文を作成します。テキストウィジェットの中でリンクを貼る方法はメイン記事の作り方にまったく同一です。前もってアンカー名をこの記事に作っておきます。目次はウィジェットに作られるので他ページになり『他ページ中の特定の場所にジャンプさせる』記事を参考にして以下のように作成しました。最後に公開（更新）をクリックして終了です。
③Custom Widgetsが正しくインストール、有効化されていればダッシュボードのメニュー欄に歯車から始まるTS Custom widgetsが現れていますのでクリックします。 ④ダッシュボード-TS Custom widgets-副ウィジェットエリア-Content Block-Post(Edit)と進み、表示するページにチェックを入れ、Add selected postsをクリックし、左上欄にそのページが選択されたことを確認します。以下は2ページを選択した例です。
⑤再び、TS Custom widgets-副ウィジェットエリア-Content Blockを指定すると以下の画面のように2ページが選択されたことが確認できます。
⑥Content Blockが複数ある場合、即ち特別に制御したいウィジェットが複数存在する場合は、①の作業でContent Blockを副ウィジェットエリアに複数用意します。
メイン記事の目次をウィジェットに表示する例を示しながら、WordPressのカスタマイズについて述べました。長くなりましたが一つ一つは複雑ではありませんので少しずつ確認されるとよいでしょう。
かゆいところに手が届くには、ちょっとした努力が必要です。その一つがカスタマイズですがお役に立てれば幸いです。
予告になりますが、上記のようなウィジェットの効果的な使い方である『47都道府県の情報』は、別稿にて発表されます。 xamppのローカル環境で動作確認をしてから公開手続きをしましたが、画像が多くなり手間取りました。次回からはスムースに進むことでしょう。
当ページはトップページから、サイトマップ、最近の投稿、カレンダーから表示されますが、最後の方法で起動した場合はなぜかウィジェット目次が表示されません。調査中です。
カレンダーの日付をクリックした場合は、あたかも本文記事にジャンプしたかのようですが、同一日の記事が複数あるかも知れずまだ確定されていないことが判りました。２つの記事がある場合、２つとも仮表示されます。 読みたい記事名のタイトルをクリックすると待望のウィジェット目次が表示されます。WordPress仕様上、記事が１つしかない場合は自動決定になって欲しいものです（2014-07-05追記）。
今回はバラ用に高さ2ｍほどの支柱ともうひとつのペンステモン用トレリスを新作しました。ペンステモンのための添え木は、Y字形や曲がったものをそのまま使っています。
バラは背丈の伸びが遅くトレリスの力を借りるのは来年以降でしょう。もっと早く存在感を発揮させてあげたくて、周りに朝顔を植えています。
手作り品は武骨で洗練された市販品には及びませんが、『脇役が主役を食ってどうするの』という声に助けられて本日も頑張っています。 
最下右の全面表示（View Fullscreen)をクリックして閲覧ください。スマホ用抽選器取り扱い説明書もご覧ください。読みやすさは大差ありませんが、先の記事はdocxファイルをもとに記事を作成したものであり、Slideshareの採用は記事作り直しの労力節減に貢献するでしょう。
[metaslider id=4655] スライドショーを使った文学散歩です。「方丈記」の序をお届けします。[metaslider id=4639] 終了です。
スライドショーを高級化するのまとめ
Meta Sliderを少し掘り下げてみました。Meteor Slidersに比べ、１つのプロジェクトごとに表示仕様を持ちショートコードにはパラメータを要しないので使いやすいですが、Windows Movie Makerなどではごく普通の機能になっている画像ごとの切り替え効果などの設定はできません。
Meteor Slidersの画像ごとの表示設定を可能とする仕様が志の高い設計思想と言えますが、この機能を使いこなせないので、複数プロジェクトに完全に対応しているMeta Sliderに限りない共感を持ちます。
Meta SliderでRandomというエフェクトを指定すれば、画像ごとの切り替え効果をすることができますが、文字通り相手任せのランダムです。 以下に、前回と異なるCoin Sliderによるスライドショーを示します。
[metaslider id=4614]