【n Back Tracer】リリースしました。

Unity習作2本目のカジュアルゲームをリリースしました。

次々と現れるパターンを記憶しながら、N個前のパターンを素早くなぞる脳トレゲームです。難しい選択肢を選ぶほど高得点を狙えます。

n Back Tracer - Google Play の Android アプリ
f:id:setchi_q:20150214171501p:plain

コードはGitHubに公開しています。

setchi/n_back_tracer · GitHub

【Kagaribi】リリースしました

Unity習作のカジュアルゲームをリリースしました。
火の玉を操作して白い枠をできるだけ多くくぐっていくシンプルなゲームです。
真ん中を通るのが高得点のコツです。

Kagaribi - Google Play の Android アプリ
f:id:setchi_q:20150208123110p:plain

コードはGitHubに公開しています。

setchi/kagaribi · GitHub

静的サイトジェネレータHEXOを試したメモ

http://hexo.io/
ブログといえば動的生成が当たり前だと思ってたんですが、静的ファイルに生成してデプロイする手法もあるらしいです。

静的サイトジェネレータにも色々あるんですが、普段良く使っているNode.js上で動くものにします。その中でGitHubスター数が一番多い(2014/11/27現在)、
hexojs/hexo · GitHub
を選びました。

インストールからデプロイまで、この記事が参考になりました。

個人的にハマった点

faviconの設定方法が分からん

テーマフォルダの中で設定できました。
僕はLightというテーマにしたので、

themes/light/source/

favicon.pngを置いて
テーマフォルダ内の_config.ymlに設定することで反映されました。

favicon: /favicon.png

DISQUSのコメント欄が反映されない

こんな感じになってしまう。
f:id:setchi_q:20141127105851p:plain
DISQUSのshortnameを登録していなかったのが原因でした。ここから登録できます。
Disqus | Register site

登録したshortnameを、プロジェクト直下の_config.ymlに設定します。

# Disqus
disqus_shortname: shortname

無事コメント欄が現れました。
f:id:setchi_q:20141127110538p:plain

プラグイン

ここでプラグインの一覧が見れます。
Plugins · hexojs/hexo Wiki · GitHub

導入したもの

FlashSoft/hexo-console-optimize · GitHub

HTML/CSS/JavaScriptをminifyして出力してくれます。

hexojs/hexo-generator-sitemap · GitHub

sitemapを生成してくれます。

jaredly/hexo-admin · GitHub

記事の投稿・編集ができる管理画面が使えるようになります。
f:id:setchi_q:20141127113447p:plain

左上のNew Postの挙動がおかしくて、_draftフォルダ内にタイトル名.mdは生成されるのだけど管理画面に反映されませんでした。

マークダウン編集していて、右のプレビューのスクロール位置が同期するのは地味に便利でした。右上の歯車アイコンからカテゴリなどの詳細設定ができます。
f:id:setchi_q:20141127113655p:plain


Github Pagesにデプロイしました。
http://setchi.github.io/
あとOGPの設定方法とか画像の投稿方法とか調べながら遊んでみます。

mixi Scrap Challenge 2014に参加した

11/16に行われたmixi主催のScrap Challenge 2014に参加してきました。

午前[セキュリティ概論]

午前中はWebセキュリティについて解説がありました。

過去にmixiが実際に受けた攻撃についての解説もあって、「やばい感」が伝わってきました。

特にCSRFの実証コードが公開されてしまった話はびびりました。当時脆弱性をどこに報告すればよいか分かりづらく、報告する前に公開されてしまったとのこと。

ちなみに、脆弱性報告先に迷ったらIPAも窓口になってくれるらしいです。覚えとこ。
脆弱性関連情報の届出:IPA 独立行政法人 情報処理推進機構

昼食

f:id:setchi_q:20141123202219j:plain
f:id:setchi_q:20141123200100j:plain
写真のデータが壊れてる。なぜ。
とにかくおいしかったです。ごちそうさまでした!

午後[競技開始]

問題に沿って、偽mixiサイトに攻撃してチームごとにポイントを競います。

普段からWebさわっているけど、ちょっとひねった問題とか規格を詳しく知らないと解けない問題もあって一筋縄ではいかず。2時間半があっという間に過ぎ去りました。

あと途中から、集中力を乱す妨害コンテンツが投入されました。組み合わせ爆発おねえさんの動画とか流れてた気がする。いろいろたのしかった!

結果

なんとか2位になりました!
上手く問題分担したりチームワーク良かったと思います。みんなありがとう!

感想

自分が攻撃側に回ってWebセキュリティを学べる凄いイベントだと思いました。

普段から趣味でWeb触ってたりしていても気づかなかった攻撃手法や、「こんな手が!!」と思う目から鱗的な手法も知れて、とても勉強になりました。今まで作ったWebアプリの脆弱性もチェックしておきたいと思います。

お世話になった方ありがとうございました!

f:id:setchi_q:20141123204027j:plain

ko-chaリニューアルしました。

手軽にコーディングチャットができるwebアプリ「ko-cha」をリニューアルしました。
前作は暇つぶしに数日で開発して色々と機能不足だったので、友達同士で使っている時に気になっていたところを今回のリニューアルで実装しました。
http://setchi.jp/ko-cha2/

主な変更点

複数タブに対応

前作はひとつのファイルしか共有できませんでした。タブ数の上限は特に設けてませんが、多すぎると重くなります。

全員がファイル共有できる

前作では最初に入場した2人のみエディタの編集権限が与えられました。今回のリニューアルで全員に専用のエディタが与えられ、それぞれ共有できるようになりました。

見てない部分が更新されると光って通知

自分が見ていないタブが更新されると、そのタブの色が変わって通知します。また、表示してないユーザーが内容を更新した場合、左上のアイコンが光って通知します。

レイアウトを変更できる

例:横分割のレイアウトからf:id:setchi_q:20140726231852p:plain
アイコンをドラッグして、f:id:setchi_q:20140726231859p:plain
ドロップ位置によってレイアウト変更します。
f:id:setchi_q:20140726231856p:plain
真ん中辺りでドロップすると一面表示もできます。f:id:setchi_q:20140726234315j:plain

用途や画面に合わせて見やすいレイアウトで使ってください。


リアルタイム通信の部分は前作のものを引き継いでPHPでlong-pollingしてるので、若干タイムラグがあります。ここはnode.jsでSocket.IOとか使いたいですが、今のレンタルサーバー対応してないのでサーバー変えたいなあ…。
主に学校の人とプログラム教え合う用途でローカルに使ってますが、機会があったら活用してやってください(*_*)
http://setchi.jp/ko-cha2/

【FileAPI, readAsText】JavaScriptで文字コードを判別して文字化けを倒す

HTML5で追加されたFileAPIで、ローカルファイルをJavaScriptで扱えるようになりました。ファイルの中身をテキストと見なして読み込むreadAsTextメソッドでは、第二引数で文字コードを指定できますが、そもそも文字コードが分からなかったり自動判別したいときの対処法です。

結論としては、readAsArrayBufferでバイナリのまま読み込んでライブラリにデコードしてもらいます。

今回 encoding.js を使いました。
数値配列をもとに、文字コードの判別や変換をしてくれるマッチョなライブラリです。

var file = // 文字コードの分からないテキストファイル

var reader = new FileReader();
reader.onload = function (e) {
    // 8ビット符号なし整数値配列と見なす
    var array = new Uint8Array(e.target.result);

    // 文字コードを取得
    switch (Encoding.detect(array)) {
    case 'UTF16':
        // 16ビット符号なし整数値配列と見なす
        array = new Uint16Array(e.target.result);
        break;
    case 'UTF32':
        // 32ビット符号なし整数値配列と見なす
        array = new Uint32Array(e.target.result);
        break;
    }

    // Unicodeの数値配列に変換
    var unicodeArray = Encoding.convert(array, 'UNICODE');
    // Unicodeの数値配列を文字列に変換
    var text = Encoding.codeToString(unicodeArray);

    console.log(text); // 結果
}
reader.readAsArrayBuffer(file);


コーディングチャットができるwebアプリ「ko-cha」で、ドラッグ&ドロップされたファイルを文字化けせずに読み込めるようになりました。
http://setchi.jp/ko-cha2/

HTML5で動くアスキーアートな動画プレーヤーを作った

http://setchi.jp/moziplayer/

ドラッグ&ドロップされた動画ファイルや、インカメラの映像をテキストアートで再生するwebアプリを作って遊んでました。

f:id:setchi_q:20140722015954p:plain
f:id:setchi_q:20140722020036p:plain

UIとか色々手抜きですが一応動きます。一番右のつまみで解像度を調節できます。
Chrome/Firefoxで動作確認済み
http://setchi.jp/moziplayer/

【JavaScript】他の画面を見ていることを検知する

チャットアプリで、ユーザーが他の画面を見ている(と思われる)ときにチャットが来た場合に通知をしたかった時のメモです。

それらしい資料が見当たらなかったので、ページが描画されていないときのrequestAnimationFrameとsetTimeoutの挙動の違いを利用して強引にやってます。

function executeIfNotViewing(callback) {
    var rendered= false;
    requestAnimationFrame(function () {
        rendered = true;
    });
    setTimeout(function () {
        if (!rendered) callback();
    }, 1000);
}

executeIfNotViewing(function () {
    alert('他の画面見てたでしょ');
});


ということで、
Ko-cha | http://setchi.jp/ko-cha/ 対応しているブラウザ少ないですがデスクトップ通知機能追加しました。
f:id:setchi_q:20140707232351p:plain

プログラミング言語の拡張子一覧

拡張子からプログラミング言語を判定する場面があったのでメモ。
表記ミスや漏れがあったら指摘していただけると幸いです。

言語 拡張子
ABAP .abp
ActionScript .as
C .c
C++ .cpp
COBOL .cobol
CoffeeScript .coffee
C# .cs
CSS .css
Clojure .clj
D .d
Dart .dart
Erlang .erl
Forth .forth
Go .go
Groovy .groovy
Haskell .hs
Haskell .lhs
Haxe .hx
HTML .html
HTML .htm
XHTML .xhtml
Java .java
JavaScript .js
jsx .jsx
Lisp .lisp
LSL .lsl
Lua .lua
MATLAB .mat
SQL .sql
Objective-C .m
OCaml .ml
Pascal .pas
Perl .pl
PHP .php
Prolog .pro
Prolog .swi
Python .py
R .r
Ruby .rb
Rust .rs
Scala .scala
Scheme .scm
ShellScript .sh
TypeScript .ts
VBScript .vbs
Verilog .v
assembly_x86 .asm
XML .xml
XQuery .xquery

厳密には「プログラミング言語」とは呼べないものも含まれてます。