ライブコーディングを補助するためのツール

早いもので、もう 2011 年も終わりですね。 年末年始になると新年会や忘年会、クリスマス・パーティーというように、何かと集まりごとが増え、おのずとライブ・コーディングを披露する機会も多くなってくると思います。 マイクロソフトでは、Visual Studio や Expression Web といった、HTML と JavaScript、およびCSS に対し強力な入力支援機能を持った製品をリリースしておりますので、それらを使用してライブ・コーディングを行うぶんにはそれほど苦労することはないでしょう。 しかし、現在の WebMatrix(※) や、テキストエディターでコーディングを行おうとすると、自力でコードをタイプしていく必要があります。 (※) WebMatrix 2 からは HTML5, CSS, JavaScritp に入力支援機能(インテリセンス)が提供されます。 タイプのスピードが猛烈に早く、技芸と呼べるほどの速度でコードを記述することができるのであれば、観客を退屈させずに済むでしょうが、そういった芸当は誰にでもできるというわけではありません。 また、そういたタイプの達人といえども SVG や Canvas で使用する数値データを、ミスすることなく短時間で記述していくことはほぼ不可能といってよいでしょう。 そういった問題にある程度の解決策を提供すべく、簡単な入力支援用のツールを作成しましたのでシェアさせていただきます。 ちなみに、このツールは、先日「HTML5 プログラミング生放送勉強会 第11回@大阪」に登壇させていただく際、デモで使用する MebNatrix2 のコードスニペット プラグインが、β 段階のためか、動作しなくなってしまい、同様の機能を持ったツールを、大阪行きの新幹線の中で作成したものに設定機能を追加したものです。 名前は特にありませんが、ここで「スニペットツール」という表記を使用してアプリケーションの機能説明を行いたいと思います。   スニペットツールについて スニペットツールは、アプリケーションのメニューを介して、あらかじめ用意しておいたテキストファイルの内容をクリップボードにコピー、または、任意のアプリケーションのエディター画面に貼り付けを行うものです。 スニペットツールが Window ハンドルを取得することのできるアプリケーションであれば、アプリケーションに対し貼り付けを行うことができます。 Windows ハンドルが取得できない場合は、クリップボードにデータを送ったままにしますので、アプリケーション側で貼り付けを行うことができます。   ダウンロードは以下から行ってください。   実行ファイルと設定ファイルのみ ソースコード (※) Windows 7…

2

「HTML5+IE9 Web Camp 2 with html5j.org」に登壇しました。

先週の金曜日 (2011/12/16) に開催されました 「HTML5+IE9 Web Camp 2 with html5j.org」にて、「マイクロソフトの新しい Web ブラウザー Internet Explorer 10 と HTML5」というタイトルで、弊社 奥主と 2 人でセッションに登壇させていただきました。 今回の記事では、同セッションのデモで使用したページと、その他補足情報について紹介させていただきます。   Internet Explorer 10 について 今回のセッションで紹介したのは、Internet Explorer 9 の後継である、Internet Explorer 10 についてです。 Internet Explorer 10 は、現在、開発中の状態であり、リリースまでの段階でいうと、β のさらに前の段階です。 しかしながら、開発者向けの早期検証用として Platform Preview という名称で公開されており、これをダウンロードしてインストールすることで Internet Explorer 10 Platform Preview がその時点でサポートしている機能を実際に試すことができます。 現在は Internet Explorer 10 の Platform Preview 4…

0

HTML5 プログラミング生放送勉強会 第11回@大阪 で登壇してきました。

先週の土曜日 (2011/11/19) 弊社の大阪支店で開催された 『HTML5 プログラミング生放送勉強会 第11回@大阪』 で、セッション枠をいただき登壇してきましたので簡単にご報告させていただきます。   プログラミング生放送勉強会 とは? プログラミング生放送勉強会 とは、ニコニコ動画のインフラを使用して、プログラミングやIT系の話題などそれらに類する内容の勉強会を実際の会場とオンラインとで行っているコミュニティです。 勉強会の様子を UST で流すというのは、最近では一般的になりつつありますが、プログラミング生放送勉強会、通称 『プロ生』 が他の勉強会のストリーミングと違うところは、ニコニコ動画のコメント、および Twitter のツイートを、リアルタイムに登壇者の PC の画面に表示し、そのコメントを会場とシェアするとともに、オンラインの向こう側にいる人たちに質問にもこたえるというところでしょう。 セッション中に自分へのツイートがリアルタイムで表示されると聞いて、小心者の私は 「無遠慮な言葉の暴力にボコボコにされて泣きながら途中で帰ることなったらどうしよう…」などと心配していたのですが、まったくそんなことはなく (あたりまえか)、気持ちよくセッションを終えることができました。逆に、リアルタイムでオートディエンスの反応もわかるし、質問も受けれて非常に良いな、なんて思いました。 なんにしても、オンラインで視聴している人達の 「セッションに参加してる感」 は、たんにストリーミングを見るだけのものとはぜんぜん違うんじゃないでしょうか? 非常に新しさを感じました。   画面に ニコ生や Twitter のツイートを表示させるツール PC 画面に ニコ生(ニコニコ生放送) のコメントや Twitter のツイートを表示させるのには、MISAO というツールを使用しています。 MISAO は CodePlex で公開されており、ニコ動のコメントや Twitter のツイートのほかに IRC や Windows Log なんかも表示させることができます。(※jz5 さんより、Windows Log は見れませんよ、とのご指摘をいただきました。訂正させていただきます。)  …

0

IE9 でだけ HTML5 コンテンツが動作しない場合にまず確認すべきこと

HTML5 コンテンツのを作成し、繰り返し Internet Explorer 9 で表示や動作の確認を行っていると、ある日突然、Internet Explorer 9 でだけ HTML5 および CSS3 などの関連技術が突如として動作しなくなるという状況に遭遇することがあるやもしれません。 再インストールを行う前、いやさ、ディスプレイに向かって「使えねんだよ、このポ○コツ野郎が!!」などと容赦のない罵詈雑言を浴びせる前に確認してほしいことがあります。 それは、「互換表示になってやしませんか?」 ということです。   互換表示とは?   賢明なユーザー様であればご存じのとおり、Internet Explorer 9 は古いバージョンの Internet Explorer 用に作られた Web コンテンツとの互換を取るためにドキュメントモードというのを持っております。 具体的には 「Quirks (IE5 相当)」、「Internet Explorer 7 標準」、「Internet Explorer 8 標準」、「Internet Explorer 9 標準」 の 4 つのドキュメントモードを持っており、それぞれのバージョンの Internet Explorer の描画ルールに従ってコンテンツを描画します。 この機能を使用して、古い Internet Explorer 用に作成された Web コンテンツを Internet Explorer…

1

第22回 「HTML5とか勉強会」に登壇しました。

昨日 (2011/10/26) に弊社品川オフィスで開催されました第22回 「HTML5とか勉強会」に登壇させていただきました。 「HTML5とか勉強会」 というのは、HTML5 を中心とした次世代 Web 技術に関する内容を中心として、様々なゲストを迎え、情報共有と発表の場とすることを目的とした勉強会です。 活動も活発なのですが、人気もものすごく高く、毎回勉強会のお知らせを流すたびに、あっという間に応募者の数が定員の数を超えてしまいます。 イベントの定員の数を応募者の数が上回るのは、メジャーな勉強会ではそれほど珍しいことではないのかもしれませんが、この勉強会の場合は、キャンセル待ちの方の数もものすごい数に上るのです。 ちなみに今回の募集では、100 人の定員が 1 時間ちょっとで埋まり、それでもキャンセル待ちが 250 人というものでした。 そんな絶大な人気の勉強会で、お時間を 15 分ほど頂戴して、以下の内容でミニセッションさせていただきました。 知って得する (かもしれない)、Internet Explorer での Canvas と SVG の描画 View more presentations from Osamu Monoe このセッションのメインとなる内容は、Internet Explorer 9 が Canvas と SVG をどのようにサポートしているか、です。 これについては、スライドには必要最低限の情報しか載せていませんので、ぜひ 「Internet Explorer 9 開発者ガイド」 にある詳しい情報をご覧いただければと思います。 HTML5 canvas 要素 SVG (Scalable Vector Graphics)…

1

使ってみよう! [F12] IE9 開発者ツール – 検証機能

//build/ 参加のための出張やら、MSC2011 の登壇などでずいぶんと間が空いてしまいましたが、引き続き Internet Exloprer 9 付属の F12 開発者ツールの使い方について書きます。 ちなみに今までの関連エントリは以下の通りです。 「使ってみよう! [F12] IE9 開発者ツール」 シリーズ HTMLとJavaScript のデバッグ編 さまざまな情報の表示 http キャプチャ機能 今日は F12 開発者ツールの検証機能について書きます。   [検証] メニュー以外の検証機能 Internet Exloprer 9  F12 開発者ツールにはさまざまな 「検証」 = 「調査して事実を確認する」 機能が搭載されています。 デバッグツール色の濃い F12 開発者ツールなので、そんなこと言ったらなんだってそうだろう、という声もあると思うのですが、まぁ、それはそれとして。 ここでは ユーザーによって行われる可能性のある Web コンテンツの通常動作の確認に使用できる機能を紹介します。   ウィンドウサイズの変更 趣味で HP を作成している人 (まだいらっしゃるのでしょうか?) などは、あまり気にしないと思うのですが、割と大事なのが異なる画面サイズでの表示の確認です。 インターネット上の Web ページは、不特定多数の訪問者によって閲覧されますが、閲覧者の使用している画面のサイズがみな同じというわけではありません。 なぜなら人間には自由意思というものがあって、自らの望む画面サイズを自らが望むように設定でき、そしてその行為は法律で保護されているからです…、というのはある意味本当ではあるのですが、多くの場合、使用しているコンピューターやデバイスのスペックによって変わってくるというのがほとんどでしょう。 かつて、私が現役のプログラマーで、フォームベースのデスクトップ アプリを開発していた時分は、画面サイズの確認というと、わざわざディスプレイドライバーの設定を変え、解像度を変更して見栄えを確認していたものですが、Web…

0

CSS Nite in Ginza, Vol.58 に参加してきました

Internet Explorer に関わるようになってから Web 系のイベントに登壇することが増えてきました。 そうすると必然的に他の登壇者の方々のセッションを聞くことになるのですが、そこで気が付いたことがあります。 それは、Web 系、とくにデザインとかアクセシビリティとかのセッションが、「ものすごく面白い!」ということです。 おかげで最近は、Web でコミュニティの勉強会を調べては UST を視聴するというのがすっかり趣味になっていたのですが、「セッションとかプレゼンは生で聴いてナンボだろう」ということで、昨日は CSS Nite さんの勉強会を聴講してきました。 「CSS Nite ってなあに?」 って方は、Wikipedia の記事をご覧くださいませ。そう、Wikipedia に載っちゃうくらい、もう老舗といっても過言ではないくらいの歴史と実績のある勉強会だったりします。 CSS Nite in Ginza, Vol.58 セッションは「『ウェブデザインコーディネートカタログ』 を作って見えてきた、2011年の デザイントレンド考察」 というタイトルで、Linker さんが出版した「ウェブデザインコーディネートカタログ」で紹介されている Web サイトについて Web デザイナーである秋野さん、原さん、小山さんが 「なぜ、このサイトを選んだのか?  どこがどのように良いのか?」 という意見をいろいろと交わす、というスタイルで行われました。 Web ページで使用されている枠の色、形からフォントについてのこだわりまで、登壇者の方々のコメントの内容がいちいち深くて感心しました。 しかも、そのコメントの中には、まったくデザインには詳しくない私をも、「おぉっ!」 と思わせるサプライズやら発見があり、さらに「なるほどー」と思わせる説得力があり、終始、うんうんとうなずきながら聞いておりました。 セッション中、とにかく熱い職人魂的なものが壇上からひしひしと伝わってきて、デザイナーというのは、単なる芸術家とは違って自らの作り出すクリエイティブによって確実に結果を導き出すプロフェッショナルな職人なのだなー、とあらためて感じました。 個人的には、デザインから遠いところにいる開発者の皆さんにも、機会があればぜひ参加してみていただき、今までにない刺激を受けていただければ、と思っております。 CSS Nite は、無償のセミナーも定期的に行っておりますので、参加しやすいとおもいますよ。   さて、次はどこの勉強会にお邪魔しようかしら。 ■ 次回は前回の記事の続き、IE9 F12 開発者ツールの、さまざまな検証機能について書きます。

0

使ってみよう! [F12] IE9 開発者ツール – HTTP キャプチャ機能

今回も前々回の記事に引き続き、Internet Exloprer 9 付属の F12 開発者ツールの使い方についてです。 (※1) 「F12 開発者ツールって、なによ..。」 という方はぜひ、前々回の記事をご覧いただければと思います。 (※2) Internet Explorer 9 ( IE9 ) をお使いの方は、ぜひ [F12] キーを押下して、実際に [F12 開発者ツール] を動かしながら本記事をご覧になってくださいませ。 今回は、F12 開発者ツールに搭載されている、IE9 と Web サーバー間を流れる HTTP をキャプチャする機能について紹介します。   [ネットワーク] タブでの HTTP のキャプチャ IE9 の F12 開発者ツールには、IE9 と Web サーバーの間でやり取りされる HTTP の情報を確認するためのネットワークキャプチャ機能が搭載されています。 この機能を使用すると、Web ブラウザーからのリクエスト、Web サーバーからのレスポンスの内容はもちろんのこと、ページが含んでいる画像やプラグインオブジェクトといった外部ファイルのラウンドトリップに要した細かな時間なども確認することができます。 F12 開発者ツールのネットワークキャプチャ機能を使用するには、[ネットワーク] タブをアクティブにし、[キャプチャの開始] ボタンをクリックします。 キャプチャが開始されたら、目的のページに移動するか、既にページを表示している場合は、IE9 の更新ボタンをクリックするか [F5] キーを押下してページを更新します。…

1

使ってみよう! [F12] IE9 開発者ツール – さまざまな情報の表示

前回の記事に引き続き、Internet Exloprer 9 付属の F12 開発者ツールの使い方について書きます。 ※「F12 開発者ツールって、なんじゃい?」 という方はぜひ、前回の記事をご覧いただければと思います。 今回は、Internet Explorer 9 のコンテンツ表示画面への、さまざまな情報の表示方法について紹介します。   エレメント情報の表示 JavaScript や CSS で Web ページのエレメント を操作する場合、エレメントの id 属性や class 属性を使用します。 こういったエレメントの持つ情報の確認は、一般的に HTML ソースで行いますが、ブラウザーのコンテンツ表示画面に実際に描画されたエレメント上で確認できたほうがイメージが湧きやすい場合があります。 IE9 の F12 開発者ツールの [表示] メニューを使用すると、Web ブラウザーで表示されている Web ページ上に、そのページを構成しているエレメントの ID やクラス名、リンク パスやその他の情報を表示させることができます。 表示の仕方は、[表示] メニュー内の目的にあったメニューを選択していくだけです。 (F12 開発者ツールの[表示]メニューの内容) (エレメントの ID とクラス名を表示したところ) [表示] メニュー内の [リンク レポート]を選択すると、ページ内の全てのリンクの一覧を Web ページとして表示します。 (リンク…

3

使ってみよう! [F12] IE9 開発者ツール – HTMLとJavaScript のデバッグ編

IE8 以降の Internet Explorer をお使いの方であれば、うすうすお気づきのことと思いますが、Internet Explorer 8 からは Web ページをデバッグするための開発者ツールが搭載されています。 「え、おれ IE9 使ってっけど、そんなの知らねーよ!」 という方は、IE9 を起動してキーボードの [F12] キーを押下していただければと思います。 以下のようなウィンドウが表示されると思います。    F12  開発者ツール これが Internet Explorer 9 に搭載されている [F12 開発者ツール] です。 お察しの通り、ツール名の 「F12」 は、起動のために押下するキーを表しています。親切ですね。 起動してきた [F 12 開発者ツール] のウィンドウ内には、さまざまなメニューやツールバー、そして機能名が書かれたタブが整然と並んでおり、その様子から、「なにかやってくれそう」な感がぷんぷんと漂ってきますが、いきおい期待は高まるものの、ぱっと見、「どう使っていいのかわからない」というのが大半の方の感想でしょう。 そこで今回から数回に別けて Internet Explorer 9 の基本的かつ特徴的な機能について、簡単に機能をご紹介させていただきます。   Internet Explorer 9  [F12 開発者ツール] の起動 [F12 開発者ツール] を起動するには、Internet Explorer 9 起動中にキーボードの…

0