ホームページ制作 仙台 - 株式会社オンエモーション

On Emotionのイシハラです。

朝っぱらから、とあるサイトを見ていたケイスケ君に「これ画像じゃないの！？」と、やや半ギレ気味に聞かれまして、「あ～それjavascritptで表示させてんじゃないの～？」とか、のらりくらりとかわしたわけですが、そういえばどうやるんだろうなと思って調べてみました。

調べたところ、あの有名なKawa.netさんのところに載ってました。（http://www.kawa.net/works/js/data-scheme/base64.html）

base64に変換したバイナリデータをdataスキームとして表示させてるようです。

なかなか素敵な技術。初めて知りました。

しかし、dataスキームは、なんとIEには対応してない模様。
やはり、というべきか・・・。

比較的簡単そうだったので、phpで画像をbase64に変換してdataスキームを使って表示させてみました。
ソースを見るとわかると思いますが、srcにbase64が入っています。

実験(IE非対応）

正直このスクリプトには意味がないような気もしますが、スゴイ人はwavファイルとjavascriptで色々やっているようです。

ついでに、元の画像（jpg）とエンコードされたテキストのサイズを比べてみました。

元画像： 35,637 バイト

base64： 47,538 バイト

さて、どう使おうか・・・。

それでは。

On Emotionのイシハラです。

JavaScriptの2大フレームワークといえばprototype.js、jQueryではないでしょうか。

prototype.jsばかり使って、jQueryをおろそかにしてしまっていたので、使ってみました。

セレクターがいいですねー。便利です。

めったにコードは公開しないのですが、ちょっと便利っぽいものを紹介します。

チェックボックスがズラーっと並んでいると、結構見づらくて、解像度が高いディスプレイだとチェックの部分が小さくて、どこをチェックしたのかわかりにくくなってしまいます。

そのうえ、チェックボックスは小さい四角なので、チェックしづらいということが多いです。

チェックボックスが小さいのはラベルタグで挟むと文字部分のクリックでチェックが入るのでいいのですが、たくさんあると見づらいなぁと思ってました。

ということで、チェックが入っている項目に色をつけるスクリプトです。

jQueryを使います。


$(function(){
$("input:checkbox").click(function(){
if (this.checked) {
$(this).parent(0).addClass("test1");
}else{
$(this).parent(0).removeClass("test1");
}
});
});

単純にクリックしたときに判定してcssを追加・削除するだけです。

チェックボックスが特定のグループだったらフィルターをかけると良いです。

ソースを見たほうが早いかもしれません・・・。

サンプルページ

それでは。

On Emotionのイシハラです。

今年も残り僅かとなりました。
おそらく、今年最後のブログ更新ということで、恒例（にしようかなと思ってる）個人的な今年の10大ITニュース大賞を決めます。
と思ったんですが、10個も思いつかないので、５大ニュースということにします。

★★★★★★★★★★★★　第５位　★★★★★★★★★★★★

<< iPhone発売 >>

何度も購入を考えたんですが、まだ手に入れていません。
２つ携帯の契約するのは「ちょっとなぁ・・・」、という感じです。
かと言って、iPhone一本にするというのも、「ちょっとなぁ・・・」

絶対大ブレイクすると思ったんですけどねー。
意外にブレイクせず。僕の感覚と一般の人の感覚のズレを感じました。

★★★★★★★★★★★★　第４位　★★★★★★★★★★★★

<< FireFox3 >>

僕が使ってるメインブラウザです。
リリース直後はあまりのJavascriptの速さに感激しました。今までのはなんだったんだ、と。
Javasciptはご法度、的な時代もありましたが、リッチコンテンツだらけの今じゃJavascriptは当たり前。
アドオンがたくさんあっていいですよ。

★★★★★★★★★★★★　第３位　★★★★★★★★★★★★

<< youtubeの高画質化 >>

比較的最近ですね。
youtubeは画質が粗くて昔のリアルメディアっぽくて、あまり見てなかったのですが、高画質化されてからはちょくちょく見るようになりました。
画質が良いと、やっぱりいいですね。
やたら回線を占有するって聞いてたので、youtubeの高画質化は無いと思っていただけに、びっくりです。

★★★★★★★★★★★★　第２位　★★★★★★★★★★★★

<< Google Chrome >>

突然リリースされたGoogle Chrome。
Javascriptも速い速い。
でも、メインブラウザとして使ってません。カスタマイズできないですからねぇ。
正直これ以上ブラウザを増やしてほしくないというのはあるんですが、レンダリングは良いほう（safariと一緒？）なので、気にするほどでもないのかな、と思います。
ブラウザまでリリースしたGoogleですが、次はOSも噂されてますね。ちょっと前に流行ったWebOSかな？

★★★★★★★★★★★★　第１位　★★★★★★★★★★★★

<< Google ストリートビュー >>

いろいろ物議を醸しているGoogle ストリートビューが1位です。
色んな意味でスゴいですね。
プライバシーの問題やら色々ありますが、多くの人が考えるであろう、「ネットで街中を見られる」というのを実現したわけですから。

Google Earthに続いて地球全てをデータベース化するつもりなのか・・・。
再来年あたりは、過去の街も見られる機能を実装してもらいたいです。

結局Googleのサービスが印象に残った感じです。
来年はどんなものが出てくるのか・・・。進歩が速くて先が全然読めません。

みなさまよいお年を。

それでは。

On Emotionのイシハラです。

もう11月も終わりに近づき、すぐ師走。

ちょっと気が早いですが、ITメディアにこんな記事が掲載されていました。

「今年最もお世話になったショートカットキーは？」

上位は、コピペ（「Ctrl＋C」・「Ctrl＋V」）とアンドゥ（「Ctrl＋Z」）そして全選択（「Ctrl＋A」）。

基本ですね。

僕はそれに加え、切り取り（「Ctrl＋X」）もよく使います。

ランキングが意外に低かったのが、（上書き）保存（「Ctrl＋S」）。

僕は、無意識に押してます。何か書くたびに「Ctrl＋S」押してます。

おそらく、今年もこれからもずっとお世話になるショートカットキーでしょう。

Windowsのショートカットキーではありませんが、検索ウィンドウを出すのに「Ctrl＋F」を使います。

検索機能がついているアプリケーションは大体「Ctrl＋F」がショートカットだと思います。

あと、DreamWeaver限定ですが、テーブルの行を追加するのが（「Ctrl＋M」）です。

DWは、なぜか、これだけ覚えました。

昔、テーブルに何かをひたすら入力する仕事でもしたんでしょうか・・・。

覚えてませんが。

それでは。

On Emotionのイシハラです。

以前このブログでも取り上げましたがGoogleが提供していた3D仮想空間サービス「Lively」がどうやら終了するようです。

去年、セカンドライフがブーム、というかたくさんのメディアで取り上げられて、たくさんの雑誌やHow to本が発売されましたが、最近ではIT系のニュースでも取り上げられることが少なくなりました。

セカンドライフに追随していろいろな3D仮想世界サービスが始まりましたが、このLivelyもそのひとつ。Googleが運営というところでは期待したのですが、結局終了になってしまいました。

Googleが撤退したという意味は大きいような気がします。

ところで、PS3のHOMEはちょっとやってみたいです。PS3持ってないんですけどね。

それでは。

On Emotionのイシハラです。

最近、某OSSのカスタムを多く手がけています。

某OSSではわからないので、明かしますとEC-Cubeです。

今までも他のOSSのカスタムを手がけましたが、それぞれのコードの書き方、システムの設計が独特で非常に興味深いです。

結局どれが一番いいのか、ということは一概に言えませんが、EC-Cubeは後発で国産ということもあり、カスタムはしやすいんじゃないかなぁという感じです。

ユーザーにとってもEC-Cubeの管理画面のインターフェースは日本人にはとっつき易いんじゃないかと思います。

それでは。

On Emotionのイシハラです。

以前、BrainFuckという言語を見つけました。名前がちょっとアレな感じなんですが、「脳がグチャグチャになる（する）」、とかそんな感じで訳したら良いのかな、と思います。

2008年の現在では、特に新しい言語でもないのですが、ちょっと興味を持ったのでチャレンジしてみました。

使う記号は><+-.,[]の8つのみ。非常にシンプルで、ポインタと配列を使うというイメージのようです。

他のサイトに書いてあることをわざわざ書くまでもないので、解説は書きませんが、興味がある方は「BrainFuck」でググってみてください。

文字表示から、足し算までやってみましたが、言語というよりパズルを解いている感覚になりました。

「On Emotion」という言葉を書くだけでも大変です。以下。

++++++++++[>++++++++++<-]>

———————.+++++++
+++++++++++++
+++++++++++.—————–
——————————-

——————————.

+++++++++++++++++++++++++

++++++++++++.+++++++++++++

+++++++++++++++++++++++++

++.++.+++++.———–.++++++.-.

ループを使えばもうちょっと短くなりそうですが、とりあえず、ということで。

コンパイラはここです。

公式サイトはおそらくここだと思います。

興味をもたれた方は是非チャレンジしてみてください。

それでは。

On Emotionのイシハラです。
今日は、読み間違え、言い間違えやすい用語について書いてみたいと思います。

1.WYSIWYG（ウィジウィグ）
What You See…とかの頭文字を取ったものですね。HTMLエディタとかでしょうか。
どうも、IT系は頭文字を取った言葉が多くて、母音がないのに強引に読むものも結構あって困ってしまいます。

2.MIME（マイム）
メールのアレです。全部大文字なので「ミメ」と読んでしまいそうですが、「マイム」だそうです。
普段耳にすることがないので、話しているとき「マイム」と言われても気づくかどうか心配になります。

3.矩形（くけい）
Webとは関係ないような気もしますが。
長方形ですね。画像処理系のソフトの解説で出てくるかもしれません。

4.JavaScript（ジャヴァスクリプト）
Javaは「ジャヴァ」、Scriptは「スクリプト」と言えるのに、なぜか「ジャヴァスプリクト」と言ってる人がいました。
気持ちは分からないでもないですが。

5.JavaとJavaScript
JavaScriptを省略してなのか、ごっちゃにしてるのかわかりませんが、JavaScriptを「Java」と略される方が結構います。
勘違いしそうで困るときが多々あります。
JavaScriptを略す場合は「ジャヴァスク」あたりでお願いします。

6.Phar（ファー）
PHP5からの新機能、PHPスクリプトのアーカイブです。まだ使ったことはありませんが、早めに試してみたいです。

7.vi（ブイアイ）
unixのテキストエディタです。最近まで「ヴィ」だと思ってました。
「ブイアイ」ですか。そのままですね。読みの法則がわかりません。困ったものです。

それでは。

On Emotionのイシハラです。

公開されたばかりのブラウザ、Google Chromeを早速使ってみました。

http://www.google.com/chrome/　（ダウンロードのページ）

新しいブラウザが出たとき、特に気になるのがブラウザのレンダリングの違い。

どの程度速いのか、また他のブラウザと表示の違いはないか、など。

特に、今まで作ったホームページのレイアウトが大幅に崩れてしまうのは困りものなので、要チェックです。

このGoogle ChromeはレンダリングエンジンはWebkitということらしいので、とりあえずsafariと同じという解釈でいいんじゃないかと思います。

インターフェースもシンプルで、立ち上がりも速く、Javascriptも高速だと言われたFireFox3レベル（以上？）だと思うので、おススメです。

しかし、FireFoxをカスタマイズしまくっている僕は、乗り換えるところまではいかない、という感じです。

それでは。

On Emotionのイシハラです。

PHP5.3についての情報がいろいろと出てきまして、まだ実践で使うことはないとは思いつつも、現在メインで使っている言語なのでかなり気になるところではあります。

5.3では名前空間やラムダ関数、クロージャが実装されるらしく、個人的にはかなり楽しみな感じです。

名前空間が本格的に実装されるということは、多数のライブラリなどを使うことが前提、もしくは大規模なものの制作にも耐えられるようにしていこうという意図が見えます。

ぱっと見、他言語のいいとこ取りという感じもしますが、やっぱり便利なものはどんどん入れていってほしいというのも本音です。

個人的にはJavaのようなオーバーロードを実装してもらいたいと、勝手に思っています。

それでは。