IE11 の HTML5 ドラッグ&ドロップでハマった件

最近じゃウェブアプリでファイルアップロード機能なぞを実装する時は「それドラッグ&ドロップで」と当たり前のように言われてしまう訳ですが、みなさま如何お過ごしでしょうか。「連休なにそれ美味しいの?」とイタイケな Mariyudu@今日も元気でお仕事ヒャッハーです。

いやね、さっきまでその件でハマッてたんですわ。HTML5 ドラッグ&ドロップは別に初めて書く処理じゃないんだけど、IE (Win7 + IE11)だけでうまく行かないのですな。

こんな感じで画像ファイルをドロップゾーンにドラッグ&ドロップしてみると↓

無慈悲にブラウザが画像をオープンしちゃうという↓

で、コードを少しずつ削りながらネットで流通してるちゃんと動くD&Dのサンプルコードに近づけていく形で切り分けしていったら、ドロップゾーンの div のスタイルが原因でした。IE だとブロック要素にちゃんと

width: 100%; /* デフォでもいちおう指定 */

みたいに width 属性値を明示してやらないと、こんな症状が出るみたいです。あぁ、サクッと終わらして三国志のムック本読もうと思ってたのにぃ…

「タスクリストをガントチャートに一発変換！」な Quick Gantt、作りました

雪、凄いっすねー。ども、Mariyudu＠野良プログラマです。確定申告未だやってません。全部雪のせいです。

零細フリーランスなどやっておると、複数取引先の掛け持ち状態ってのがフツーにある訳でして、例えばA社作業を月〜水曜日に、B社作業は木〜金にアサイン、みたいな感じで振り分けてたりします。そんな状況下だと、見積依頼が来たときに案件工数をスケジュールに落とすのが結構めんどいのですな。期間中に連休等を挟んでいると尚更です。ちょっとした日数計算処理をすりゃいいだけなので、スプレッドシートとかで自分用のスクリプトでも作ろうか… でも面倒くさい… と長らくウダウダしてたのですが、jQuery.Gantt という JavaScript 製のガントチャート作図ライブラリがカッコイイのに感動したので、これをモチベーションにひとつウェブサービスとして作ってみました。題して Quick Gantt です。

使い方はカンタン。まず、Excel みたいなグリッドにタスク名と所要日数を書き入れて(↓)、

作業開始日と、作業する曜日とかも設定します(↓)

あとはタブ「線表」をクリックすると工程表のできあがり！

データ入力用のグリッドには PQ Grid を、タイトルのフォントは Google Fonts から Faster One を、ページのカラースキームは :iroiro に決めてもらいましたw ほか、Twitter Bootstrap や jQuery を始めとしたプロダクトや数多のコードスニペットのお世話になりっぱなしです。

ざっくりと作ったばかりなので細かいところはまだまだですが、願わくば誰かのお役に立ちつつ、フィードバックでも頂ければーと。

apns-php で APNS のフィードバックを受け取る

以前書いた「apns-php のログ出力をオフにする」の続編というか姉妹編というか。

iOS デバイスへのプッシュ通知サービスを構築していると、「削除(アンインストール)されちゃれったアプリへの通知ってどうなるの?」という問題に突き当たります。で、調べてみると「プッシュ通知先デバイスに当該アプリがインストールされていない状態の場合は、通信エラーが記録されてフィードバックサービスでエラー情報を取得可能となる」とのこと。じゃぁ、そのフィードバックってどうやったら取得できるのか、ですが、これは apns-php に同梱されている ApnsPHP_Feedback クラスを使うとチョー簡単。結構重宝する機能ですが、意外に日本語情報が出回ってないようなのでコードサンプルを。

使い方は至ってシンプル。こんな感じです。

$fb = new ApnsPHP_Feedback(
	ApnsPHP_Abstract::ENVIRONMENT_PRODUCTION,
	<証明書ファイルのパス>
);
$fb->setRootCertificationAuthority(<ルート証明書ファイルのパス>);
$fb->connect();
$results = $fb->receive();
forech ( $results as $result ) {
	// $result['deviceToken'] がエラーが発生したデバイストークンなので、
	// 必要に応じてこの端末についての処理(登録ユーザから抹消する等)を行う
}

うーむ、面倒くさい APNS とのやりとりをこんなにカンタンにしてくれる apns-php にもう一度大きな拍手を!!

TinyMCE エディタ上で画像をアップロードしながら貼り付けられる jbimages プラグインを使ってみた

HTML 等の知識が無くても Web ページ上でコンテンツを作成・編集できる、JavaScript 製の WysiWyg エディタって便利なものがあります。TinyMCE あたりがデファクトスタンダードかと思いますが、最近これを使って画像をサーバにアップロードしながら貼り付けたいっていう要望がありまして、「でも大変だよ、ぶつぶつ」等と二の足を踏んでいたら奨められたのがこれ、JustBoil.me TinyMCE Images Plugin、略して jbimages。

なんだか便利そうですが、どうも提供元サイトにライブデモの類が見当たらないのでちょこちょこっと試してみたです。こんな感じ↓

▼ツールバーの最後に画像アップロードボタンが追加されてます

▼ボタンをクリックするとアップロード用のモーダルダイアログが

▼ダイアログから画像をアップロードするだけで貼り付け完了

▼WysiWyg エディタなのでリサイズもらくらく

うむ。いー感じです。画像アップロードは HTML5 とかじゃなくて iframe でフォームを埋め込んで実現してるので、モダンブラウザじゃなくても広く使えそう。

セットアップ手順は提供元サイトにも明記されてますが、念の為邦訳を。

1. ここからダウンロード・解凍して出来た jbimages を、TinyMCE エディタのプラグイン格納場所( tinymce/js/tinymce/plugins/ あたりがデフォ)にコピー。
2. jbimages/config.php 中の画像格納場所を適宜、自分の環境に合わせて書き換える。尚、この格納場所は httpd が書き込みできるようにパーミッションの設定をお忘れなく。
3. Javascript コード中の TinyMCE 設定で jbimages プラグインを明記(これも提供元サイトにサンプルコード有)。

サーバ側のアップロード処理は、どうやら CodeIgniter アプリケーションとして実装されている模様。なので、カスタマイズもし易い…かもしれませんw

さて、これを当方のシステムに採用できるかというと、ウチのコは画像をサーバのローカルディスクに保存するだけという単純なものじゃないので、うーん、ちょっと、というか大量に手を入れることになりそうだなぁ…

DB 問い合わせ結果の配列を、主キーを配列子にしたものに組み替える for ぺちぱー

いや、ホントにもうタイトルのまんまですが。

$records = array_combine(
	array_map(function($record){
		return $record['id'];
	}, $records),
	$records
);

昔からのクセで foreach で回す関数とか書いてたけど、考えてみたら最近の PHP はクロージャ書けるのでワンライナーで出来るもんね。

apns-php のログ出力をオフにする

今年もまた、夏到来とともに修羅場カモーン！で「夏休み? なにそれおいしいの」とイタイケな Mariyudu@野良プログラマです。ご無沙汰してます。

時代の流れってやつですかね。ロートルな私にもスマホアプリ絡みの仕事がちらほら来るようになって、プッシュ通知なんてモノもすなる今日この頃です。PHPer なので apns-php を有難く使わせてもらってますが、開発から運用に切り替える際にログ出力をオフにするのってどーすんだろ? とちょっと調べたのでおすそ分けです。

ログ出力ってのは標準出力に親切に表示されるこんなやつ(↓)ですが、

Tue, 27 Aug 2013 12:17:27 +0900 ApnsPHP[7815]: INFO: Trying ssl://gateway.push.apple.com:2195...
Tue, 27 Aug 2013 12:17:27 +0900 ApnsPHP[7815]: INFO: Connected to ssl://gateway.push.apple.com:2195.

この処理は、ApnsPHP_Push の construct 時に基底クラス ApnsPHP_Abstract さんが、メンバ $_logger にインターフェース ApnsPHP_Log_Interface 実装クラスのオブジェクトであるロガーをセットして、事ある毎に実行している模様なので(長w)、早い話がこんな感じでロガーをカスタマイズすればいいんじゃないかと。

// 何もしない代替ロガークラス
class ApnsPHP_Log_Custom implements ApnsPHP_Log_Interface
{
	public function log($sMessage){}
}

$push = new ApnsPHP_Push(ApnsPHP_Abstract::ENVIRONMENT_PRODUCTION, MY_CERTIFICATION);
$push->setLogger(new ApnsPHP_Log_Custom); // 何もしないロガーに置き換え

まぁ apns-php はコンパクトなので、各自「コード嫁」で解決する問題ですが、駄記事もブログの賑わいということで。

メニューバーからサクッと Feedly 登録する Chrome 拡張「Add to Feedly」

巷を震撼させた Google Reader 終了まで10日となりましたが、Feedly 移行はお済みでしょうか。ギリギリにならないと何もしないギリギリス体質の筈なのに昨日引っ越しを済ませた自分を褒めたい＠野良プログラマ Mariyudu です。

という訳で Feedly、ぼちぼち使い方を覚え始めているところなんですが、デフォルトで用意されているミニツールバーでの Feedly 登録(↓)が個人的にはナンダカナーです。

ウェブページ右下に現れるアイコンをクリックしてメニューを開いて、＋ボタンをクリックして登録ページに移動、という流れですがちょっと手順が多いかなと。そもそも閲覧中のページに余計なものはあまり表示させたくないし。Pocket みたいにメニューバーからポチッと登録できないの? と探してたらイイのがありましたよ、奥さん。「Add to Feedly」という Chrome 拡張機能です。

こいつを Chrome にインスコしておけば、メニューバーのボタンクリックで Feedly 登録ページに移動してくれます(↓)。

Google Reader のブックマーク追加みたいに、その場でポップアップとかでカテゴリーに放り込めたらもっといいんですがね。バージョンアップで機能強化されることを祈りましょう。