‘JavaScript’ タグのついている投稿

IPv4が本当になくなる

2008 年 12 月 16 日 火曜日

IPv6というのがあるわけです。IPは数字の組み合わせでしかないので、桁数が決まっている以上有限です。そうなるとずっと発行し続けていると、いずれなくなってしまう。IPは固有の数字でないと存在できないから、そうなると全世界的にすごく困ってしまう。

ということで、94年からIPv6という次世代IP規格が研究されています。インターネット関連の研究では珍しく、この分野は日本人技術者が強力に推し進めていて、世界的には「IP? いいよまだIPv4で足りてるから。面倒くさいし…」というような雰囲気があったりするわけですが、それでも有限であるからにはいつかなくなります。

実は IPv6 って何年も前からよく耳にするけど、特にインフラまわりの知識が拙いし、何だかんだ身の回りのほとんどが IPv4 で、それでまぁウマくいってるからよくわからないし、別にどうでもいい…と、IPv6 に対して「現実味がない。時期尚早なのでは?」みたいな勝手な印象を抱いて、毛嫌いしてました。
IPv6 とかよくわからない人間が IPv6 対応サイトを作る際の知っておくべき 8 つの注意点 - にぽたん研究所

こちらのサイトでも紹介されていた、IPv4枯渇時計。

2008/12/16 19:17現在、あと14%、578,418,454個です。Xデイまであと810日…。

リアルタイムで見ていると、(シミュレーションですが)凄い勢いでIPが減っていっています。「日本の借金時計」みたいな怖さがありますね。(どちらが深刻かはさておき)

このライブドアさんの取り組みにも注目しておきたいところです。

ライブドアは12月15日、IPv6対応サイトの実証実験を希望する開発者に対し、IPv6環境を提供するプロジェクト「EDGE Co.Lab v6」を開始した。プロジェクトへの参加を希望する開発者および企業を広く一般から募集する。
ライブドア、IPv6対応サイトの検証環境を無償提供する「EDGE Co.Lab v6」を開始:ニュース - CNET Japan

IE6で透過pngのCSSマウスオーバー

2008 年 9 月 25 日 木曜日

以前、IE6で透過pngを扱うことのできるJavaScriptライブラリを紹介した。(システム修行ブログ» ブログアーカイブ » IE6用透過pngデザイン

が、実はメニュー部分でこれを使ったとき、Aタグのhover属性には有効にならないことが判明した。

試行錯誤の結果、こちらのサイトを参考に(CSSでブログデザイン IE6で透過PNGをロールオーバー)、JavaScriptではなく、CSSハックとの合わせ技で、IE6のときだけDirextX機能、アルファイメージローダーで画像を貼り付けるという手法で解決。



IE6透過pngテスト2

素晴らしい。『CSSでブログデザイン』様、ありがとうございます。

Smartyで日付をループ出力させる

2008 年 9 月 17 日 水曜日

予約システムなどを作るとき、現在の日時から増減させたリストを出したいシーンがよくあります。JavaScriptという手もありますが、環境に依存するので、Smartyを使ったシステムページなら、簡単にバリっと出せます。

ここでのループにはsectionを使います。name属性は適当でいいです。

1
2
3
{section name=time start=$smarty.now loop=$smarty.now+2592000 step=86400}
{$smarty.section.time.index|date_format:"%m月 %d日"}<br />
{/section}

これだけで、ひとまずはこんなBR改行のリストが出力されます。

09月 17日
09月 18日
09月 19日
09月 20日
09月 21日
09月 22日

日数は、now+2592000の部分で指定します。これは秒数で、今から起算して+2592000秒…つまり30日分です。一週間なら60×60×24×7=604800というように計算します。

stepは、何秒ずつステップ(ジャンプ)するかの指定です。例では日付リストなので、24時間(86400秒)で指定しています。

これを応用すれば、たとえばラジオボタンでもプルダウンリストでも、自在に出力できますね。

プルダウンリストの例

1
2
3
4
5
6
<select>
<option value="--" selected="selected">--月--日</option>
{section name=time start=$smarty.now loop=$smarty.now+2592000 step=86400}
<option value="{$smarty.section.time.index|date_format:"%m月 %d日"}">{$smarty.section.time.index|date_format:"%m月 %d日"}</option>
{/section}
</select>

Joomla!エディターの切り替え方

2008 年 9 月 12 日 金曜日

TynyMCEは、JavaScriptベースのオープンソースWYSIWYG。設置は簡単なんだけど、いまいち動作が重たくて使い勝手が良くない。
Joomla!のデフォルトエディタもこれが採用されているので、別のエディターに切り替えるべくプラグインをダウンロード。
Joomla! Extensions Directory - Editors
↑人気と評価の高いものを。

エディターの切り替え方

Joomla!jの基本設定

Joomla!jの基本設定

「プラグインの管理」でエディターの有効・無効を切り替えるだけでOKかと思いきや、投稿画面が真っ白になってしまう。
調べてみると、プラグインの有効無効とは別に、
「サイト→基本設定→サイト」で、デフォルトのエディターを何にするかを指定する必要があった。

エラー発生

ここで切り替えて保存、でめでたし…と思いきや、次のようなエラーが表示されて切り替えられない。

「エラーが発生しました! コンフィグ・ファイルが開けません。」

ここでいうコンフィグ・ファイルは、ルートにある「configuration.php」のはず。書き込み可能になっているはずなんだけど…。と思って確認してみると、777になっているので書き込み権限だけでなく実行権限が発生してしまい、phpとして扱われている様子。

というわけで666に変更して解決。

IE6用透過pngデザイン

2008 年 9 月 9 日 火曜日

マークアップエンジニア/CSSコーダーにとって、透過pngは鬼門である。

しかしクリエイティブ氏からこういうデザインを実現したい、という要望を受けた。
こういう場合、通常なら透過した部分をそのまま画像として切り出すのだけど、今回は背景画像が動的に切り替わるとのことで、メニュー部分を半透明にする必要がある。

そこで今まで試していなかったIE6用のJavaScriptライブラリを試してみることにする。
IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js」:phpspot開発日誌

しかし、透過pngはIE6がなぜか対応していないので問題になる。現状のシェアでは、まだIE6を無視するわけにはいかない。

そこでkづあんのJavaScriptライブラリ「alphafilter.js」を導入してみると…。

IE6透過pngテスト
うまくいきました。

方法も、JavaScriptを読み出したら

画像のclass名にalphafilterを指定

    <img src="./sample.png" class="alphafilter" alt="" />

背景の透過PNGの場合は次のように行います。

    <p class="alphafilter">内容</p>

IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js」:phpspot開発日誌

と、とてもシンプル。これは素晴らしい。
僕もいつかはこういう、人の役に立つ素晴らしい何かを作れたら、と思いつつ今日も勉強勉強である。

Google Chromeの機能面に迫る

2008 年 9 月 5 日 金曜日

突然リリースされたGoogle製ブラウザ『Google Chrome』。
まずはファーストインプレッションとして、機能面について考えてみました。

描画の早さ

ふれこみ通り、確かに早い。今までのブラウザでストレスを感じていたページ(JavaScriptを多用したページ、コメントが100件ついて長く伸びたブログのページなど)を開いてみると、サクサクと表示されて、すぐにスクロール可能になりました。
とにかく早さを追求というのは、ありそうでなかった戦略であり、これはまさにIE(多機能と独占)、FireFox(カスタマイズ性)など既存の2強ブラウザの競争をすりぬけるブルーオーシャン戦略ですね。
GoogleはこれまでMozillaに多額の資金を援助して蜜月関係を続けていますが、レンダリングエンジン※は完全にオリジナルなものが開発されました。タスクマネジャーで確認してみると確かに「chrome」というプロセスがモリモリと動いています。
(※UA情報によると、レンダリングエンジンはSafari搭載のAppleWebKitのようです)

タブの独立性

Chromeは、それぞれのタブが独立しているので、どれか一つがクラッシュしても他のタブ、ウィンドウ自体には影響を与えないとされています。しかしタスクマネジャーを見ると、タブの数だけプロセスが複数立ち上がっているので、マシン自体が重くならないかはちょっと心配ですね。
ただ、タスクマネジャーからタブ単位で強制終了させられるのは便利なときがあるかもしれません。
そうそう、Google Chrome独自のタスクマネジャーが搭載されているのはすごい。(Shift+Escで起動)

操作関連

操作については、IE7のようなもったり…もったり…した動きになれている人にとっては、驚異的なスムーズさに感じられるのではないでしょうか。Ctrl+Tで新しいタブを開いた時のスピード感が全く違います。(FireFoxとはそれほどの差異は感じません。)
URL欄と検索欄が一体化したのはレイアウト上はすっきりしていいと思いますが、僕はキーワードをホイールクリックで新タブで開く操作をよくするので、「新タブを開く→検索」と2ステップにしなくてはいけないのはちょっと不便に感じました。
ホームページが、よくアクセスするページのサムネイルというのありそうでなかった発想、便利に使えそうです。
キーボードショートカットは、ベーシックなものは概ね他のタブブラウザと一緒ですが、先ほどのタスクマネジャーのような独自機能を呼び出すものも多数あります。Explore Google Chrome Features : Keyboard shortcuts - Google Chrome Help Center
マウスジェスチャーがないのが、ジェスチャラーにとっては寂しいところですし、今のところ、純粋な「便利さ」という機能面で比較すると、僕の中ではカスタマイズしたFireFoxに軍配が上がりますが、これからChromeにもプラグイン機能が追加されていくと、どうなるかわかりませんね。

JavaScript関連

何が早いって、どうやら搭載されているV8というJavaScriptエンジンの処理が相当高速のようです。
このV8、こちらの解説によるとsmalltalkというエンジンがベースになっているそうです。

Strongtalk は、Objective-C ばりのオプショナルな静的型チェック機能と Ruby と同様にミックスインを用いた多重継承機構を併せ持つ、ちょっと毛色の変わった Smalltalk 処理系で、同時に Sun の Self 言語処理系で培われた技術を組み合わせることで実現された非常に高速な VM を持つことでよく知られています。この高速化技術は後に Java HotSpot VM にも応用されました。

この記事によると Google Chrome の V8 にも、同様の技術が使われているようですね。…というか、Self VM から Animorphic VM、Java HotSpot VM、OOVM、そしてこのほどの V8 には、“VM の魔法使い”と呼ばれるラース・バック(Lars Bak)が共通してかかわっているという話のようです。
爆速で話題の Google Chrome 搭載 JavaScript VM “V8” は、Animorphic Smalltalk VM がベースになっているらしい - sumim’s smalltalking-tos

で、オープンソースなのでV8もGoogleによってソースが全公開されてまして、それを使って色々やってみた記録がこちら。

Google Chrome の JavaScript エンジン V8 を試す - IT戦記

さらには、JavaScriptデバッガもひっそりと用意されていて、こちらはすでにFireFoxのFirebugをもしのぐと言われているようです。
こちらの紹介が詳しいです。
Google Chrome JavaScriptデバッガ完全マニュアル。 - IT-Walker on hatena

いずれにせよ、Web業界にとっては完全に一つの新しい選択肢(あるいは作業対象)が増えたことになります。一昨日まで誰も知らなかったのに。
いやー、これだからWebは面白い。