text-hatena.js 公開 [tech.nitoyon.com]
本家 Text::Hatena で HTML::Parser を用いている部分は実装できていません。 URL の自動リンクや HTML のエスケープなどは実装できていません。 Cookie を利用するようなサイトに text-hatena.js を利用するのはお勧めできません。 ライセンスは Text::Hatena と同等とします。 技術的なアレコレ Perl と JavaScript って意外と似てるよね、というところから出発しました。特に、Text::Hatena のソースコードはそのまま JavaScript に置き換えられるぐらいに洗練されたコードです。例えば、Hatena.pm の一部に次のようなソースがあるのですが sub parse { my $self = shift; my $text = shift or return; $self->{context} = Text
![text-hatena.js 公開 [tech.nitoyon.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95abde13f7ed41248843e654a2f2ddcde8983db4/height=288;version=1;width=512/http%3A%2F%2Ftech.nitoyon.com%2Fapple-touch-icon-114x114.png){kind=icon}
俺の最強ブログ システムが火を噴くぜ
ブログを「はてなダイアリー」から、自分のサーバーに移転しました。 せっかく移転するなら、2012 年の流行を取り入れた挑戦的なブログにしてみたい！と思い、構想から半年、ついにこの日を迎えることができました。 せっかくなので、凝ったところを自慢させてください。 これが俺史上最強のブログ システムだ ブログ システムとして Jekyll を採用 Jekyll のプラグインを自作 (はてな記法対応、英語ブログとの統合) 履歴管理は GitHub を利用、git push で自動でデプロイ コメント欄には DISQUS を採用、旧ブログへのコメントはインポート済み HTML5 マークアップ、CSS3、レスポンシブ Web デザインでのモバイル対応 盛りだくさんですね。 詳しく説明していきます。 ブログ システムとして Jekyll を採用 最近では WordPress を選ぶのが普通でしょう。Wo
文字を制限した軽量な日本語 Web フォントを作成する方法 - てっく煮ブログ
HTML5最近、Web フォントをつかってかっこいい表現をしているサイトも増えてきました。ただ、残念ながら 日本語で Web フォントを使うのは厳しいのが現実です。というのも、日本語には英数字・ひらがな・カタカナ・漢字・記号・・・など必要になる文字数が多すぎるため、フルスペックの日本語の Web フォントはファイルサイズがすごいことになりそうです。そこで、「利用したい文字だけを含んだ Web フォントをその都度作ればいいんじゃね？」ということを考えてみました。アイデア自体は珍しいものではなく、例えば デコもじ というサービスは同じようなことをやってくれるようです（ただし、無料では「書体 1 つまで」「5 文字まで」など機能制限が大きい）。手始めに日本語 Web フォントを作ってみるまずは簡単に日本語 Web フォントを作る方法を紹介しておきます。無料で公開されているフォントの中にも、フォン
WinRT の async/await コーディングがおもしろい(のでJavaScriptで真似してみた) - てっく煮ブログ
Windows 8 開発者プレビューでの開発を試していたところ、非同期プログラミングを簡単に書ける await キーワードが面白かったので紹介します。Windows 8 用に Metro アプリを開発する場合、WinRT(Windows Runtime)というフレームワークを使ってプログラミングします。WinRT では、UI 応答速度を上げるための工夫として、少しでも時間がかかる可能性のある処理は、非同期の API のみが提供されています。なんかめんどくさそうですよね。いえいえ、そんなことはありません。.NET 5 から導入される async/await キーワードでとても簡単に書けてしまいます。HelloWorld アプリケーションのサンプルたとえば、HelloWorld アプリケーションでは次のようなサンプルが紹介されています。 // UI を表示するページのコンストラクタ // UI
twitter の console.log() エラーよけ - てっく煮ブログ
javascript, twitterFirebug が導入した console.log() は最近のブラウザで標準的に実装されつつあります。しかし、万が一、リリースコードに console.log が混じり込んでしまうと、古いブラウザや開発ツールが導入されていないブラウザで JavaScript エラーになってしまってとても悲しくなります。ということで、そういう場合にエラーを出さないようにするために、お手製の偽者 console オブジェクトを実装するテクニックがあります。ちょっと検索するといろいろ見つかります。 if (!window.console){ window.console = { log: function(){} }; } 確かに小さなプロジェクトでは、こういうおまじないを書いておくと安心だろうなー…と思っていたら、twitter のソースコードに次のようなコードを発見。
HTML5 雑感 - てっく煮ブログ
twitter にちょぼちょぼ書いてたけど改めてまとめてみた。HTML5 の捕らえ方 HTML5 自体は Flash 対抗というよりも、Ajaxで作ってたようなサイトをより作りやすくするようなものなんだと解釈している。 2010-02-02 21:09:20 via web HTML5 vs Flash の話を見てて気になるのは、人によって Flash を何と捕らえるかが違うところ。videoタグで不要になるFlashは全体の一部だし、Flash使わなくてもできるようなところは既にHTML+JSに置き換わってる物も多い。 2010-02-02 21:09:33 via web JavaScript 使ってるだけで「Ajax だ」「Web2.0 だ」と言われた時代は去り、canvas つかってるだけで「HTML5 だ」と言われる時代がやってきました。 2010-02-11 10:10:53
なぜ iPhone に Flash が搭載されないのか（Appleの弁） - てっく煮ブログ
Apple のスティーブジョブズ CEO が公開した Thoughts on Flash を和訳してみた。この文章では、「なぜ iPhone、iPod、iPad に Flash が搭載されないのか」について Apple の立場から６つの理由を説明している。細切れにジョブズの口から理由が語られたことはあったが、まとまって文章化されたことはなかった。目次Flash はオープンじゃない全ての Web を見るために本当に Flash は必要か？セキュリティとパフォーマンスを犠牲にしたくないFlash を使うとバッテリーが持たないFlash はタッチを前提としていない一番重要な理由Apple は Adobe と長い期間、関わり合ってきた。実際、我々が Adobe の設立者に会ったのは、彼らがガレージで起業したばかりのころだった。Apple はレーザープリンタに Adobe の Postscript
Image::ExifTool で写真の EXIF 時刻をまとめてずらす - てっく煮ブログ
perlカメラの時刻を間違えて設定してしまったり、海外旅行に行ったのに時差を変更し忘れたりしたとき、まとめて写真の時刻を変更したくなる。便利なフリーソフトもあるんだろけど、スクリプトでまとめて処理したくなるのがプログラマ魂。今回は perl を使ってやってみた。EXIF の時間を書き換えるperl で EXIF を扱うには Image::ExifTool が定番なようだ。CPAN から拾ってきて、簡単なワンライナーを書いてみた。 perl -MImage::ExifTool -e "for $f(glob('*.jpg')){$e = new Image::ExifTool; $e->ImageInfo($f); $e->SetNewValue($_=>240, Shift=>1) for ('ModifyDate','DateTimeOriginal','CreateDate'); $e
経路探索アルゴリズムの「ダイクストラ法」と「A*」をビジュアライズしてみた - てっく煮ブログ
as詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック を読んでいて、経路探索のアルゴリズムで A* が取り上げられていました。A* については、いろいろ検索して調べたりもしたのですが、やっぱり本に書いてあると理解しやすいですね。せっかくなので自分流に実装してビジュアライズしてみました。ダイクストラ法まずは A* の特別なケースでもあるダイクストラ法から見ていきます。クリックすると探索のシミュレーションが開始します。スタート地点(S)からゴール(G)への探索が始まります。色がついたところが「最短経路が決定した場所」です。スタート地点から少しずつ探索が完了していきます。半分ぐらい完了しました。まだまだ進みます。最後まで終わりました。最短経路を黒色矢印で表示しています。ダイクストラ法は、スタート地点から近いノード(=マス
続・パーフェクトシャッフルは何回で元に戻るか (AS3版) - てっく煮ブログ
as前回の続きで最初と最後がつながるところをアニメーションさせてみることにした。アニメーションの雛形作成四角から円をどのように作るか悩んだのだけど、扇形を徐々に広げていく形で変換してやった。バームクーヘンの１人前から始まり、徐々にバームクーヘンの１ホールになっていく、と言ってもいいだろう。こんな感じ。この実験は Square to Donut として Wonderfl に投稿してある。（はてなダイアリーに wonderfl の作品を iframe で貼り付けても失敗する。title="" を取り除いてもダメだけど何でだろ...）線の当てはめアニメーションの大枠ができたら、扇上に前回のシミュレーション結果を貼り付けて、変形に応じて座標を変えていけばよい。sin とか cos を駆使して座標変換を行えば終わり。 (要 Flash Player 10 以上)ソースは以下に(80行)。wonder
GlowFilter で簡単袋文字 - てっく煮ブログ
as前回 に続くテキストシリーズ第２弾。今回は ActionScript 3.0 で簡単に袋文字を実装する方法を紹介する。完成品はこんな具合。文字を編集することもできる。編集後の文字も袋文字！やってることTextField を表示TextField に GlowFilter で縁取りを作成する通常、GlowFilter は、ぼんやりと光る効果のために利用することが多い。しかし、strength を大きい値にすることで「ぼんやり」が「くっきり」になる。GlowFilter のコンストラクタは次のような定義になっている。 GlowFilter( color:uint = 0xFF0000, // 光の色 alpha:Number = 1.0, // 光の透明度 blurX:Number = 6.0, // 水平方向のぼかし量 blurY:Number = 6.0, // 垂直方向のぼかし量
てっく煮ブログ - ActionScript やるなら入れとけ。rascut 導入と使い方。
asActionScript 3.0 でコマンドライン開発してる人は必携の rascut を導入してみた。Flex 開発や AIR 開発でも使えるよ。rascut は id:secondlife さんによる fcwrap 後継バージョン。ファイル修正から自動的にプレビューまでできたり、trace() の出力をコンソールに出力してくれたり、かなり便利。以前、勝手が分からずにかなり苦労したけど、最近、RubyForge にアップロードされてからは gem 一発で超簡単になったよ。前準備Flex SDK と fcsh を準備しましょう。fcsh にはパスを通しておきましょう。Flex SDK については ActionScript 3.0メモ さんを参照あれ。fcsh については fcsh で Apollo を高速コンパイル あたりを参照あれ。Flex 3.0 SDK には fcsh が付属してる
はてブ受けしそうな記事を書いて、１ヶ月で約３万円を稼いだ顛末 - てっく煮ブログ
このブログでは今年の２月ぐらいから Google AdSense の広告を貼っていました。どれぐらい儲かるんだろうとワクワクしていたのですが、普通に記事を書いていても期待はずれな収入でした。そこで、はてなブックマークでウケそうな記事を集中的に公開して、ページビューを稼いでどれだけ広告収入が増えるか試してみることにしました。調査期間2009日5月10日〜5月末方針海外のデザイン系ブログを少し翻訳して転載しただけの記事を書くことはプライドが許しません。かといって即時性では有名ブログには勝てないので、「個人的には面白いのに世間ではあまり知られていないものを分かりやすく紹介する」という方向で売れ線を狙って書いてみることにしました。記事を書くに当たっては、次のようなことに気をつけてみました。注目を集めるためにタイトルは少し煽り気味にする一番伝えたいことがちゃんと伝わるよう、何度も見直す本題に関係ない
新型インフルに対する京都大学の対応がかっこよすぎる - てっく煮ブログ
新型インフルエンザ（豚インフルエンザH1N1）の感染が広がっています。京都市内でも新型インフルエンザ感染者が見つかり、小中高校だけでなく、大学でも休校が相次いでいます。 新型インフルエンザの感染拡大を防ぐため、府内の私立の小中高校、幼稚園、専修・各種学校計１６１校・園が２２日夕までに休校を決めた。期間は一部を除き２７日まで。私立小中高など１６１校が休校 京都府内、新型インフルで：京都新聞大学でも京都大学以外は休校・登校停止といった対応をしているようです。 大学、短期大学は国公立を含む府内全４７校のうち、京都大を除く４６校が休校・登校停止の措置をとった。 私立小中高など１６１校が休校 京都府内、新型インフルで：京都新聞京都大学はなぜ休校しないのか？京都大学のホームページを見てみましょう。 京都市内において新型インフルエンザの感染が確認されたところです。また、京都市、京都府から休校も要請されて
履歴消去じゃ消えないエロサイトの隠れた痕跡に要注意 - てっく煮ブログ
色んなホームページを見ていると閲覧履歴が自動で保存されます。恥ずかしいページを見たあとには、他の人にばれてしまわないように、こっそり履歴を消している人もいることでしょう。通常、ブラウザには「履歴を削除する機能」が備わっていて、ブラウザの履歴を削除すればあなたの悪行の数々は消え去ってくれるように思えます。しかし、ブラウザからは消せない履歴が残っているのです…ブラウザからは消せない履歴それが Flash の Local Shared Object です。Local Shared Object は Flash 版の Cookie みたいなもので、Flash で一時的なデータを保存するときにはよく用いられるものです。Local Shared Object は次の場所に保存されています。OS場所Windows XPC:\Documents and Settings\ユーザ名\Application
フォント同士を交配させて新しいフォントを作る「genoTyp」が面白い - てっく煮ブログ
「この発想はなかった！」と驚いた。genoTyp はフォント同士を交配させて新しいフォントを生み出す実験サイトだ。早速、試しにやってみた。1. 第一世代の親を決めるgenoTyp を開いて左上の [Breed] タブをクリックすると「交配ページ」が表示される。[add original font] ボタンをクリックして、祖先となるフォントを２つ追加してみた。交配させるために２つのフォントをドラッグしてくっつけた。くっついた状態になれば交配の準備は完了だ。2. 交配させてみる中央の [cross] ボタンを押すと第一世代が誕生する。４人の子供が誕生した。父親似だったり、母親似だったり、子供によって雰囲気が異なっている。3. 第一世代でも交配別の [original font] を追加させて、第一世代の中から気に入ったものと交配させてみた。３人の子供が第二世代に誕生した。4. さらに交配！今度
全自動ブックマーク棚卸しが想像以上に有意義な件 - てっく煮ブログ
みんな、自分が過去にブックマークした記事って気になるよね。はてなブックマークを使ってると、勢いでブックマークしてしまうけど、なかなか振り返る機会はないもの…。少し前に「ブックマーク棚卸しがイイヨ」という記事があったんだけどブックマークの棚卸し(?)をしてます。今年一年かけてブックマークしたものを順番に見て行ってます。見るといっても、全部の記事を開いて見るわけではなく、流し読みで、「ああ、これはもう一回読んでおきたい」と思ったものを開いてはインプットしているという感じです。 はてなブックマーク棚卸し - naoyaのはてなダイアリー１年分の棚卸しとなると楽しくないし…。わたしもみんなと同じ、その一員でした。でも、もう平気。「全自動ブックマーク棚卸し」があれば！全自動ブックマーク棚卸し があればもう大丈夫。全自動で １年前のブックマークを RSS 配信 してくれちゃいます。試しにやってみましょ
DebugDraw を使わない Box2DFlashAS3 のサンプル (2.0.2版) - てっく煮ブログ
as, box2dBox2DFlashAS3 の単純なサンプルと使い方 (2.0.2版) の続き。前回は b2DebugDraw を利用して描画をしていた。これを自前の描画に切り替えて行こう。床の描画床は動かないので初期化の段階で描画しちゃおう。b2DebugDraw を初期化していた部分を床の描画に置き換える。床はを作るときのパラメータはこんな感じだった。 // 位置：(400cm, 300cm) // 角度：180° / 24 wallBdDef.position.Set(400 / 2 / SCALE, 300 / SCALE); wallBdDef.angle = Math.PI / 24; // 大きさ：360cm×20cm wallShapeDef.SetAsBox(180 / SCALE, 10 / SCALE); Box2D でシミュレーションするときは 1 / SCALE
Box2DFlashAS3 の単純なサンプルと使い方 (2.0.2版) - てっく煮ブログ
box2d, asBox2dFlashAS3 はバージョンによって API が激しく変わっていてなかなか困りものだ。2.0.0 なら gihyo.jp の 特集：Box2DでActionScript物理プログラミング が分かりやすくてよいんだけど、2.0.1 で重要な API が改名されていて、そのことがパッケージには書いていない。「Box2dFlashAS3 どうなってるんだ」と思ったら、どうやら Box2D 本家の API 変更に素直に追従しているだけのようだ。本家側ではそこそこドキュメントはそろっているようなので、ドキュメントが欲しい人は Box2D 付属のクラスライブラリや Box2D User Manual を見たほうがよいかもしれない。今回は Box2dFlashAS3 ver 2.0.2 の単純なサンプルを作った。クリックすると始まるよ。（表示されない場合はリロードしてくださ
mixi で自分の都道府県を落とすアプリを作ってみた - てっく煮ブログ
自分が住んでる都道府県をプロフィールページに貼っつけて、訪問した人に落としまくってもらうための mixi アプリを作ってみました。サンプル私の mixi アカウントに設置してます（足跡が気になる人は注意してね）。http://platform001.mixi.jp/show_friend.pl?id=10037インストールするには※mixi アプリはβテスト中なのでちょっと手順が複雑になってますmixiアプリ オープンβ コミュニティーに参加する○○県を落とすとどう跳ねるのか からアプリ登録するhttp://platform001.mixi.jp/home.pl を開くと自分のページにも追加されてる！やってることOpenSocial の API でアプリを設置した人の住所を取得する北海道を落とすとどう跳ねるのか？ の Flash を都道府県を渡しつつ埋め込むとても簡単でした。隠すことは何も
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
