プロジェクト1‐1:”おしゃべり河童君”を作成!


今回のまとめ

今回は、粕田埋蔵(かすたまいぞう)のブログカスタマイズ講座の第1‐1回として、”おしゃべり河童君”というプラグインを例にプラグイン作成の流れを説明したいと思います。


17/01/31 山田メール(シリーズ2作目にして、ついに主役に躍りでた宝箱)


”おしゃべり河童君”作成の流れ

遊園地のアトラクションに通りかかるタイミングでしゃべりだす人形ってあるじゃないですか。

GitHubでサウンドデータが手に入ったのでオルゴールを作っても良かったんですが、クリスマス向けのゲームで1度作っているので、サンプルとしてページを移動するごとにサイドメニューの河童アイコンに様々なメッセージをしゃべらせてみたいと思います。←テストで動作は確認してあるんですが、実際に設定はしてありません。

この関数にはidを2つ渡すんですが、1つ目は追記に書きこむ優先idで、2つ目はサイドメニューかテンプレートに書きこむ全体idになります。

idの中には、◆区切りでサウンドファイルを複数指定できて、河童アイコンにカーソルを乗せるとランダムに選んだサウンドを再生します。

色々とやっていますが、スクリプトは10行くらいで済んでいます。


画像で一言「シリーズ2作目にして、ついに主役に躍りでた宝箱」


17/02/01 山田メール(どんな困難も乗りこえる。そこに宝箱があるから)


配布について考える

次は、配布について考えてみましょうか。

こういう一言メッセージって、けっこう人気が出るんですよ。笑

もともと配布を前提に書いてあるので、スクリプトはそのままでいいんですが、個別ページごとに設定ができるので、そこだけで1つのコンテンツになりますから、広告を入れたりしてもいいかもしれませんね。

ユニクロのCMみたいな言い方になりますが、山田はいつもxdomainajax.jsを使っています。笑

スクリプトの読み書きができる人からしたらほとんど意味がないんですが、一応簡単なBAN設定もあった方がいいと思います。

とまあ、毎回そうしているとアップデートが大変になりますから、この辺りの機能はpスライダーにまとめます。


画像で一言「どんな困難も乗りこえる。そこに宝箱があるから」


17/02/02 山田メール(そして現れた最強の敵)


プラグインの組み込み

このプラグインは少し単純すぎますが、プラグインの中にもプラグインを組みこめるようにしておくと利用者に自由にカスタマイズを楽しんでもらう事もできるようになります。

プラグインを組みこめるようにする簡単な方法に、JavaScriptのtypeofがあります。

例えば、ifの中でtypeofを使ってymd_plugin1が存在するかどうかを確かめれば、”あれば実行、なければスルー”という処理ができます。

そこで、ymd_plugin1はこちらでは用意せずに利用者に作ってもらえば、こちらが作ったスクリプトの中に利用者が書いたスクリプトを組みこめる訳です。

1人で全ての機能を作るより、(広告ネットワークを作っておいて)利用者にプラグイン作成を許可した方が早く多くの人に配布する事ができます。


画像で一言「そして現れた最強の敵」


17/02/03 山田メール(さあ、鼻をかみなさない。(涙腺崩壊必至))


HTMLで設定ができるようにする

ブログを書いているという事は、だいたいHTMLくらいは使えるでしょうから、HTMLで設定ができるようにしてあげると利用者にとって使いやすくなります。

やり方は簡単なんですが、idを付けてdisplayをnoneにしたdivタグの中に設定を書きこめるようにするだけです。

スクリプト側では初期値は必要になりますが、ifの中でgetElementByIdを使ってidが存在するかどうかをチェックして、あったらinnerHTMLを変数に代入します。

初期値が必要になるのは、if文で確認するので、なかったらなかったでスルーするからです。

別のやり方もあるかもしれませんが、利用者にとっては分かりやすい方法だと思います。


グラサン侍改め粕田埋蔵(かすたまいぞう)「ぶっ、出番なし!」


画像で一言「さあ、鼻をかみなさない。(涙腺崩壊必至)」




スポンサーサイト
にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング

コメント

コメントの投稿

非公開コメント