プログラミングノート

一からものを作ることが好きなエンジニアの開発ブログです。

JavaScript

JetpackでFirefox拡張を書いてみたので公開

Firefox 拡張を jQuery で書く! Jetpack を使ってみた。を見て面白そうだったので作ってみました。インストールすると現在見ているサイトのQRコードを表示できます。 QR code Manager http://webtech.s262.xrea.com/blog/jetpack/qrm/ コードはこちら // Go…

Ext.dataのProxy, Reader, Storeについて

GridPanel、ComboBox、DataViewなどのコンポーネントから利用されるProxy、Reader、Storeの各クラスですが、生成方法が色々あって分かりづらかったのでまとめてみました。 まず、StoreはView(Grid)からのリクエストに応じて内部の情報を操作するクラスで、基…

グラフ描画ライブラリFlotをComponent化する

前回のExt勉強会で紹介されていた外部ライブラリのComponent化方法ですが、勉強会資料がアップロードされていないようだったので自分で作ってみました。 今回はその時に利用されていたグラフ描画ライブラリのFlotをComponentとして利用できる形にし、オリジ…

Ext.Ajaxについて

今までjQueryの$.ajaxを利用していたのですが、Ext使う時にはExt.Ajaxだろうということでこちらを試したところ、ほとんどjQueryと同じ感覚でリクエスト出来ました。 Ext.Ajax.request({ url: 'get-json.php', params: { 'param1': 'value1' }, headers:{ 'my…

TreePanelの生成方法について

単純なツリーを生成する方法をまとめてみました。 サンプルと全体のソースはこちらから参照できます。 1. TreeNode指定で生成 Ext.tree.TreeNodeでノードを生成してツリーに追加していく方法です。ツリーを初期化した後、イベントでノードを追加していく際な…

ExtJSで開発する際に参考になるサイト

いつも同じような単語で検索してるので。 ExtJSExtJSの日本語サイト Ext JS 2.2 SamplesExtJSの公式サンプル Ext 2 Overview (Japanese)ExtJSの概要説明 Tutorial:Introduction to Ext 2.0 (Japanese)ExtJSの基本的なコンセプトと動的ページの作成・実行方法…

Ext JS/Ext GWT勉強会に行ってきた

先日、第6回Ext JS/Ext GWT勉強会に行ってきました。前回の勉強会は事例紹介が中心で、私が開発したBanquetBrowserも紹介していただいたのですが、今回の勉強会はExt JSの開発に関する話が中心で面白かったです。 続Ext JSアプリケーション開発の基本 Ext JS…

AIR開発テンプレートを作りました

JavaScriptでAIR開発をする場合、ベース部分は大抵のアプリで同じような形になるので毎回作るのが面倒です。Aptanaであれば新規プロジェクト作成時にnon-application sandobxの選択や、ExtJSのインポートも同時に行えて多少ましなのですが、AIR GEARではそこ…

BanquetBrowserを公開しました。

BanquetBrowserはMashupAward4に向けてAIRとExt.jsの組み合わせで何か作りたい、ということで開発していた飲食店検索ブラウザです。ランチにディナーに飲み会に、アプリを起動すればすぐにお店を検索できるよう、また同時に多くのお店を閲覧できるようにUIや…

GoogleMapストリートビュー

昨日から日本版のGoogleMapでもストリートビューが表示できるようになったので、AIRアプリにも入れたいなと思って、APIはあるのか早速探してみたところ英語リファレンスで発見。 リファレンスがよく分からなかったので、すでにあるサンプルや日本語のブログ…

若手IT勉強会に行ってきた

IT勉強会カレンダーで発見してちょっと気になっていた若手IT勉強会に参加してきました。*1 内容はJavaScriptサイ本の読書会。各自読み流して、気になったところをディスカッションという形式で5時間ほどやりました。こういった勉強会はほとんど参加したこと…

GoogleMapの問題解消

昨日の方法ではGoogleMapの処理がどうも最初のフルスクリーンサイズで計算されていたようで、地図の中心がずれるというバグが出てしまったので改善。何とか使える感じになったのでソースを載せときます。 基本的にMap生成時に地図のサイズが明示的に指定され…

GoogleMapで画像が途切れる現象が。。

Extで作ったWindow内にGoogleMapを表示したところ、スケールや地図タイプ切り替えのボタンは画面いっぱいに広がるのに、肝心の画像が途中で途切れるという現象がでました。小さいサンプルを作りながら試してみたところ、どうもExtWindowを生成する際に指定し…

JavaScriptでCustom Cromeを利用する方法

AIRのデフォルトになっているSystem CromeはExtなどのデザインと合わないので、なんとかしたいと色々試していたところ、Extのサイトでそれなりの方法を見つけたのでご紹介。 Extブログでは過去にCustom Cromeが使えるようになったと記載されていた(ココ)ので…

Gridのサンプルをいじってみる

Extのチュートリアルに掲載されていたGridのサンプルを使ってみたのでメモ。 jQueryとドコイクAPIを使ってデータ表示してみました。 Demo jQueryを使うにはext-base.jsの代わりに、adapter/jquery配下を下記の順番でロードすればよいらしいです。(Ext.js 2.0…

AIRやってみようか

色々APIやライブラリをいじってみましたが、ありきたりなアイデアしか浮かばなかったので、どうせなら新しいことをやろうということで、AIRアプリを作ることにしました。AIRはapolloのころに少し触った程度だったのですが、最近は環境も大分整備されてきてる…

オブジェクトについて2

よく耳にするプロトタイプについて。 ここまで理解できればライブラリもなんとか読めそうな感じ。 コンストラクタ 全ての関数オブジェクトがコンストラクタに使える。 new すると、あらたなオブジェクトが生成される。 function f(){this.name="hello constr…

オブジェクトについて

いきなりライブラリを読んでも分からないのでまず基本から。 ハッシュが基本 ハッシュは キーと値をコロンで区切って宣言。 2通りの方法でアクセスできる。 var hash = { 'key1':'val1', 'key2':'val2'}; alert(hash['key1']); alert(hash.key1); 配列も['0'…

ここ見て勉強!

Javascript一度やり直したいと思いつつブクマしていたものを整理。昔からJavascriptにはどこかとっつきにくいイメージがあるので払拭したいなあ。 JavaScriptのイロハ JavaScriptのオブジェクト指向:コンストラクタに関するありがちな誤解 JavaScriptの配列…

RailsでAjax

link_to_remote を利用したAjaxな実装メモ。 トリガー作成 標準で付属しているprototype.jsなどをjavascript_include_tagでロードし、link_to_remoteで非同期通信のトリガーとなるリンクを作成。before/success/failure辺りはなくても動作する。 <%= javascr…