TickTack.js - requestAnimationFrameをもうちょっと使いやすいモノにしてみた

以前に「setTimeoutの代替関数?requestAnimationFrameを試してみた」という記事を書きましたが、ちょっと実行時間に狂いが激しかったので、色々と試してみてラッパークラスを作ってみたのでメモ。 改善点 ある程度FPSに近づける→FPSの実行回数に近づける 以前のデモだと実はIE8非対応だったのですが解消 使い方 <script src="path/to/TickTack.js"></script> <script> var »

Middlemanを試してみた

静的サイトジェネレータの一つであるMiddlemanを使う機会があったのでメモ。 Jekyllやら、Octpressやら、黒い画面を使わない(らしい)Phestやら色々ありますが、今回はなんとなくMiddlemanにしました。 Rubyの記法も何となく覚えられるので一石二鳥…なのだろうか。 Middlemanについて RubyのフレームワークのSinatoraベースで作られていて、ERBだけじゃなくてHAMLやらSlimやらStylusやらSASSやらCofeescriptやら色々対応しているみたいです。 この辺りは他の静的ジェネレータでも恐らく一緒でしょうか?(使ったこと無いので分かりませんが…) YAMLベースでテンプレート側に変数を渡す事が出来るので、プログラマブルに構築する際は結構便利な気がします。 ちなみに、インストールから初期設定については日本語ドキュメントが充実していて、公式サイトでかなり丁寧にかかれていますので、そこで事足りると思います。 後は個人的に詰まった所。 相対パスにする 特に設定をしない場合は、ページリンクや読込のパスが絶対パスになりますが、最終的に公開する際にサブディレクトリにアップロードしたい時には面倒なことになるので、相対パスにしたい時があるかと思います。 »

Twilio APIを使ってPHP経由でSMSを送信してみた

クラウド電話APIのTwilioをPHPで使ってSMSを送信する機会があったので、今後のためにも残しておきます。 Twilioについて Twilioとは、Web上で電話を操作することが出来るクラウド電話サービスで、APIも提供されているため、Webシステムと連動して利用することが出来ます。 最近では本人認証のために、電話番号を入力→電話 or SMSで認証コードを通知という流れがあるかと思いますが、そういった電話やSMSの送信を自動的に制御する、といったことが出来るようになります。 Twilio API Twilio APIは「Twilio REST API」というREST形式も提供されており、HTTP通信で操作を行うことが出来ます。Twitter APIやFacebook API等の最近主流の方法ですね。 »

Amazon EC2(t1.micro)のPHP実行環境をHHVMにしてみた

Facebookが開発しているPHPを高速に実行するHHVMが気になっていたので、試しにこのブログを動かしているサーバにインストールさせてみました。 HHVM単体でサーバもたてれるようですが、今回はCentOS6 + Nginx + HHVM(Fastcgi)で動かしています。 HHVMをインストール まずはHHVMをインストールします。RPMが配布されていますので、yumでサクッと(いきませんでした)。 $ wget http://www.hop5.in/yum/el6/hop5.repo $ yum install hhvm // libwarf »

setTimeoutの代替関数?requestAnimationFrameを試してみた

アニメーションを実装するときに、setTimeoutやsetIntervalを利用してDOMやCSSをいじってアニメーションを実装していましたが、今更ながらrequestAnimationFrameというものの存在を知りました。 調べてみると完全に代替出来るものではなさそうなので、自分なりに使い方とどんな時に利用できるのかを残しておこうと思います。 requestAnimationFrameとは setTimeoutは指定したミリ秒間隔で渡した関数を実行しますが、requestAnimationFrameは「再描画を実行する前に実行」します。 そのため、PCのスペックや同じタイミングで動作している処理の内容によって実行される間隔が変化します。(MDNによると毎秒60回程度実行されるとのこと) 利用するメリット 毎回描画出来るタイミングで実行されるため、描画できないタイミングでDOMやCSSを書き換えても実際には動いていない、というような無駄な処理が発生しません。 また、タブが非アクティブな状態になると処理が軽減される、そうなのですが、実はsetTimeoutでも同じような処理がなされているそうです。 利用するデメリット 処理が実行されるタイミングがブラウザ側に依存されるため、狙ったタイミングで実行することができません。 また、実行されるタイミングも必ずしも一定とは限らないため、 »

spl_autoload_registerを試してみる

requireをダラダラと書くのが嫌になってきたので、splautoloadregisterについて調べてみました。 __autoloadは? __autoloadを使えば同様にrequireを記述せずとも宣言されていないクラスが呼ばれた時に特定の処理を実行させることが出来るのですが、メソッドを一つしか登録出来ない、という制約が存在します。 コレにより、二回宣言してしまって上手く動かない、みたいな事になる危険性があります。 splautoloadregisterは? そこで登場したのが、「splautoloadregister」。__autoloadを呼び出すための関数をスタックしてくれます。 複数関数を追加しても全て実行してくれるので安心です。場合によっては何度も実行される可能性もあるので、なるべく少なくした方が良いのでしょうが。 実装例 例えば下記のようなクラスを読み込むクラスを用意しておくと、「Hogecontroller」を呼び出した時に自動的に「path/to/controller/Hoge.class.php」 »

記事内のコードをGistにしようと思ってSublime TextにGistプラグインを入れてみた

記事内に表示するコードを今まではGoogle Code Prettifyを使っていたのですが、サーバのリソースを少しでも減らそうと思い、Gistを利用してコードを表示する方法に変えてみることにしました。 加えてGistサイト内でも追加は出来るのですが、Sublime Textにもプラグインがある様なので、せっかくなので使ってみることにしました。 Sublime Text Gistプラグイン まずはPackage Controlをインストールしておきます。インストール方法はコチラが参考になると思います。 Package Controlがインストールできたら、Gistプラグインを探します。他のプラグインと同様に、「Cmd+Shift+P(Winの場合はCtrl+Shift+P)」で開き、 »

PHPでMovableTypeのデータを扱ってみた その3

その1、その2でPHPで記事内容を取得する方法を掲載してきましたが、実はあれだけではカスタムフィールドのメディアファイルを取得出来ていませんでした。 今回はPHPライブラリを利用してメディアファイルの情報を取得する方法を探した所見つかったのでメモしておきます。 実装方法 MT5の場合 その2の書き方で、メディアファイルのIDを取得します。 // メディアファイルのカスタムフィールド [field_name] を宣言 Entry::install_meta( 'entry', 'field_name', 'vclob' ); // メディアファイルは [vclob] 形式 メディアファイルのIDを取得した後は、詳細情報を取りに行きます。 メディアファイルの詳細は「fetch_ »

Backbone.localStorage.jsを使ってオフラインWebアプリケーションを作ってみた

ネイティブアプリとして作るにしてはコストや、制限がかかりすぎてしまう件を考慮して、Webアプリをの方が良いと判断し、Backbone.localStorage.jsを使ってオフラインWebアプリケーションを構築した時のメモを残しておきます。 Backbone.localStorage.js Backbone.jsのModel、CollectionのSave、CreateのメソッドをOverrideし、HTML5のlocalStorage機能を利用してクライアント側に保存するライブラリです。 DLはこちらから:jeromegn/Backbone.localStorage 通常であればAjaxで通信する所をlocalStorageに保存する流れになりますので、通信したい場合はjQueryやZeptoを利用して手動で行う必要があります。 例えばCollectionでBackbone.localStorage.jsを利用する場合はこんな感じに記述します。 ( function( $ ) { /** * FugaModel */ FugaModel »

Foundation 4を使ってテーマを作ってみた

Twitter BootstrapやHTML KickStart、Blueprint等、CSS Frameworkの一つのFoundation 4を使ってWordPressのテーマを変えてみました。 本当はYUIのPureを使ってみようかと思っていたんですが、フォントの指定によって段落ちすることがある、という不具合が起きてしまったのでFoundation 4を使ってみました。 特徴 レスポンシブウェブデザイン対応のための仕組みが多数組み込まれており、基本的な事はFoundation 4の仕様で実装することが出来ます。 例えば、特定の幅より小さいウィンドウサイズの時の表示・非表示、グリッドのサイズ変更、メニューの格納・タップで表示等、便利な機能が多数含まれています。 使い方 Foundation 4は、「normalize. »

PHPでFlash Liteを動的生成するライブラリMedia_SWFを色々といじって自分向けにしてみた

とある案件でFlash Lite 1.1を触っていまして、少しでもややこしい動きをさせようとすると「そんなこと出来ませんよ」って言われながら、色々と試行錯誤をしていました。 その中で、容量を減らすために通常のFlashでは非同期的に素材を読み込んだりすると思うんですが「そんなこと出来ませんよ」と言われたので、PHPでswf内の変数や画像を書き換える事が出来る、と以前聞いたことがあったを思い出しながら挑戦してみました。 swfをPHPで操作するライブラリ swfをPHPで操作するライブラリは「swfmill」「SWFEditor」「Ming」という様なライブラリがあるそうなのですが、今回実装したかったのは、「変数の挿入・置換」「特定の画像の差し替え」の2つだけだったので、参考サイトで紹介されていた「 »

Win/Mac両対応の更新ファイルを抽出して書き出すAIRアプリ「Cowsee」が便利

以前にMacに乗り換えてから更新ファイルを抽出するのが面倒なのでシェルスクリプトを作ってましたが、Macでも視覚的に操作出来るアプリを見つけましたのでご紹介。 ダウンロード先 更新ファイルを抽出して書き出すアプリCowsee。これは便利すぎて酒が進む。 こんな所が便利 フォルダの指定がドラッグ&ドロップで出来る 差分ファイルのファイル名をコピペ出来る AIRアプリだからWin / Mac両対応 日本製のアプリだから日本語(個人的に) 元々用意していたシェルスクリプトが霞んで見えてしまうくらい便利です。 車輪の再発明はしないように気をつけないといけないですね。 »

WordPressに投稿したメディアをAWS S3に自動的にアップロードする「Nephila clavata (絡新婦)」をインストールしてみた

以前にサーバをAWSのEC2に移管した旨を記載させて頂きましたが、静的なデータはEC2ではなくS3に置いておいたほうが効率的のような気がしていました。 ただ、毎回S3にファイルをアップして、ブログでリンクを貼る作業をしようとするとどうしても面倒だったところ、WordPressで投稿したメディアを自動的にS3にアップしてくれるプラグイン「Nephila clavata (絡新婦)」があったので試してみました。 仕組みについて WordPressでメディアを追加すると、「/wp-contet/uploads/*」に保存されますが、その「uploads」以下のデータをS3に転送します。 管理画面上の操作はWordPress設置側のメディアを扱い、表示時に自動的にメディアへのリンクURLをS3側に書き換えて表示されるようです。 なので右図の画像は「blog.sus-happy.net」にも存在していますが、表示する際に自動的に「 »

FuelPHPのクエリビルダでMySQLのorder by fieldを利用するためにDB::expr()を使ってみた

FuelPHP等のフレームワークを使う時はついつい便利なのでクエリビルダを利用してるのですが、どうしても特殊な操作を行う時はクエリビルダを利用するほうが分かりづらくなってしまったり、自動的にエスケープされて利用できなかったりして、結局クエリ文を直書きしてしまっていました。 その一つとして、MySQLのorder by field機能がクエリビルダにメソッドが存在しないのですが、何とかクエリビルダを使いながら実現出来ないか調べてみました。 order by fieldって? そもそもorder by fieldとは、指定した順番に検索結果を並べかえる、というMySQL独特な記法です。 SELECT * FROM `table` ORDER BY FIELD( `column`, 3, 1, »

CreateJSを使って簡単なゲームを作ったのでメモ

とある案件でCreateJSを利用してスマホ用のWebゲームを作ったので、その時に調べた内容をメモメモ。 Canvasを利用すること自体あんまり無かったのですが、結構簡単に実装することが出来ました。 CreteJS そもそもCreateJSとは、HTMLの要素であるCanvas要素の描画をFlashの様に操作出来るライブラリで、実際に自分もFlashを利用することもあったことから、比較的とっつきやすい内容でした。 また、実際には Canvasへの描画を制御する「EaselJS」 アニメーションの動きを制御する「TweenJS」 外部ファイルの読み込みを制御する「PreloadJS」 今回利用していなかったのでご紹介は省かせて頂きますが音声データを制御する「SoundJS」 の4つをパッケージ化したものが「CreateJS」となります。 そのため、一部の機能だけ必要という事であれば、バラバラに利用することも可能です。 Canvasを用意 »

WordPressのテーマにattachment.phpを追加して、添付ファイルページを失くしてみた

自分ではなく第三者にWordPressを使って貰う場合に、メディアを追加した時に添付ファイルのページが出来てしまうことが煩わしく思っていました。 自分が更新するのであれば、リンクを切ってしまうか、ファイルへのリンクを貼っておけば良いのですが、第三者が更新を行う場合は確実に防げるかと言われると言い切れない所があります。 そこで、添付ファイルのページにアクセスしてしまっても、ファイルを表示してしまえば良いのだ、と思い立ってテーマファイルを調べてみました。 添付ファイルのページについて そもそも添付ファイルのページはテーマファイルのどのファイルが優先されるのか、というところから。 優先順位は下記のとおりとなります。 MIMEタイプ.php MIMEサブタイプ.php MIMEタイプ_MIMEサブタイプ.php attachment.php single.php index. »

「Raphaël」を使ってSVGによる図を描いてみた

やけに解像度の高いRetinaディスプレイが登場したり、手持ちのタブレット端末が流行ったりと、固定の画像で対応するには大変になってきそうな気がしたので、SVG等のベクタ画像をサイトに表示させる必要性があるのではないかと感じています。 そこで、実験的にJavaScriptを利用してベクタ画像を描画するRaphaëlを使って自サイトに線を引いてみました。 その他、矩形や円を描画したり、色を塗ったり出来るみたいなので、その辺りも含めて残しておきます。 Raphaëlを使う準備 .entry-content svg{border:1px solid #999;} 何だか最近フレームワークばかり触っていたので、色々読み込まないと行けないかと思ってましたが、ファイルは一つだけ。 また、描画するDOMを用意しておきます。 <div id="canvas" »

Macで特定日時以降に編集したファイルを抽出してみた

「数あるファイルの中から触ったファイルだけを抽出してコピーする」という事をWindowsではFire File Copyを使って実現していたのですが、Macに移ってから出来なくなっていました。 ファイルの更新日時からフィルタリングが出来れば良いので、そういったことが出来そうなアプリを探してみたのですがイマイチピンと来るものもなく、どうしようかと悩んでいる時にこの記事を見て、Mac用に変換して使えるのではないかと思ったので試行錯誤してみました。 とりあえずコピペ まずそのまま使えるとベターなのでコピペしてみたのですが、「Mac OS Xに入っているcpは、-parentsとか-tオプション等が無かったりするようなので、GNU系の話ということで適当に」と書いてある通り動きませんでした。 結構重要な-parentsが動作しないままでは難しそうなのでちょっと工夫してみます。 「古い」データを削除してみる ということで、「一旦全てコピー」→「指定日時より古いファイルを削除」という流れに変えてみました。 #!/bin/bash »

Pleskが入ってるサーバのPHPのバージョンがアップできなかった→できた

とあるPleskが入っているサーバがまだPHPのバージョンが5.1.xだったのですが、諸事情で5.2以上したかったのでバージョンアップしようかと思ったところ、エラーが発生してしまったのでちょっと調べてみました。 ちなみにOSはCentOS5でした。 エラー内容について とりあえず、何もせずにremiレポジトリからyum updateをしようとしてみると、下記のようなエラーが発生しました。 yum --enablerepo=remi update php (…省略…) Error: Missing Dependency: any-php-sqlite2 is needed by package »

Backbone.jsのpjaxを試してみた

なんだか名前を良く聞くような気がするBackbone.jsを一度触ってみたかったので、Twitterの仕様が変わってタイムラインが取得できなくなった自サイトに組み込んでみました。 中でもpjaxが出来るとかなんとか聞いたので、その辺りを中心に試しています。むしろそれ以外は別にBackbone.jsじゃなくても良いくらいの状態なので、少しずつ試していこうかと思います。 Backbone.jsを使う準備 Backbone.jsは単体で動くわけではないみたいなので、下記ライブラリを用意しました。 Backbone.js Underscore.js jQuery jQueryの代わりにZepto.jsでも良いのですが、IE非対応みたいなので、一応jQueryにしました。 Backbone.RouterとBackbone.history Backbone. »