JAMADAM.COM

いつでもMacOSとLinuxとWindowsを行き来できるように。

以前にこんなエントリ書いたり、こんなjQueryプラグイン作ったりしたけど、それってCSSだけでできるんじゃん！

http://www5e.biglobe.ne.jp/~access_r/hp/css/css_text_019.html

text-overflow
テキストがオーバーフロー（領域を超えてしまう事）する際にオーバーフローしたテキストを「...」で省略することが出来ます。

しかも属性名と値などのキーワードも思い描いたまんまじゃん。ただし、省略記号を有効にする指定はtext-overflow: ellipsis;だ。以前にもちゃんとググったつもりだったけど、英語の情報無視してたかなあ。

ただしFirefoxは未対応なので依然としてJavascriptでのハックは必要。また、text-overflowはIEのみの対応のようで、SafariやOperaはそれぞれの拡張属性を併記して対応できる。

a.width-limited {
    display:block;
    overflow: hidden;
    white-space:nowrap;
    -webkit-text-overflow: ellipsis; // Safari
    -o-text-overflow: ellipsis; // Opera
    text-overflow: ellipsis; // IE
}

• Google「ストリートビュー」で素早い移動が可能に
  めっちゃ便利。久々にストリートビュー使ってみたら、いつのまにユーザーの写真が掲載されてたのね。
• グーグル、「Google Chrome」のMacとLinux向け開発者プレビュー版をリリース
• 自分の考えたアイデアを内緒にしたがるひと
• ついに出た！最新Perlフレームワーク「Ark」徹底解剖
  未だにCatalystすら使ったことなくって、全部自前フレームワーク。そろそろ人の作ったソースを追ってみたい。これはうってつけ。
• 正規表現まとめサイト
  プログラミングとか資料作成とかデータ整理とかスケジューリングとかネットサーフィンとか、ありとあらゆる場面で正規表現なしには生きて行けない。Google検索も正規表現に対応してほしいくらいだ。でも、最近XMLを扱う機会が多いのでXPATHを覚えたい。XPATHが扱えるテキストエディタ探し中。
• 日本ファルコム「音楽フリー宣言」を発表
  そうなるんだ、これからは。「著作権」は消える。無形の何かに権利を主張できる時代はもう終わるんだ。レコードの時代は終わりライブの時代ふたたび。音楽家も作家も技術者も、継続的にライブな生産をして行くしか生き残る道はない。一旦世に出たらもう人類の共有財産。
• Googleが社内で使っていたWebサイト高速化ツールを一般公開

• 米Adobe、各種ブラウザでの表示を検証できるオンラインサービス
• iPhone OS 3.0からブラウザ上でGPS位置情報が取れるようになるとのことです
• この発想はなかったわ・・・企業サイトがYouTubeの映像だけで出来ている
• 砂原良徳、8年ぶりの新作となる映画サントラ詳細判明
• ヤフー、テキストから特徴的な表現を抽出する「キーフレーズ抽出Web API」を公開
• jQueryベースのグラフ作成ライブラリ「jqPlots」

AJAX満載のサイトでアンカーに紐づいたAJAXデータの取得先URLをどう管理するかという話。with jQuery1.3.2。

HTML

<a href="./path/to/parmalink.html">通常リンク</a>
<a href="./path/to/snippet.html" class="widget-opener">動的コンテンツ</a>

Javascript

$('a.widget-opener').live('click', function () {
    $.get($(this).attr('href'), function(html){
        //appendなりprependなり
    });
    
    return false;
});

上記の場合、javascriptオフの人が「動的コンテンツ」を叩くとHTMLスニペットやjsonテキストが画面いっぱいに広がるページに遷移してしまったりする。 また、検索クローラーはリンク先のページを収集してしまうかもしれない。

かといって、href="#"とでもして、すべてのアンカーにidをふって、script内でURLを関連づけていくのも煩雑だ。

HTML

<a id='id1' href="#" class="widget-opener">記事1</a>
<a id='id2' href="#" class="widget-opener">記事2</a>
<a id='id3' href="#" class="widget-opener">記事3</a>

Javascript

url.id1 = './path/to/snippet1.html';
url.id2 = './path/to/snippet2.html';
url.id3 = './path/to/snippet3.html';

そこで、アンカータグのonclickとjQueryの$.data()メソッドでAJAX URLをインラインで管理するようにしてみた。 $.data()はDOM要素に紐づいたデータを管理することが目的という、本件におあつらえ向きなメソッド。

HTML

<a href="#" class="widget-opener" onclick="$.data(this, 'ajaxURL', './ajax1.html')">記事1</a>
<a href="#" class="widget-opener" onclick="$.data(this, 'ajaxURL', './ajax3.html')">記事2</a>
<a href="#" class="widget-opener" onclick="$.data(this, 'ajaxURL', './ajax3.html')">記事3</a>

Javascript

$('a.widget-opener').live('click', function () {
    $.get($.data(this, 'ajaxURL'), function(html){
        //appendなりprependなり
    });
    
    return false;
});

onclickとliveでバインドしたイベントとの実行順が気になったけど、意図した順番に実行されている。ここで念のためonmousedownとかに逃げてしまうと、 今度は.trigger()が使えなくなってしまうのでonclickしかない。実行順が覆るケースがあるようなら、click.not_inlineというようにnamespacedイベントを利用して onclickイベントとの実行順を制御することもできる。

また、パーマリンクが存在するアンカーであれば、当然hrefにそれをかける。

<a href='./parmalink1.html' class="widget-opener" onclick="$.data(this, 'ajaxURL', './ajax1.html')">記事</a>

こうすることで、新規タブでリンクを開く可能性に配慮した仕組みも実現できる。実際、このブログの「最近の記事」のボタンは左クリックで新規ウィジェットを起動するけど、コンテキストメニューから新規タブでパーマリンクを開くこともできる。そして、この2つのURLをひとつのアンカータグ内で管理している。

まあ、HTML内に書くのには$.data()はちょっとだけ汚らしいというのは認める。

• TED.comは、最高レベルの英語学習コンテンツでは？
  去年、TED Talkで英語の勉強してたことがあったけど、サイトが尋常じゃなく重いのでやめてしまった。ニコラス・ネグロポンテとかゴア前副大統領とかが聞きやすくてよかった。ゴアさんは本題の環境問題に入る前までが面白い。あと英語の勉強なら動画内をテキストで検索できるGoogle Indexesも面白いかもしれない、と思いつつも全然利用はしてはいない。
• 英会話ドットネット、英会話SNSに位置情報で交流できる「Friend Map」追加
• 本を読んで分かった任天堂の「今そこにある危機」
  DSは参入障壁がハンパないときいた。是非間口を広げてほしい。
• ゼンリンの「道の駅」携帯サイトにトイレ情報追加
• 海外Webサイトを「Japanize」拡張を使って日本語で使う
• Android、OSは無償でも初期開発コストは想像以上に高い--HTC、HT-03A説明会を開催
• Twitterはまだまだ広告に対し慎重な態度を維持
• GENOウイルスに同人サイト連鎖感染　拡大防止へ協力の輪広がる
• Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。
• 正しいマスクの使い方： 咳やくしゃみの人にそれを譲ってあげること
  専門家でさえ「マスクに予防効果があるという事実は立証されていない」と言うに留まっているのに「効果がない」とテレビやネットで断言する人がいるのは問題だ。とは言え、このエントリーのまとめはそれなりに説得力があった。飛沫感染と飛沫核感染を混同してる人の戯言とは一線を画する。ただし、この実験結果も示しているように、マスクの予防効果は無視できないと思う。濃厚接触時の予防効果については専門家も否定してないようだし、マスクをすることで無闇に呼吸器に手を触れないという効果もある。いずれにしても、この実験は十分「科学」してると思う。ちなみに僕は先週まではマスクしてたけど、もうしていない。ある程度自体が見えてきたので警戒を緩めるのは自然な流れ。

• 「大地震の時のお礼にマスク」台湾から兵庫・大阪へ
  こういうニュースは泣ける
• 「マスクで予防」過信は禁物　ウイルス、髪や服に
• 新型インフル、騒ぎ過ぎの代償
  「日本人ときたら」なんて言ってる日本人は5月初頭のBBCニュースが連日、日本同様の危機感をもって報道してたことを棚にあげるのか。
• なんと10倍のエネルギー量、世界初の「空気で充電できるバッテリー」が登場へ
• パナソニック、KDDIの2009年au夏モデルに端末を供給中止
  秋にはauでAndroidっていう解釈であってる？

TwitterでニュースFeedをフォローし出してからおもしろ記事がありすぎて全然追えない。

• jQueryを使ったWebポータルフレームワーク「JPolite」
• 便利！MS OfficeとGoogleドキュメントをコラボレートする「OffiSync」
• 「視聴率」「録画率」こんなに違う (ゲンダイネット)
• すっごく簡単にFirefoxのアドオンが作れてしまうMozilla Labsの『JetPack』がなんだか良さそうだ
• IVS Spring 2009開催--ミクシィ笠原氏ソーシャルアプリを語る

土曜日にPHP勉強会に行ってきた。

勉強会系は初参加。ああ、こんな面白い世界もあるのかというカルチャーショックを受けました。仕事と無関係に、寝ても覚めても開発してそうな人たちがそこにいました。

もくもくと開発をして最後に成果発表会。プレゼンとか大の苦手なのでちょっと緊張しましたが、みなさん暖かく見守ってくれた。

今回は、tailコマンドでログを監視しながら開発する際に、PHPの構造体を表組で出力するライブラリを作りました。別のデバッグ出力用ライブラリで生成されたHTMLスニペットをw3mに丸投げすることで簡単に表組っぽいテキストを生成するという手抜きアイディアで好評いただきました。

まだ未完成ですが、完成したらOpenPearにアップしたいと思います。

• バイナリとテキストの本当の違い
• 「ソフトウェアは工業製品ではない」、Rubyのまつもと氏が講演
• KDDI研究所がケータイを振って本人認証をする技術を開発
  KDDI研究所の研究テーマはハズレなし。去年のCEATEC JAPAN直前の怒濤のプレスリリースがすごかった。
• あなたの履歴書を向こう5年間戦えるものにするために--今後必要な開発者スキル10選
• 売り手市場
  就職に関する話題のときだけ「売り手市場」と「買い手市場」を取り違える人が多い。あまりに多いので、心配になってググった。企業は「買い手」です。

Adobe ExtendScriptでsocket通信にトライ。結構苦労してサーバーから日本語を含むJSONデータを正常に取得することができた。

国内の解説サイトでsocket通信に言及しているのは2件。うち一件はメールの送信について解説していて、もう一件は日本語サイトの取得に失敗したとのことで、他には見つからない。

成功するポイントは、openメソッドの第二引数は必ずbinaryにすることです。UTF8などを指定すると長いコンテンツが途中で切れてしまう。どうやらマルチバイトのデータサイズをreadメソッドがきちんと処理してくれてないことが原因。また、openメソッドをテキストモードにすると改行コードも変更されてしまってとても混乱。

それから、エンティティボディの処理はきちんとチャンクサイズに基づいて行うこと。マルチバイトのあるなしに関わらず、ある程度以上のサイズを一気にreadまたはreadlnしようとすると途切れる。なので、サンプルスクリプトやAdobeのドキュメントに書いてあるread(999999)みたいなのは実用的には全く使えない。

結局、マルチバイトのエンコードもchunkedなコンテンツのデコードも全て自前の処理になるので、普通に面倒だけど寧ろそれが普通か。なんか以前にもPerlで同じコードを書いた気がする。

フォーム周りもajaxにした。フォーム送信するまでFCKeditorがテキストエリアを更新してくれないので自前で送信できないのかと思ったら、UpdateLinkedFieldっていうメソッドがちゃんと用意されていた。

<form onsubmit='return widget_submit_func1(this)' action='./a.cgi'>
    <textarea id='INSTANCE_ID'></textarea>
</form>

function widget_submit_func1(target) {
    
    FCKeditorAPI.GetInstance('INSTANCE_ID').UpdateLinkedField();
    
    var f = $(target);
    
    $.ajax({
        url: f.attr('action'),
        type: 'POST',
        data: f.serialize(),
        dataType: 'html',
        success: function(data, textStatus) {
            
            f.parents('.widget').addWidget(data, {method: 'insertBefore'});
        }
    });
    
    return false;
}

他にもGetHTMLメソッドとかいろいろあって何でもできる。ちゃんとドキュメント読まんといかんです。