2014年を振り返って

早いものでもう2014年の大晦日です。今年の自分を振り返ってみようと思います。 娘が1歳に 10月に娘がめでたく1歳の誕生日を迎えました。 妻には子育てを任せっきりでとても申し訳ないですが、すくすくと成長し、すでに体重は10キロを超えています。抱っこすると重いです。ずっしりしてます。まだ一人では歩けないですが、第一歩を踏み出すのは時間の問題です。 そして、とにかく「わんわん好き」です。特に実物のわんわんではなく、めざましテレビで毎日やってる「今日のわんこ」が大好きです。それを見...

NaClモジュールをgdbでステップ実行や変数値を覗くための手順

Chromeは、NativeClientと呼ばれる「OSが直接理解できるコンパイル済みコードを(サーバ側ではなく)Chromeブラウザ側で実行する仕組み」が備わっています。 最近はGo言語でもNaClが書けるみたいですが、基本的にはCやC++でNaClモジュールを書くことになります。もうそれだけで「うわ、難しそう」と思ってしまうことでしょう。実際、CやC++でコードを書いたことがほとんどなければ、かなり難しく感じると思います。少なくともLL系などの超高級言語(?)しか経験のない人にとっては...

NaCl、nacl_ioやるときにハマったこと

Chrome MySQL Adminで「SSH Tunnelingできないから星1つ」とか頭にくるフィードバックする人が結構いて、それができないからって全否定かよ!としばらく怒っていました。その怒りを力に変えて、NaClでlibssh2使ってSSH2 Port forwardingできるように機能追加をしました。 https://github.com/yoichiro/chrome_mysql_admin 記憶に残っているうちに、ハマリどころを書いておこうと思います。 NaCl mo...

AngularJSのDirectiveにAPIを追加するための方法

AngularJSには、自分独自のHTML要素を作り出すためのDirectiveという仕組みがあります。これを使うと、一般的に「div地獄」となるような動的Webアプリケーションの作り方ではなく、論理的で直感的な、やりたいこと実現したいことを端的に表すタグを記述するだけで、Webアプリケーションを構成していくことが可能になります。現在Web Componentsの仕様策定や実装、さらにそれを推し進めるためのPolymerの開発が進んできていますが、それを先取りしたようなものと考えれば良いで...

jCanvasによる楽々グラフィック描画

最近はずっとChrome MySQL Adminの機能追加にいそしんでいる毎日です。データベースと言ったら、何を連想しますか?SQL?Oracle?いろいろと出てくると思いますが、きっと10位以内に入ってるキーワードとして、必ず「ER図」はあると思います。ER図は書くのが面倒なので、もし手元にある実際のデータベースからER図を自動的に書いてくれたら、こんなに楽なことはないですよね?はい、作ってみました。 この機能を作るために、いくつか図を描画するためのライブラリを検討しました。しかし...

PNaClでOpenSSLの機能を利用するChrome appsの作り方

ここのところ、PNaClについていろいろと調べてきました。なんで調べていたかというと、自分で作ってるChrome appsの中で、JavaScriptで書くのは非常にしんどい処理を既存のNative codeを呼び出すことで利用して楽したい、というのがあります。特に暗号系の処理は、扱う値の桁数も非常に大きく、もしOpenSSLにある関数で事足りるのであれば、それを利用したいところですよね。こういったことが、PNaClで可能なはず。それを自分でできるように習得したかったということです。まぁ、...

naclportsがmacでmakeできなかった話

NaClやPNaClをいろいろ試していく中で、自分で書いたコードだけでなく、他のコードを使いたいときが出てきます。例えば、opensslやその他便利なライブラリが、それに該当するでしょう。これらのライブラリは、NaCl SDKに付属するビルドツールでmakeされて初めて、自分のNaClコードから利用可能になります(と思ってます)。 NaCl向けに各種Patchがあてられた状態になっているライブラリ集が、naclportsです。この中に含まれる使いたいライブラリをビルドすることで、自分のN...

Chrome Native Client Tutorial C++ Getting Started編 (Part 2)

前のエントリでは、Native Client SDKに含まれるgetting_started、つまりチュートリアルについての説明ドキュメントを和訳して掲載しました。このエントリでは、そのチュートリアルの続きです。ここでは、SDKに付いてくるMakefileをより簡単に書くためのマクロの紹介や、共通的に使われるであろう関数を集めたJavaScriptコードの説明について言及しています。Native Clientモジュールの開発には欠かせないものですので、ぜひ読んでみてください。 原文: ...

Chrome Native Client Tutorial C++ Getting Started編 (Part 1)

前のエントリでは、Native Client SDKに含まれる各種サンプルコードのビルドと実行方法について紹介したドキュメントを和訳して掲載しました。このエントリでは、更に進んで、C++によるシンプルなNative Clientモジュールを作成するチュートリアルについて和訳してみましたので、掲載してみたいと思います。このチュートリアル自体は本当に簡単であり、しかし仕組みが良くわかる内容になっています。試すこと自体はあっという間にできるので、ぜひ試してみてください。 原文: C++ Tu...

Chrome Native Client Tutorial サンプル実行編

前のエントリで、Chrome Native Client SDKのインストール方法に関するドキュメントの和訳を掲載しました。このエントリでは、インストールされたSDKに含まれる各種サンプルコードをビルドし実行するための方法が説明されたドキュメントについて、僕が和訳したものを掲載したいと思います。百聞は一見にしかず、とにかくまずは実際に動いているものを見ることが、技術の習得の近道と言えるでしょう。もしNative Clientに興味がある方は、ぜひSDKをインストールして、サンプルを実行して...

Chrome Native Client Tutorial ダウンロード編

もし、Webアプリケーションの開発の中で「どーしてもJavaScriptではきつい箇所」に直面した時、Chromeであれば「Native Client」を使って開発するという手があります。Googleより公開されているSDKを使ってCやC++でモジュールを作成し、JavaScriptとそのモジュール間で通信することが可能です。従来からあるアーキテクチャごとにモジュールの実行形式を作って提供するNaClと、LLVMの中間形式の形でモジュールを作って提供するPNaClがあります。どちらも、同じ...

macosxのmakeで"Agreeing to the Xcode/iOS license ..."と表示された時の対処方法

ほとんどC, C++を使った開発をすることがなく、さらにmakeコマンドを使うこともほとんどなかったのですが、本当に時々makeを使う場面がやってきます。今日、本当に久しぶりにXcode Command Line Toolsで入ってくるmakeコマンドを使いたくなって、おもむろに”make”と打ち込んでみました。 すると、つれない感じのメッセージが返ってきました。 [~] make Agreeing to the Xcode/iOS license requires admin pri...

オレ流AngularJSを使った設計ポリシー

Chrome MySQL Adminでは、 AngularJSを使って実装を行っています。Chrome appsでは、 何らかのMVC Frameworkの利用が勧められています。 AngularJSは、Controller、Directive、Template、Serviceなど、いくつかの部品群を組み合わせてアプリケーションを構成することになります。その機能の豊富さ故に、実はちゃんとしたポリシーを決めておかないと、いかようにでも作れてしまうために、かえって複雑さが増してしまうという危...

Javaのgetter,setterメソッドは(特に)GUI部品のための規格だった話

こんな記事があった。 「 getter/setterとはなんだったのか」- プログラマーの脳みそ JavaBeansはGUIなどで再利用可能なコンポーネントを提供する際の規格のようなもので(僕もあまり詳しくない)2000年ぐらいにGUIのコンポーネントを作るときに意識したような、どうでもよかったような、イマイチ恩恵が実感できなかった代物だった JBuilder2とか3の頃のJava開発といえば、AWTやSwingといったGUIアプリケーションを作ることがまだ当たり前だった時代...

phantomjsを試してみた

GithubでJavaScriptのライブラリを探しているときに、最近「phantomjs」というものを使っているプロジェクトに出くわします。特に、そのJavaScriptライブラリのテストコードを動かすために採用されているっぽいです。例えばそのJavaScriptライブラリに対して何か手を加えてPull requestを出したい場合に、テストコードにも手を入れる必要があり、そのためにはphantomjsの環境も作っておかなければなりません。 そこで、自分のmacにphantomjsを入...

jqplot Tips

最近 Chrome MySQL Adminでグラフ表示をしたく、 jqplotを使ってみました。そこで見つけたTipsをまとめておきます。 IDを指定せずにjqplotを初期化する方法 jqplotを使う際には、以下のように記述するのが普通です。 <div id="jqplot-sample" ...></div> var jqplot = $.jqplot( "jqplot-sample", [ data ], { ... } )...

ChromeMyAdminの紹介ページを作ってみました

タイトルの通りです。 https://www.eisbahn.jp/chrome_mysql_admin/ 実際に実用に耐えうる機能が揃ってきたと自画自賛してるChromeMyAdminですが、利用者数が2000人前後で行ったり来たりしてて、いまいち増えていきません。実際Chrome WebStoreに掲載されても勝手にユーザ数が伸びることは希で、どこかで取り上げてくれない限りユーザ数の伸びが期待できないのは、今まで作ってきたChrome拡張機能などで経験してます。 紹介ページを作っ...

複数のSQL文を含む文字列を区切り文字列判断して分割するパーサーを書いてみた話

MySQLに標準で付属してくるコマンドライン版のClientであるmysqlコマンドには、例えばCREATE PROCEDUREをする際に一つのSQL文の中で複数のSQL文を含めるために、通常文末を示すセミコロン記号を文末と評価しないこと、つまり文末記号を別の記号に置き換えることができるようになってます。delimiterっていう命令がそれで、これはSQLの予約語ではなく、mysqlコマンドが提供してるものです。MySQL Serverに”delimiter”って送ってもエラーになります...

英才教育

「さぁ、今日は最短経路問題をC言語使って書いてみようっと」 「あれ、コンパイル通らないぞ。なんでだ?」 「コードは合ってるのになぁ・・・うーん、うーん、・・・」 「食べちゃえ!」 そして僕のmacbook airは娘の胃袋の中に消えていきました(うそ。

Web Componentsを使った部品のイベント伝達の続き

数日前に「 Web Componentsでイベントを伝達する部品の作り方」っていうエントリを投稿しましたが、さらに検証をしてみたのと、ちょっと勘違いしてた点があったので、再度イベント伝達について取り上げようと思います。 Shadow DOM内で発生したイベントの伝達 そもそもここから勘違いしてたのですが、最初僕は「Shadow DOM内で発生したイベントは、ホスト側には伝達されない」と思ってました。Shadow DOM内で起きたことは部品内で捕捉して、その後ホスト側にイベント伝達しなお...

Web Components部品へ何か情報を渡すための方法

Web Componentsを使った部品を考えたときに、単にタグをWebページに配置する利用方法も多いと思いますが、同時に何かパラメータやコンテンツを指定することで部品の挙動が変化する、といったことができると嬉しい部品もいっぱいあると思います。Shadow DOMが適用されることになるため、Webページと部品は基本的に「隔離」されます。そのため、何か情報を渡すための仕組みが必要になってきます。 ここでは、以下の2つの方法について紹介してみたいと思います。 属性を使って情...

Web Componentsでイベントを伝達する部品の作り方

Web Componentsで作られた部品は、もちろんそれを置いただけで効果があるものも多いでしょうが、その部品と他の部品の間、あるいはその部品を置いたWebページとの間でインタラクションをしたくなると思います。簡単な例であれば、画像付きボタン部品をWeb Componentsにて独自に実装した場合、そのボタンが押されたことをその利用側に伝達できなければなりません。伝達するための方法は、もちろんイベントです。 部品内でイベントを発生させ、それを部品の利用側に伝えるためのコーディング方法に...

Web ComponentsのWebブラウザ別動作を調べてみた

Web Componentsでは、標準技術として幅広いWebブラウザで利用可能とすべく、Polyfillという名の「未対応Webブラウザ向け実装」が開発され、すでに利用可能です。このPolyfillを使うことで、Chromeだけでなく、Firefox、Opera、そしてIEでもWeb Componentsを動作させることができます。 では、実際どこまでPolyfillでWeb Componentsが動作するのでしょうか?Polyfillとして適用するのは、もちろん platform.js...

Shadow DOMがもたらしてくれる再利用可能性

Web Componentsは、Custom elements、HTML Templates、Shadow DOM、そしてHTML Importsと言う4つの基礎技術から成り立っています。これらを組み合わせると、独自のタグセットを再利用可能な形で部品化できる、という触れ込みになってます。 その再利用可能性はどこから来るのでしょうか?その可能性を大きく引き上げてくれているのが、Shadow DOMによる「スコープの隔離」です。 Web Componentsで再利用される部品のほとんどは、...

もし同一の名前でdocument.registerElement()しようとしたら?

Custom elements, HTML Templates, Shadow DOM, そしてHTML Importsの組み合わせで成り立っているWeb Componentsは、開発者が独自に「部品」を作ることを可能にします。その部品とは、独自に定義された「HTMLタグ」に他なりません。決められたタグセットを使ってWebアプリケーションを作っていく時代は、そろそろ終わりに近づいています。自分で部品を作り、さらに他の開発者によって公開された再利用可能な部品を取り込んでアプリケーションを構成...

Chrome appsからTLSを張る際に参考になりそうなコード

そのうち使うかも。 circ/package/bin/net/ssl_socket.js https://github.com/flackr/circ/blob/master/package/bin/net/ssl_socket.js tcp-socket/src/tcp-socket.js https://github.com/whiteout-io/tcp-socket/blob/master/src/tcp-socket.js forge/js/tls.js https:...

Chrome Socket APIのsetPaused()関数の動作

Chromeアプリからソケット通信を行うためのSocket APIがあるのですが、古いAPIから新しいAPIセットに変更になり、利用可能な関数も結構変わりました。特に、受信がイベント駆動方式に変更になったため、受信したデータを自分で取りに行くのではなく、イベントリスナを登録してコールバックによって受け取るようにコーディングしなければなりません。これは全般的にかなり苦痛なコーディングを強いられるので個人的には元に戻して欲しいと思ってるのですが、イベント駆動方式を使いこなすために必要となる関数...

AngularJSにてMaterial Designサポートの開発が進められているようです

先日行われたGoogle I/Oで華々しいデビューを飾ったMaterial Design。Appleのフラットデザインをさらに推し進めて、視覚効果がリッチになったり、情報を読んでいく際のナビゲーションが規定されていたり、さらに当たり前のようにレスポンシブな仕上がりになっていましたね。個人的な印象は「とにかく派手!見た目重視フィードバック重視!」でした。操作した際の楽しさが考えられてるって感じましたが、皆さんはどう思いましたか? 基本的なUI部品の視覚効果を見て、「あ、さっそく使ってみたい...

MovableType+Chrome Hackathonにお邪魔してきました

6月28日に、Six Apart社主催の「MovableType + Chrome Hackathon」に講師としてお呼ばれしてきました。MovableTypeにはData APIというのがあって、MTの中にある情報を取得したり更新することができます。このAPIを使ったChromeアプリや拡張機能を作ってみましょう、というのが今回のテーマです。 会場は、Six Apart社の新しいオフィスでした。 僕自身は12時くらいに行ったのですが、すでにほとんどの方が到着していて、開発に黙々と...

Chrome appsのFrameを自分で作る際のTips

Chrome appsでアプリケーションを作る際に、OSが提供してくれるウィンドウのフレームを使うかどうか、選択することができます。例えばmacであれば、以下のようなフレームが提供されるわけですが、 これを使わないという選択肢もとれるわけです。例えば、以下のように自分で自由に作ることができます。 OS標準のフレームに似せずに、まったく自由にウィンドウを作ることができるわけです。閉じるボタンやフルスクリーンボタンなども、置くかどうかも自由です。 OS標準のフレームを使うかどうか...

英語で「どの電車に乗ればいいの?」的なことを聞かれた時の話

今日の朝、いつも通り湘南新宿ラインに乗って通勤し、渋谷駅に到着して電車を降りた直後の話。 他の人が降りた後、最後に僕が電車を出た時に、女の子二人組に声をかけられた。その内の1人が、僕が降りた電車を指さしながら、 “Shinkiba?” と言っている。つまり、「新木場に行きたいんだけど、この電車に乗ればいいの?」と聞いてきている。彼女の手には、英語でごにょごにょ書かれている中に”Shinkiba”という単語もあって、ようは英語だ。 とっさに聞かれると、こっちとしても焦る。とっ...

Movable Type Data API & Chromeアプリ勉強会で発表をしてきました

今日の夜、SixApart社主催の「 MT Hackathon @ Six Apart New Office 〜Data API で Chromeアプリを作ろう〜」に向けた勉強会が開かれました。そこで僕はChromeアプリ&拡張機能でできることや作り方についての発表をしてきました。 Chromeアプリ/拡張機能の入門に関する資料は、あるようであまりないので、ぜひ上記を参考にChromeアプリや拡張機能を作ってみてください。そして、Movable Type Data APIを使ったChro...

App Linksの技術文書を和訳してみました

4月20日に行われたFacebookの開発者向けイベント「F8」にて、App Linksという新しい仕様が発表されました。これは、今までのWebでのページ間リンクのように、スマートフォンアプリ間の「ディープリンク」を可能にするための標準的な手続きになるべく発表されたものです。具体的な仕様について、さっそく和訳をしてみました。これだけ読んでもちょっと理解するのが難しいのですが、参考になると幸いです。 原文は、 http://applinks.org/documentation/です。 A...

庭の木を植え替えた話

ゴールデンウィーク、いかがお過ごしでしょうか?あと2日で今年のゴールデンウィークが終わってしまいます。時間が経つのは、本当に早いものです。 天気が悪くなりそうなので、午前中にやってしまおうと思っていたことがあります。それは、「木の植え替え」です。今まで植えてあった「スカイロケット」という木は、とにかく枝というか茎がどんどん増えていってしまって、あっという間に収拾が付かなくなります。しかも、元気に緑色になっているのは、外回りだけで、内側は茶色です。つまり、外側の枝を切ってしまうと、あっとい...

キーボードのキーを抜いた話

会社で使っているキーボードが壊れて新しく買い直した話を先日ブログに書きました。その続報です。 ここ数年mac用のキーボードに慣れてしまったため、やはりWindowsベースなキーボードをすんなり使い始められるわけではなかったです。特に文章を打つ際の英数入力と日本語入力の切り替えに大苦戦しています。macの何が気に入ってたかと言うと、日本語変換のON/OFFに「半角/全角」というバカでどうようもない「トグル形式の切り替え」ではなく、「かな」キーと「英数」キーで明確に「こっちを打つんだ!」と宣...

キーボードを買った話

基本的に僕はずっと「キーボードにはこだわりを持たない派」として生きてきました。それは、小学校4年生の時にファミリーベーシックと出会ってから39歳になる今まで、ずっとです。パソコンを買った時に付いてくるキーボードをそのまま素直に受け入れて使う、それが全てでした。それはWindows機でも、macでも、同様でした。 特にここ数年はmacbook proかmacbook airを愛用しています。どちらもノートPCなので、そのまま付いているキーボードを使ってます。ただし、会社で使っているmacb...

Chrome Socket APIを古くから使っている人に新しいAPIのススメ

Chrome Webブラウザは、Web標準技術を使って、OS Nativeなアプリと遜色がないGUIアプリケーション(Chrome apps、昔Packaged appsと呼んでたもの)を実行する環境が搭載されています。OS Nativeなアプリに負けないためには、「できること」が多くなければなりません。すなわち、APIが充実していればしているほど、きっとOS Nativeなアプリとの競争力も強くなっていくことでしょう。 そのAPI群の中に、ソケットを扱うためのAPIがあります。Pack...

MySQL Console Chrome application has been released!

Today, I have released a new Chrome app named “MySQL Console”. If you’re using Chrome Web browser, you can install this application from the following URL: MySQL Console - Chrome WebStore Basically, you’ll use “mysql” command to execute querie...

Chrome Apps for mobileの開発方法

一部で話題になっていたGithubにある「 MobileChromeApps / mobile-chrome-apps」ですが、先日遂に 正式にGoogleからアナウンスがありました。デスクトップPC向けに開発されたChrome Appを元にして、このツールを使ってモバイル向けアプリ(Android/iOS)を自動的に作成することが可能です。HTML5とJavaScript、CSSを使って、Android/iOSアプリを開発することができるだけでなく、その中で各種Chrome APIを使う...

お坊さんの話

お坊さんって、お酒飲んでお経唱えていいんだっけ? この前とあるお通夜のために、お坊さんをお寺から式場まで送り迎えすることになったんだけど、僕の車の中が1秒もしないうちに「吐き気がするほどの酒臭」がしてきた。途中でげっぷをこらえるような音も数回聞こえてきた。 これは何かの間違いだ、と思って気にしないようにしてたんだけど、片道15分ほどで式場に到着して「はぁ、臭かった〜」とホッとしてたら、そのお坊さんから衝撃の一言が。 「あ、一式忘れてきた」 戒名が書いてあるやつとか、お墓に立てる細長...