オリジナルのAMDローダーを公開しました。
https://github.com/heporap/wicker
WordPressではテーマフォルダにwicker.jsと各モジュール、メインプログラムのファイルを保存し、
/wp-content/themes/my-theme/js/wicker.js
/wp-content/themes/my-theme/js/modules/main.js
/wp-content/themes/my-theme/js/modules/ajax.js
/wp-content/themes/my-theme/js/modules/sprite.js
HTMLタグで読み込みを指定してください。
<script defer async
data-main="main"
data-baseurl="wicker:modules/"
src="<?php echo bloginfo('template_url'); ?>/js/wicker.js"></script>
main.jsにモジュールのロードとメインプログラムを記述して完成です。
(function(){
// 必要なモジュールのロード
wicker.carriage({
"sprite": "sprite.js",
"ajax": "ajax.js"
}
wicker.factory(["sprite","ajax"], function(sprite,ajax){
// モジュールロード完了後の処理
});
})();
HTMLの方はwicker.jsを読み込むための<script>要素１つだけになります。
gruntjs grunt-init のウェブサイト用テンプレートを公開しました。
自動的に #git initとgit remote addまで行います。
https://github.com/heporap/grunt-init-localsite
バグ報告、要望、英文の間違い指摘も歓迎です。
ゲームブックやノベルゲームにも使えそうなテンプレート、ProsemazeをGithubで公開しました。
AngularJSの特徴を掴み切れてないのでライブラリのメソッドで簡単に書ける物をわざわざ自作してるような部分がありそうですし、設計上のゴミが残ってると思いますが。
https://github.com/heporap/prosemaze
動作サンプル
パラメーター指定などはできませんが、ページ分岐で迷路っぽくはできます。
制作方法はシナリオをJSONで書くだけです。
なお、URL直入力するとページを表示できてしまうので、<iframe>でURLを隠しておく事をお勧めします。
それでもHTMLを解析すればバレバレですので、あまり厳格なゲームは作れません。
JSONファイルをXHRで読み込むだけなので、基本的にはサーバーは不要です。
そのため、Phonegapなどでアプリ化しても使えると思います。
jQueryプラグイン『だぶサラダ』プレビュー公開です。
背景画像を利用（内部的には<img>を使用しているので背景ではないのですが）するスライドショーライブラリです。
アニメーションイフェクトを増やした分、オプションが多いのでドキュメントがまだまだ、、、
プログラムの方は重複記述が多いのでリファクタリングが大変そうです。
それにswitchを簡素化するアルゴリズムが思いつきません。。。
背景画像のリサイズはCSSの
background-size: auto; /* デフォルト */
background-size: cover; /* アスペクト比固定、ボックス全体を覆う */
background-size: contain; /* アスペクト比固定、画像全体が表示されるようにする */
にすると楽なんだけど、新しめのブラウザしか対応していない。
しかも、bgExchangerでslideやwipe指定をすると背景の表示が面白いことになるので、面白くない。
やっぱり<img>を使ってwidth:100%、height:100%するしかないのか。
今の所の予定として、とりあえずbackground-position-x、background-position-yをサポートしていないFirefox、Opera12対策のためにbackground-positionに治したのにあわせて、次のバージョン、0.4はbackground-sizeで実装しておいて、その次0.5で<img>に作り直し。そのあと、リファクタリングして1.0リリース、かな。
背景画像を利用してスライドショーを行うライブラリを公開しました。
jQueryプラグイン、bgExchanger
画像連番指定
jQuery(“#header”).bgExchanger(“image.jpg”, 5);
色指定
jQuery(“#header”).bgxchanger([“#FFEEEE”, “#EE88AA”, “#CCFFFF”]);
アニメーションイフェクトオプションとして、スライド、ワイプ、フェードの組み合わせが可能です。
