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

On Emotionのイシハラです。

一番初めに書いたWebプログラムは、確かperlでカウンターだったと思うのですが、最近カウンターを設置しているホームページを見かけなくなりました。

数年前、google Analyticsがリリースされたのがきっかけなのかなぁ、と勝手に思ってます。

そんなgoogle Analyticsも、このブログに一応設置しているのですが、なんと悲しいほどのアクセス数・・・。
間違ってアクセスしてきた人しかカウントされてないのかと目を疑いたくなります。

更新しないのが悪いのか、内容が面白くないせいなのか。

それはさておき、数日前にgoogle AnalyticsのAPIが公開されました。

せっかくなので、何か面白いものを実験的に作ってみようと思ったのですが、何のアイデアも出ずに、結局、このブログの右にある週間アクセス数グラフに落ち着きました。

グラフのライブラリはHTML5.jpさんのものを利用させて頂きました。

analyticsのAPIをホントに使ってるのかと疑われそうですが、ホントです。

せっかく作ったので設置しておきます。

それでは。

On Emotionのイシハラです。

昨日、凄腕フリーランスのS氏と話す機会がありまして、ちょっと前にS氏が作ったアレが凄かったので、「アレはどうやってるんですか？」と聞いてみたところ、「アレは・・・」と、色々教えて下さったわけです。

そんな話の中から頂いたもので、ひとつ作ってみました。

このブログのテキストを選択すると、右上の「えいご」ボックスに選択部分が翻訳されて表示されます。

このブログの文章を英語に翻訳する必要があるのかどうかということはひとまず置いてください。まぁ実験です。

バグを見つけても気にしないでください。まぁ実験です・・・。

それでは。

追記：IEとFFで動作確認してます。

追記：Chromeも対応

追記：safariも対応

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のイシハラです。

JavaScriptでちょっと悩まされています。

先日書いたスクリプトが特定の環境下で不具合があるのです。ブラウザはIE6なのですが、僕のところのIE6では不具合が確認できないという状況です。どのような環境下でエラーが起きているかという情報が少なかったり、エラーが再現できないというのは結構厳しいです。

そんなJavaScriptですが、リッチコンテンツや入力項目数の多いフォームなどの入力補助機能を作るためには必要なので、避けては通れないと思っています。

多様化してきたブラウザ全ての動作テストなどを含めて考えると、ちょっとしたスクリプトでも意外と手間が掛かったり、今回のような特定の環境下のみ発生する不具合に、クライアントサイドのスクリプトの難しさを考えさせられました。

枯れた技術と言われながらも、未だにJavaScriptを使った新しいモノがたくさん出てきているので、まだまだ面白い言語だなぁと思ってます。

それでは。

On Emotionのイシハラです。

昨日、prototype.jsをしばらく使うと書いたばかりなのに、今日はadobeのjavascriptフレームワークspryについてです。

以前も少しspryは使っていたのですが、バージョンは1.4でした。今日、ちょっと気になって調べたらバージョンが1.6になってたので、早速adobe labsからspry1.6をダウンロードしてみました。

ざっとしか見てないので、細かい部分まではわからないところもあるのですが、1.4から比べると大幅に追加されている感じです。

1.4ではなぜかできなかったラジオボタンのバリデーションやrssリーダー・各種エフェクトなど、隙の無い作りになってきました。1.5を知らないので当然かもしれませんが。

prototype.jsのようなフレームワークというよりは、(prptotype.js+scriptaculous)*0.8+αという感じです。わけのわからない式になってしまいましたが「いいとこどり」という意味です。

個人的には、使いやすいけど作りがカチカチしてるのでカスタムはしづらいといった印象です。

それでは。

On Emotionのイシハラです。

積極的にjavascriptを書くようになったのは、この半年なのですが、いまさらながらその面白さにハマっています。

僕がインターネットを始めたのが10年ほど前なのですが、当時はjavascriptは切っておくものだ、という刷り込みと、ブラウザ間の互換を保つのが面倒という理由で、極力避けていました。

しかしながら、リッチコンテンツが主流となるなかでjavascriptやflashは避けて通れなくなってきました。

そんなとき、SEの先輩が「prototype.jsはいいよー」と教えてくれたので早速使ってみたところ、その使い勝手の良さに感動しました。

特に「document.getElementById( id )」 が「$( id )」で済むといったところや、非同期通信を行う際も省力化して書けるといったところでしょうか。ソースの可読性も飛躍的に上がりますし、開発効率も良くなる。ブラウザ互換も良い。いいことづくめです。

protoytpe.js以外にもフレームワークはありますが、もうしばらくはprototype.jsを使ってみようと思っています。

それでは。