入れ替えても読めちゃうツール

土曜日, 09. 5 月 2009 von hiroki_daichi

どうも、おひさしぶりです。ひろきのだいちです。

本日こんな記事を見つけて興奮したので、

http://www.asks.jp/users/hiro/59059.html

つい、やっちゃいました。

どうやら、人間は

390 名前：なまえをいれてください[sage] 投稿日：2009/05/08(金) 00:37:47 ID:Oqxr6eLt
こんちには みさなん おんげき ですか？　わしたは げんき です。
この ぶんょしう は いりぎす の ケブンッリジ だがいく の けゅきんう の けっか
にんんげは たごんを にしんき する ときに その さしいょ と さいご の もさじえ あいてっれば
じばんゅん は めくちちゃゃ でも ちんゃと よめる という けゅきんう に もづいとて
わざと もじの じんばゅん を いかれえて あまりす。
どでうす？　ちんゃと よゃちめう でしょ？

としても読めてしまうみたいなので、ツールというかプログラムにしました。

半角スペース区切りで、ひらがなを入力してください。
適当なので、\sのブラウザごとの違いは吸収してません。
あと、。や？なども一緒くたにシャッフルします。

PLAIN TEXT
JAVASCRIPT:
  1. var ShuffledText = Class.create({
  2.     initialize:function(option){
  3.         this.element = $(option.element);
  4.         this.trigger = option.trigger;
  5.         this.target  = $(option.target);
  6.        
  7.         this.element.observe(this.trigger,this.action.bind(this));
  8.     },
  9.     action : function(){
  10.         this.target.value=$A(this.target.value.split(/\s/)).map(function(elem){
  11.             var array = elem.split('');
  12.             var first = array.shift();
  13.             var last  = array.pop();
  14.             return [first,
  15.                 array.sortBy(Math.random),last].flatten().join('')
  16.         }).join(' ');
  17.     }
  18. });

いそいで書いたので、そんなにきれいじゃないんですが
ぜひ遊んでみてください。

追記：
ぐは、なんかもうやられてる
http://blog.livedoor.jp/dankogai/archives/51210157.html

Webは進化し続ける。

水曜日, 15. 4 月 2009 von hiroki_daichi

yabooo
どうも、ひろきのだいちです。こんにちは。
先月の3/29日にやってきましたよ、「Web2.0中の人ナイト」。
そうそうたる企業の数々が出演しました。
「yahoo!」「mixi」「GREE」「livedoor」「楽天」「クックパッド」「@nifty」。

こんな面子ほかでは見られません。
しかも満員御礼。当日券まで完売の大盛況でした。みなさま本当にありがとうございました。
dsc_0422_s
場所は、@niftyの運営するお台場のライブハウス、「東京カルチャーカルチャー」。

次代を作り上げるには、フツウの場所でフツウに勉強会している場合じゃないんです。

今回出演していただいた２０代のエンジニアは、
例外なくみんな目が悪い。
しかし、平均視力0.1の彼らが見据える先にこそ、
ネットはどこまでも広がっている。

平均視力は0.1、WEBエンジニアが見据える世界！「Web2.0 中の人ナイト」ライブレポート(2009.3.29開催)

平均視力よりももっと見てほしいことがある。
それは出演者の平均年齢だ。

出演者はほとんど80's。入社１～２年目のフツウの業界では「右も左もわからないペーペー」と呼ばれている若さだ。彼らみながサービスの第一線で活躍し、うん千万人の日々を支え、そして生活を豊かにし続けている。そう、「WWW」よりも若く、そして学生時代をケータイとともにすごした彼らの見ている地平は、Web2.0といった既存の枠組みを軽くとびこえる。

「webって常に進化して行くものだと思うんです。
だから、個人的には『2.0』も『3.0』も無くて、
webの進化によってみんなの生活が豊かになって行くこと。
これが大事なことなんだと思います」

そしてWebは進化し続ける。

それは、彼らが進化することをやめないからだ。

その他の感想はこちらから

[イベント]そろそろWebを再起動しよう

日曜日, 22. 3 月 2009 von hiroki_daichi

どうも、日本野望の会事務局長のひろきのだいちです。おひさしぶりです。

ひさびさの野望の会イベントです。

WWWが生まれて20年ちかくたちますが、このずっと起動しっぱなしだったWebというものを今一度、若い目線で見直してみようという一大イベントを開催します。オレンジや青の大手SNSをはじめ、誰もが知ってる大手ポータルサイトの歴歴の若手たちが一同に終結し、Webの今後を語り合います。そんなイベントを開催するにふさわしい場所が、コミュニティサイトの最長老niftyのお膝元である「Tokyo Culture Culture」というイベントホール。題して「Web2.0中の人ナイト」。

日時は3/29(日)

nakanohitonight_02

この浮ついた感もあるチープな名前と適度なサブカル臭が、日本野望の会の真骨頂なのですが、なかなかどうして今回はそうそうたる面々からのWeb業界の事情やライフスタイルなどがかんがみえます。

Web2.0とはなんだったのか。

Webの中、どうなってんの？

そろそろ再考してみてもいい時期かもしれません。

http://tcc.nifty.com/cs/catalog/tcc_schedule/catalog_090225201886_1.htm

チケットはe+から購入または当日券もございますyo

チケット残件わずか！となってしまいました。当日券は期待しないでe+からお買い求めください。

では！

書評：JavaScript Good Parts

月曜日, 22. 12 月 2008 von hiroki_daichi

どうもひろきのだいちです。
水野さん。ありがとう。こんないい本を訳してくれて。そしてくれて。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

この本はJavaScriptの世界を一段押し上げるためのものです。きっとJＧPとか略されたり、蝶本といわれたりとしてこれからJavaScriptの世界でスタンダードとなる概念を構築するための本になるんだろうなと。その意味では仕事でJavaScriptを読む人間に必携の本となるだろうし、この本を「読む」だけではなくて「理解」することが必須となる本となるだろう。

しかし、これはPerlの世界で言うところ「Perl Best Practices」的な書籍ではないということも理解してほしい。

というのもまだ、JavaScriptの世界はPerlほど成熟していないからだ。

この本は「use strict」「use warnings」のための諸概念を切り出すという段階を担っているものであり、
JSLintはその外部実装といったほうがいいのだろうか。

これが荒唐無稽な著者の挑戦でないことは彼がすでに「JSONの規格化」に成功していることからも伺える。

次の段階を考えてみよう。
良いものと悪いものの線引きはできた。

ではその次は悪いものの使いどころと悪い性質の避け方だ。
Perlには「no strict」「no warnings」が用意されていて、悪い面をライブラリユーザに見せずに清潔なプログラミングを可能にしている。

newの使いどころ

newの何がわるいの？

PLAIN TEXT
JAVASCRIPT:
  1. function hoge(){
  2.     this.fuga = "x";
  3. }
  4. new hoge(); //{fuga:"x"}

newはjavascriptのクラスシステムの根幹を担うところであり、使わないという選択肢はなかなか難しい。
すべての機能をmethod chainの中に隠蔽してしまうという方法論もあるにはあるが、DOMありきのプログラミングモデルならまだしも、それ以上のものを考える場合には必要最低限の機能である。

なにが悪いのかといえば次のようなケースである。

PLAIN TEXT
JAVASCRIPT:
  1. function hoge(){
  2.     this.fuga = "x";
  3. }
  4. hoge(); // undefined, window.fuga="x"

hogeはコンストラクタなのに、new演算子を伴わないで呼び出された場合にfunctionにbindされているthisかあるいはトップレベルオブジェクトに対して汚染をしてしまうケースがある。

これは確かに致命的だ。

ひとつはコーディングルールの中にClass名をHogeのように先頭をcapitalizeするという方法論だ。
もうひとつはコンストラクタ中でチェックルーチンを入れるという方法論。

PLAIN TEXT
JAVASCRIPT:
  1. function Hoge(){
  2.     if(this===self)throw('Error');
  3.     this.fuga = "x";
  4. }
  5. Hoge(); // error :Error

あるいは、

PLAIN TEXT
JAVASCRIPT:
  1. function Hoge(){
  2.         if(this.constructor!==Hoge)throw('Error');
  3.     this.fuga = "x";
  4. }
  5. var x ={};Hoge.apply(x);

こういった機能の柔軟性を封じるやり方もできる。

本書に出てくるnewをFunctionオブジェクトのmethodとして実装するやり方もエレガントだけど、
もうすでにnewがあるんだからライブラリ作成者なりが注意しておくか、レビューをしっかりすれば問題ナッシングだと思う。

withの使いどころ

JavaScriptからは関数のスコープで定義されるActivation Objectに直接アクセスすることができない。
これはここらへんを読んでもらうとして。

たとえば、Globalオブジェクトをできる限り汚染しないようにして、ネームスペース的機能を提供しようとした場合に

PLAIN TEXT
JAVASCRIPT:
  1. window['core'] = {};
  2. (function(){with(this){
  3.     this.fuga = 'text';
  4. }}).apply(window['core']);
  5.  
  6. (function(){with(this){
  7.     print(fuga);
  8. }}).apply(window['core']);

これは適切なnamespace機能さえjavascriptに用意されていれば済む話だが、withが強力な機能を提供する場面でのひとつだ。

eval/new Functionの使いどころ

evalはあらゆる言語で悪者だ。
パフォーマンスを下げてしまうし危険を伴うと紹介されることがおおい。
これに関しておおむね同意した上でもなお、evalを利用することが適切な場面が存在する。

これは皮肉なことにむしろパフォーマンスの分野で。

Webクライアントの技術において、パフォーマンスとはユーザエクスペリエンスのために存在する。つまりユーザがある動作（クリックなど）を行ってから何らかのアクションが発生するまでの時間を最適化したいというニーズが最も多い。

なので、

PLAIN TEXT
JAVASCRIPT:
  1. element.onclick = function(){
  2. 　　for(var i=0,length=BIG_ARRAY.length;i<length;i++){
  3. 　　　//複雑な条件や分岐により重くなる処理
  4. 　　}
  5. }

のようなプログラムがあったときに

PLAIN TEXT
JAVASCRIPT:
  1. dom.ready(function(){
  2.     try{
  3.         window.onclick = new Function([
  4.             '複雑な条件、分岐処理で確定しているものを取り除いたtext'
  5.         ].join(''))
  6.     }catch(e){}
  7. });

のようにしておくことで、DOM構築完了後からimageロードまでの比較的余裕のある時間でスマートな関数を構築しておくことができる。

こういったテクニックは邪道ではあるが、effects.jsなどでも用いられている高速化テクニックの１つであって、JavaScriptというインタラクションのために用いられる言語では重要な要素になりうる。

あくまでもミッションクリティカルな場所でのみ使われるべきではあるが、Templateエンジンなどを実装するためにはevalという邪悪な手段が最適最良のスマートな方法になる。

function文とfunction式

function文とfunction式の違いは、Activationオブジェクトの生成タイミングを理解しておけば間違えることは少ないだろうが、解釈の違いにより問題が起こることは確かにある。

PLAIN TEXT
JAVASCRIPT:
  1. //function 文
  2. function hoge(){
  3.     [sample code];
  4. }
  5. //function 式
  6. var hoge = function(){
  7.     [sample code]
  8. }

これらは同値であると説明される場合が多いが以下のようなケースで違いが発生する。

PLAIN TEXT
JAVASCRIPT:
  1. (function(){
  2.     var x = 0;
  3.     console.log(hoge);// function hoge(){}
  4.     function hoge(){}
  5. })();
  6.  
  7. (function(){
  8.     var x = 0;
  9.     console.log(hoge);//undefined
  10.     var hoge=function(){}
  11. })();

function文は自動的にスコープの先頭に移動して解釈されるが、function式は解釈されない。

これ自体は小さな問題に見えるが、さらにif文内でのfunction文の巻き取りはjsの実装によって異なりポータビリティを損なうというのが本書の指摘するところだ。

たしかにこれらはポータビリティや保守性を下げる場合がおおい。
しかし、function文がデバッグ性にプラスの要素を与える場合が実はある。

PLAIN TEXT
JAVASCRIPT:
  1. Handler = {
  2.     func : (function(){
  3.         function xxx(){}
  4.         return xxx;
  5.     })()
  6. }
  7. console.log(Handler.func);　// xxx
  8.  
  9. Handler = {
  10.     func : (function(){
  11.         var xxx = function(){}
  12.         return xxx;
  13.     })()
  14. }
  15. console.log(Handler.func);　// function

function文によって作られた関数は処理系内部において"公式な名前"を得ることができる。
公式な名前がある関数は、それが他の関数ではなくて自分自身であることを証明することができる。

この仕様を正式なものとしてなにかプログラムを書くことを推奨はしないが、
この要素が煩雑なプログラムの中で問題箇所を適切に見つけることのできる一因になることがあるということは覚えておいて損はないだろう。

functionは式であれ、文であれこの"公式な名前"をつけられるという性質を知っていると
プロファイル等で

PLAIN TEXT
JAVASCRIPT:
  1. $('test').observe('click',function (){
  2.     // 公式な名前の無い関数
  3. });
  4.  
  5. $('test').observe('click',function _anon(){
  6.     // 公式な名前のある関数
  7. });

複数の無名関数の中から、問題の箇所をわずかな変更ですぐに知ることができるかもしれない。
これらはfunction文ではなく、function式であるのでスコープのオブジェクトを汚染することはない。

PLAIN TEXT
JAVASCRIPT:
  1. $('button').observe('click',function _anon2(){
  2.     $w('first last').each(function _anon(e){
  3.         //
  4.     });
  5.     console.log(_anon); //is not defined
  6. });
  7. console.log(_anon2); //is not defined

公式に運用するscript中では無用なものではあるかもしれないが、こういった性質によって見えてくる世界もある。

そんなわけでまとめ

・JavaScript Good Partsは仕事でJavaScriptを書くすべてのエンジニアが必読の書である。
・読んだ後、汚いもの/悪いものがどのように使われるべきか考えてみよう
・きれいな世界と汚い世界を分けることでJavaScriptはもっと輝きを増す。

【告知】日本野望の会 忘年会 2008

月曜日, 08. 12 月 2008 von pinkmac

名称未設定-1.jpg

2008年の野望会は新年会にはじまり、忘年会に終わる…
野望会おなじみの居酒屋ライトニングトーク、全員自己紹介、
今回もやります。奮ってご参加ください。

実施要綱

  • 日時　2008/12/20（土）18:00～20:00
  • 場所　渋谷　素材屋 宮益坂店　http://r.gnavi.co.jp/g084612/
  • 会費　4,500円
  • 定員　20名

LTについて

  • 制限時間　1人5分
  • テーマ　　2008年わたしの野望（技術ねたでもそうでなくても）
  • LT登壇希望の方はコメント欄にその旨ご記入ください。
  • PCは主催側でも用意します。

参加表明はこちらからお願いします。
http://atnd.org/events/218

SBM研究会発表資料を公開します

土曜日, 06. 12 月 2008 von hiroki_daichi

普通のやつらのメタを行け

パワポです。すこし長いので、はしょりながらやります。

普通に前半のほとんどはフロントエンドの技術を理解している人なら当たり前すぎる内容ですが、
研究会が比較的バックエンドよりなので、こういう話もやってもいいかなと。

あ、

野望イベント近日公開です。

興味のある方はぜひこちらのブログをチェックしてください。

普通のヤツらのメタを行け
View SlideShare presentation or Upload your own.

slideshare --

Safari/Webkitのおせっかいキャッシュとその対策。

土曜日, 29. 11 月 2008 von hiroki_daichi

どうもひろきのだいちです。

最近のモダンなブラウザには、Backfowardキャッシュと呼ばれるブラウザの戻るボタンを押した際に利用されるキャッシュ機構が用意されています。この機構は普段ウェブブラウジングを行う際には間違った操作からの復帰が早く非常に重宝するのですが、一部のWebアプリケーション設計の際にはこの仕組みが厄介に働くことがあります。

(続きを読む...)

新はてぶにフィッシング詐欺の危険性あり！

火曜日, 25. 11 月 2008 von hiroki_daichi

どうも、ひろきのだいちです。
ソーシャルブックマーク研究会で講演をいたしますので、
ぜひいらしてください。

この記事の内容ははてなおよびJPCERT/CCに連絡いたします。
今しばらくお待ちください。

こういった危険性などについても
12/6　の講演で詳細を発表いたしますのでぜひおたのしみに。

YAMLってたべれるの？

木曜日, 13. 11 月 2008 von pinkmac

おひさしぶりです。へたれのこみや(pinkmac)です。
YAMLとは何かを今更知ったので、覚え書きしておきます。
折角なので他のデータ形式もいっしょに見直してみることにしました。

サンプルデータ on XML

PLAIN TEXT
XML:
  1. <zgundam>
  2.     <organization name="エゥーゴ">
  3.         <person>
  4.             <name>カミーユ・ビダン</name>
  5.             <ms>Zガンダム</ms>
  6.         </person>
  7.         <person>
  8.             <name>クワトロ・バジーナ</name>
  9.             <ms>百式</ms>
  10.         </person>
  11.     </organization>
  12.     <organization name="ティターンズ">
  13.         <person>
  14.             <name>パプテマス・シロッコ</name>
  15.             <ms>ジ・Ｏ</ms>
  16.         </person>
  17.         <person>
  18.             <name>レコア・ロンド</name>
  19.             <ms>パラス・アテネ</ms>
  20.         </person>
  21.     </organization>
  22.     <organization name="アクシズ">
  23.         <person>
  24.             <name>ハマーン・カーン</name>
  25.             <ms>キュベレイ</ms>
  26.         </person>
  27.     </organization>
  28. </zgundam>

思いっきり偏ったサンプルで恐縮ですが、、
このデータ構造を、YAML、ついでにJSONで書いてみたいと思います。
(続きを読む...)

再入門JavaScript　-目次-

水曜日, 29. 10 月 2008 von hiroki_daichi

こんにちは、ひろきのだいちです。

JavaScriptの再発見からさらに２年がたち、モダンなWeb開発では欠かせない存在となったJavaScript。さまざまなライブラリが乱立し、言語としての基礎を得ないままでもある程度のアプリケーション開発ができるようになった現在。

再入門JavaScriptと題して、中上級者を目指すために入門書を超えてじっくりとJavaScriptを学びなおすことが重要だと考え、ここを中心にまとめていきたいと思います。

ここで掲載するトピックは本当の基礎の基礎は他の媒体にゆだねた上で、「仕事でつかえる」レベルのコードを記述するために重要で比較的高度なものを取り扱うつもりです。

また、ここでいう仕事で使えるとは"多人数で開発を進める"ことを前提とした開発環境を想定しており、他サイトのAPIの使い方やライブラリの使用方法といった枝葉のリファレンスではありません。

また、ここに書かれていることはたいてい僕のメモなので、責任はもちませんｗ

再入門JavaScript　-フロントエンドエンジニア資料集

再入門JavaScript　-JavaScriptでの中大規模開発

  • 再入門JavaScript　-　コード成長過程
  • 再入門JavaScript　-　MarkupエンジニアとScriptエンジニア、サーバサイドエンジニアとの協調
  • 再入門JavaScript　-　グレースフルデグラデーション
  • 再入門JavaScript　-　MVCモデル
  • 再入門JavaScript　-  クライアントサイドMVC
  • 再入門JavaScript　-  デザインパターン

再入門JavaScript -名前空間とスコープ

再入門JavaScript　-オブジェクト指向と関数オブジェクト

  • 再入門JavaScript　-　オブジェクトとプロトタイプチェーン
  • 再入門JavaScript　-　継承・ダックタイピング
  • 再入門JavaScript　-　引数アサーションと動的ヴァリデーション
  • 再入門JavaScript　-　動的バインディング
  • 再入門JavaScript　-　ビルドインオブジェクトのプロトタイプ拡張

再入門JavaScript　-DOM

  • 再入門JavaScript　-　イベントとバブリング
  • 再入門JavaScript　-　XHTML拡張
  • 再入門JavaScript　-　CSSの扱い

再入門JavaScript　-DOM上のDSL

  • 再入門JavaScript　- CSS Selector
  • 再入門JavaScript　- XPath
  • 再入門JavaScript　- E4X

再入門JavaScript　-テストとドキュメンテーション

  • 再入門JavaScript　-　UnitTest
  • 再入門JavaScript　-  Seleniumによる結合テスト
  • 再入門JavaScript　-  JsDocによるドキュメンテーション

再入門JavaScript　-パフォーマンス/高速化

  • 再入門JavaScript　-　プロファイリング
  • 再入門JavaScript　-　DOM描画フェーズ/タイマー
  • 再入門JavaScript　-　事前コンパイルを利用した高速化
  • 再入門JavaScript　-　VMレベルでの動作を意識する
  • 再入門JavaScript　-　メモリリークとガーベジコレクタ
  • 再入門JavaScript　-　defer属性/script後置とminifier
  • 再入門JavaScript　-　先読みと
  • 再入門JavaScript　-　Google Gears

再入門JavaScript　-通信

  • 再入門JavaScript　-　クロスドメイン制約
  • 再入門JavaScript　-　同一ドメイン通信
  • 再入門JavaScript　-　location.hashによるヒストリ管理
  • 再入門JavaScript　-　通信の効率化とサーバサイド連携
  • 再入門JavaScript　-　クロスドメイン通信方法と注意点
次ページへ »
 

WP-Design: Vlad -- Powered by WordPress -- XHTML 1.0