だぶだぶノート

オリジナルの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

バグ報告、要望、英文の間違い指摘も歓迎です。

月読神社にて。

窓の結露。

ちなみにこの赤い実のある木は、膝より少し高いくらいの高さです。

<img>など、タグ属性にwidth、heightを指定できる要素には、CSSでもwidth、heightを指定すると、そのCSSの方が優先される。

<style>
img { width: 120px; height: 120px }
</style>
<img src="poster.png" width="300" height="300">

表示例：

width、またはheightの一方をautoにすると、アスペクト比を固定して拡大する。

<style>
img { width: 120px; height: auto }
</style>
<img src="poster.png" width="300" height="300">

表示例：

しかし、<video>では少々事情が違うようだ。 Read_On

ゲームブックやノベルゲームにも使えそうなテンプレート、ProsemazeをGithubで公開しました。
AngularJSの特徴を掴み切れてないのでライブラリのメソッドで簡単に書ける物をわざわざ自作してるような部分がありそうですし、設計上のゴミが残ってると思いますが。

https://github.com/heporap/prosemaze
動作サンプル

パラメーター指定などはできませんが、ページ分岐で迷路っぽくはできます。
制作方法はシナリオをJSONで書くだけです。

なお、URL直入力するとページを表示できてしまうので、<iframe>でURLを隠しておく事をお勧めします。
それでもHTMLを解析すればバレバレですので、あまり厳格なゲームは作れません。

JSONファイルをXHRで読み込むだけなので、基本的にはサーバーは不要です。
そのため、Phonegapなどでアプリ化しても使えると思います。

あけましておめでとうございます。
今年もよろしくお願い致します。