【Unity】手軽にHTTP通信する
Unityで手軽にHTTP通信するクラスを作りました。
Actionを使うので使用する側でSystemを読み込みます。
using System;
POSTではパラメータをDictionaryで渡すので下記も必要です。
using System.Collections.Generic;
静的サイトジェネレータ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のコメント欄が反映されない
こんな感じになってしまう。
DISQUSのshortnameを登録していなかったのが原因でした。ここから登録できます。
Disqus | Register site
登録したshortnameを、プロジェクト直下の_config.ymlに設定します。
# Disqus disqus_shortname: shortname
無事コメント欄が現れました。
プラグイン
ここでプラグインの一覧が見れます。
Plugins · hexojs/hexo Wiki · GitHub
導入したもの
FlashSoft/hexo-console-optimize · GitHub
HTML/CSS/JavaScriptをminifyして出力してくれます。
hexojs/hexo-generator-sitemap · GitHub
sitemapを生成してくれます。
jaredly/hexo-admin · GitHub
記事の投稿・編集ができる管理画面が使えるようになります。
左上のNew Postの挙動がおかしくて、_draftフォルダ内にタイトル名.mdは生成されるのだけど管理画面に反映されませんでした。
マークダウン編集していて、右のプレビューのスクロール位置が同期するのは地味に便利でした。右上の歯車アイコンからカテゴリなどの詳細設定ができます。
Github Pagesにデプロイしました。
http://setchi.github.io/
あとOGPの設定方法とか画像の投稿方法とか調べながら遊んでみます。
mixi Scrap Challenge 2014に参加した
11/16に行われたmixi主催のScrap Challenge 2014に参加してきました。
午前[セキュリティ概論]
午前中はWebセキュリティについて解説がありました。
過去にmixiが実際に受けた攻撃についての解説もあって、「やばい感」が伝わってきました。
特にCSRFの実証コードが公開されてしまった話はびびりました。当時脆弱性をどこに報告すればよいか分かりづらく、報告する前に公開されてしまったとのこと。
ちなみに、脆弱性報告先に迷ったらIPAも窓口になってくれるらしいです。覚えとこ。
脆弱性関連情報の届出：IPA 独立行政法人 情報処理推進機構
昼食
写真のデータが壊れてる。なぜ。
とにかくおいしかったです。ごちそうさまでした！
午後[競技開始]
問題に沿って、偽mixiサイトに攻撃してチームごとにポイントを競います。
普段からWebさわっているけど、ちょっとひねった問題とか規格を詳しく知らないと解けない問題もあって一筋縄ではいかず。2時間半があっという間に過ぎ去りました。
あと途中から、集中力を乱す妨害コンテンツが投入されました。組み合わせ爆発おねえさんの動画とか流れてた気がする。いろいろたのしかった！
結果
なんとか2位になりました！
上手く問題分担したりチームワーク良かったと思います。みんなありがとう！
感想
自分が攻撃側に回ってWebセキュリティを学べる凄いイベントだと思いました。
普段から趣味でWeb触ってたりしていても気づかなかった攻撃手法や、「こんな手が！！」と思う目から鱗的な手法も知れて、とても勉強になりました。今まで作ったWebアプリの脆弱性もチェックしておきたいと思います。
お世話になった方ありがとうございました！
ko-chaリニューアルしました。
手軽にコーディングチャットができるwebアプリ「ko-cha」をリニューアルしました。
前作は暇つぶしに数日で開発して色々と機能不足だったので、友達同士で使っている時に気になっていたところを今回のリニューアルで実装しました。
http://setchi.jp/ko-cha2/
主な変更点
複数タブに対応
前作はひとつのファイルしか共有できませんでした。タブ数の上限は特に設けてませんが、多すぎると重くなります。
全員がファイル共有できる
前作では最初に入場した2人のみエディタの編集権限が与えられました。今回のリニューアルで全員に専用のエディタが与えられ、それぞれ共有できるようになりました。
見てない部分が更新されると光って通知
自分が見ていないタブが更新されると、そのタブの色が変わって通知します。また、表示してないユーザーが内容を更新した場合、左上のアイコンが光って通知します。
レイアウトを変更できる
例：横分割のレイアウトから
アイコンをドラッグして、
ドロップ位置によってレイアウト変更します。
真ん中辺りでドロップすると一面表示もできます。
用途や画面に合わせて見やすいレイアウトで使ってください。
リアルタイム通信の部分は前作のものを引き継いで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で動くアスキーアートな動画プレーヤーを作った
ドラッグ&ドロップされた動画ファイルや、インカメラの映像をテキストアートで再生するwebアプリを作って遊んでました。
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/ 対応しているブラウザ少ないですがデスクトップ通知機能追加しました。
プログラミング言語の拡張子一覧
拡張子からプログラミング言語を判定する場面があったのでメモ。
表記ミスや漏れがあったら指摘していただけると幸いです。
| 言語 | 拡張子 |
|---|---|
| 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 |
厳密には「プログラミング言語」とは呼べないものも含まれてます。
MoziMovieアップデート
JavaScriptで文字列を圧縮する
jsで文字列を圧縮する方法を探していたらこんなページを見つけました。
javascript - でデータを圧縮/伸張する
これを使えば良いやと思っていたら、あるデータパターンで上手く復元できないことがありました。
とりあえず
JavaScript文字列(UTF-16)をUTF8化
↓
RawDeflate.deflate()
↓
base64エンコード
とすれば圧縮できて、逆をすれば復号ができるようなので難しいことは考えず確実に簡単に動くものを作りました。
高度なJavaScript技集にあるdeflate.js(圧縮用)とinflate.js(復号用)をHTML内で読み込んで下記のような関数を定義。
// 圧縮関数 (要deflate.js) function deflate(val) { val = encodeURIComponent(val); // UTF16 → UTF8 val = RawDeflate.deflate(val); // 圧縮 val = btoa(val); // base64エンコード return val; } // 復号関数 (要inflate.js) function inflate(val) { val = atob(val); // base64デコード val = RawDeflate.inflate(val); // 復号 val = decodeURIComponent(val); // UTF8 → UTF16 return val; }
サンプル
