サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
夏の料理
kozy.heteml.jp
QUnitとは? † JQueryプロジェクトでも利用されているJavaScriptのユニットテストフレームワーク。 結果レポートの出力やブラウザAPIを利用して主にHTML上で実行することを前提に作り込まれているが、Node.jsなどのCLI環境でも実行可能なように内部ロジックの調整は行われている。 ↑ Getting Started † 以下内容のHTMLを作成してブラウザで開く。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.10.0.css"> </head> <body> <div id="qunit"></div> <script
W3CのSpecでNavigation Timingってのができてまして、これを利用すればHTMLページのリクエスト〜レスポンスだけでなくWebアプリのonload完了までを計測してページ読み込み全体の性能評価するためのログ収集できるよねっていう話です。 Navigation Timingで取得できる情報 ChromeのDeveloper ToolのNetworkタブでリソースロードのタイムラインが確認できてページ読み込み開始からDOMContentLoadedもしくはonloadイベント開始までの時間を確認できます。ざっくり言うとNavigation Timingを利用するとさらに詳細な情報が取得できると。ブラウザが通常HTMLページを表示するには、DNSルックアップして、サーバーとコネクションして、テキストデータのHTMLを取得して、DOM構築して、、、と、あるんですが、それらの処理が
各所で良書だと評判の「テスト駆動JavaScript」を途中まで読みまして、自分もこれは良書だと思ったので書評的にブログエントリーを書いてみます。 table of contents 章立て この本を読むべき人 オススメな読み方 所感 まとめ 1.章立て 第1部 テスト駆動開発 第 1章 自動テスト 第 2章 テスト駆動開発プロセス 第 3章 現役で使われているツール 第 4章 学ぶためのテスト 第2部 プログラマのためのJavaScript 第 5章 関数 第 6章 関数とクロージャの応用 第 7章 オブジェクトとプロトタイプの継承 第 8章 ECMAScript第5版 第 9章 控えめなJavaScript 第10章 機能検出 第3部 JavaScriptテスト駆動開発の実際 第11章 Observerパターン 第12章 ブラウザ間の違いの吸収:Ajax 第13章 AjaxとComet
最近お仕事で既存のJavaScriptプロダクトコードをCoffeeScriptで書き換えてるんですけど、まぁコードが簡潔になるわなるわで徐々にJavaScriptを受け付けない体になってる僕ですどうもこんにちは。 そんなわけで小難しい話なしで簡単に伝わりそうなCoffeeScript押しな理由を箇条書きで6つほどメモ。一人でもCoffeeScriptに興味持ってくれればコレ幸い。 前提の話 新しい言語を学ぶには学習コストが発生するわけなので、以下なケースのJavaScriptコードっていう文脈を背景に話します。 コード規模が数千行 コードのメンテナンス期間が長い(1年以上とか) 複数人での大規模開発 こういった場合、少しでもロジックを簡潔に書けることがコードの可読性とメンテナンス性に大きく寄与していくので、これから説明するとこだけでの導入でも学習コストを上回る恩恵が受けれるんじゃないかな
ナイーブベイズのアルゴリズム † ナイーブベイズにおけるカテゴリの推定とは、ある文書Dが与えられたとき、その文書が確率的にどのカテゴリCに属するのがもっともらしいかを、単語の出現確率から求める問題。 ↑ 文書の単語ベクトル化 † ナイーブベイズでは文書中にある各単語の出現頻度を利用する。そのモデル化とは以下。 To be or not to be, that is the question. ↓ { to => 2, be => 2, or => 1, not => 1, that => 1, is => 1, the => 1, question => 1 } このモデル化は、単語は前後の文脈にかかわらず独立に生起することを仮定しているとみなせる。このような文脈を考慮しない文書モデルのことを「Bag of words」表現などと呼ぶ。 ↑ 確率式 † 文書Dが与えられたときカテゴリCであ
UITableViewCellのプリセットのビューの使い方。これで要件を満たさない場合はカスタムビューを自分で設定しないといけない。 プリセットのビュー4種類 以下4つの定数で提供されていて、セルの初期化時に指定する。 UITableViewCellStyleDefaultUITableViewCellStyleSubtitleUITableViewCellStyleValue1UITableViewCellStyleValue2 コードで確認してみる。新規プロジェクトからNavigation-based Applicationを選択してTableViewのdelegateメソッドのtableView:numberOfRowsInSection:とtableView:cellForRowAtIndexPath:を以下に修正。今回は確認用コードなのでcellをreuseするコードは省略。 -
ログインシェルの確認 † $SHELL変数にログインシェルのパスが格納されている。以下例、MacOSXターミナルのデフォルトではbash。 $ echo $SHELL /bin/bash ↑ Bourne shell † 別名 B shell(Bシェル)。シェルスクリプトの標準。どんなUNIXシステム上でも動作し汎用的なためスクリプトを書くのに優れているが、対話的機能(エイリアス機能、補完機能、ヒストリ機能など)が乏しい。「/bin/sh」といえばこのBourne shell。と思いきやLinuxでは「/bin/sh」と「/bin/bash」は同じだったりする。 ↑ C shell † Bourne shellに欠けている対話的な処理も十分行えるようにと作り直されたもの。パスは「/bin/csh」。記述がC言語に似ているためのネーミングらしい。以下はBourne shellになくC she
前回に引き続きHTML5関連仕様について。ApplicationCacheのspecを読んだのでめも書いておく。 spec http://www.w3.org/TR/html5/offline.html ApplicationCacheって何? オフラインWebアプリを作成するための機能ということでおk。任意のリソースをローカルにキャッシュさせることが可能となる。 manifestファイル どのリソースをキャッシュさせるかをmanifestファイルに記述する。ファイルエンコーディングはUTF-8で。1行目の「CACHE MANIFEST」は固定。clock.html, clock.css, clock.js の3リソースをキャッシュしている指定の例で、specのサンプルにならってclock.appcacheというファイル名で作成。 CACHE MANIFEST clock.html clo
spec http://www.w3.org/TR/html5/history.html HTML5以前のHistoryオブジェクトI/F window.historyでアクセスできるホストオブジェクト。ブラウザの進む/戻るに対するJavaScript APIのみでした。 interface History { void go(in optional long delta); void back(); void forward(); }; HTML5以後のHistoryオブジェクトI/F stateプロパティ、pushState, replaceStateメソッドが追加されました。ただChrome13(Webkit/535.1)においてはstateプロパティは未実装のよう。 interface History { readonly attribute long length; readon
どんなワーニング? iOS5(beta)とかChrome 13などで、ふと気付いたら自分が開発しているページでワーニングが出ていた。「widthってkeyに対してdevice-widthなんて値は指定できないんだぜJK」とかそんな感じ。 Viewport argument value "device-width;" for key "width" not recognized. Content ignored. 実際に指定していたviewportは以下な感じ。 <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"> ちなみにiOS4では出力されてない。はて原因何だろう?という今日の出来事に対するメモ。 結論 metaタグのcon
iOSアプリでHTTP通信を実装するベーシックな方法はFoundation Frameworkで提供されているNSURLConnectionを利用すること。ドキュメントの「URL Loading System Programming Guide」を一通り読んだので、その基本的な使い方をまとめてみる。 デフォルト設定でGET通信 まずはコードから。Window-based Applicationのプロジェクトテンプレートに対して、処理のエントリポイントをapplication:didFinishLaunchingWithOptions:に追加、他のメソッドは新規で作成。receivedDataはヘッダで定義されているNSMutableData型の変数。あ、テストコードなのでメモリ管理とか気にせず書いてます、あしからず。 - (BOOL)application:(UIApplication *
ナビゲーションコントローラー利用時の画面下部に表示されるツールバーをカスタマイズする。 InterfaceBuilderで設定する デフォルトではツールバーは非表示なのでそれを有効にするところから。 UINavigationControllerのAttributeにShows Toolbarという項目があるのでそれにチェック。 しれっとNavigationController以下にToolbarが追加される。 InterfaceBuilderで編集中のリソースをセーブして実行すると画面下部にToolbar領域が表示される。まだボタン類は何もない。 ツールバーにボタンを追加する。前回のUIViewControllerのNavigationItemと同様、ツールバーも現在表示されているView(ViewController)に関連した項目が表示される。 LibraryからBarButtonIt
今回の記事に関連のあるクラスとプロパティ UINavigationController UINavigationBar UIViewController navigationItem UINavigationItem backBarButtonItem leftBarButtonItem titleView rightBarButtonItem 前準備 ナビゲーションバーの挙動を確認するために、そのベースのビュー構造を作る。 新規プロジェクトからWindow-based Applicationを選択。 MainWindow.xibファイルをInterfaceBuilderで開く。WindowオブジェクトとAppDelegateしか入ってないまっさらな状態にコンポーネントを追加していく。TOPレベルにNavigation ControllerとView Controllerを追加。Navi
2011/1/9 東京大学で行われたAndroid Bazaar and Conference 2011 Winterに参加。主に開発トラックの話を聞いてきたので自分用にメモ。 前置きとして、「PCのWeb開発はやってるけどネイティブアプリとかスマホ向けWebサイトの開発を今からやりたい開発者」っていうスタンスで聞いてきました。 Webサイトの スマホ対応Tips 資料はこちらに公開されてますね。既存のPCサイトが既にあるうえでスマートフォン向けのサイトを制作するっていう事例が2011年増えるよねっていうとこで、PC→スマホな制作に関するTipsとかの話。 限られた解像度なのでUIは再設計すべし ローカルナビゲーション、関連ナビゲーション、機能ナビゲーションは無くてもよいUIに 逆にダイレクトナビゲーション、ステップナビゲーション、パンくずリストはスマホ向きなUI 文字サイズはpx指定では
XCodeにデフォルトで含まれるユニットテストフレームワーク「SenTestingKit」をiPhoneアプリ開発で利用する方法を忘れないようにメモ。大枠の設定&実行まで、コーディングレベルのアサーションの種類や使い方は別途書く。 参考記事 iOS Development Guide: Unit Testing Applications まずプロジェクトの作成。任意のプロジェクトでユニットテストが可能(プロダクト用とユニットテスト用のプロジェクトを分ける必要がなく後述するターゲットで分ける)、なので適当にWindow-based Applicationを選択。 プロジェクト名は任意でOK、「UnitTestSample」として保存。 初期状態のプロジェクトリソースはこんな感じ。 ユニットテストはビルド時にXcodeで行う「Logical Tests」と、実機で行う「Applicati
SenTestingKitのアサーションの書き方について。 参考記事 iOS Development Guide: Unit-Test Result Macro Reference STFail 無条件でテスト失敗。 STFail(@"失敗時に表示されるメッセージ"); STAssertEqualObjects オブジェクトAとオブジェクトBが等しくないと失敗。等しいかどうかはNSObjectプロトコルで定義されるisEqual:での結果で判定される。 STAssertEqualObjects(objectA, objectB, @"失敗時に表示されるメッセージ"); STAssertEquals 2値が等しいかどうか。 STAssertEquals(valueA, valueB, @"失敗時に表示されるメッセージ"); STAssertEqualsWithAccuracy 2値の差が指定
touchstartのeventオブジェクト † 以下で出力。 div.addEventListener("touchstart", function(event){ var a=[]; for(var i in event)a.push("event["+i+"] = "+event[i]); a.sort(); console.log(a.join("\n")); }, false); layerX, layerYはtargetのleft, topかも(未検証)。 event[AT_TARGET] = 2 event[BLUR] = 8192 event[BUBBLING_PHASE] = 3 event[CAPTURING_PHASE] = 1 event[CHANGE] = 32768 event[CLICK] = 64 event[DBLCLICK] = 128 event[DR
サニタイズ用ヘルパークラス † とりあえずHTMLサニタイジングのみ。 package org.l4l.string.util; public class Sanitizer { static public String htmlSanitize( String string ) { if(string==null)return ""; string = string.replaceAll("&" , "&" ); string = string.replaceAll("<" , "<" ); string = string.replaceAll(">" , ">" ); string = string.replaceAll("\"", """); string = string.replaceAll("'" , "'" ); return string; } static public
外部キーの簡単な例 † 親テーブルをcategory_tbl、子テーブルをitem_tblとし、子テーブルのcategory_idを外部キーとする。 ↑ テーブル定義 † MyISAMは外部キーに対応してないのでInnoDBを指定。 mysql> CREATE TABLE category_tbl( -> category_id INT PRIMARY KEY AUTO_INCREMENT, -> category_name VARCHAR(50) -> )ENGINE=InnoDB; Query OK, 0 rows affected (0.07 sec) mysql> CREATE TABLE item_tbl( -> item_id INT PRIMARY KEY AUTO_INCREMENT, -> item_name VARCHAR(50), -> category_id INT
超基本 † テーブル名...test_table、属性...id(primary_key),name CREATE TABLE test_table ( id CHAR(3) PRIMARY KEY, name CHAR(50) ); ↑ 構文 † CREATE [TEMPORARY] TABLE [IF NOT EXISTS] テーブル名 [(create_definition,...)] [table_options] [select_statement] ↑ NULL値の許可/不許可:NULL、NOT NULL † NULL値を許すかどうか。NULLもしくは指定しない場合はNULL値を許す。この指定はテーブル属性出力時に確認できる。 mysql> CREATE TABLE null_test_tbl( -> allow_null INT, -> allow_null2 INT NUL
画像読み込み † [Embed]を使用 [Embed(source="assets/button_over.png")] private var button_over_png:Class; private var button_over:BitmapAsset = new button_over_png(); ↑
Selectors APIとは? CSSセレクターでDOM要素にアクセスできるAPI。getElementByIdやgetElementsByTagNameがパワーアップしたもんだと思えばおk。 Selectors API Level 1 ちなみにLevel 2っていう仕様も策定されているが、現時点で実装しているブラウザはなし。 実装ブラウザ IE8+, Firefox3+, Chrome1+, Opera9.5+, Safari3.1+ ただしIEでは疑似要素まわりなどで一部使用できないセレクタがあり。 インターフェース var selectorString = "#hoge"; var elm = document.querySelector(selectorString); var selectorString = ".bar"; var nodeList = document.qu
バグ? よくポータルサイトなんかに表示されているレクタングル広告がiframeなんかで呼ばれますが、複数iframeが存在する場合でFirefox閲覧時にそれらのiframeのコンテンツが入れ替わることがあります。んでその再現コードを書いてみた。 iframeが入れ替わる <script type="text/javascript"> if((Math.random()*2)|0)document.write('<iframe src="http://www.google.co.jp/" frameborder="0" scrolling="no"></iframe>'); </script> <iframe src="http://www.yahoo.co.jp/" frameborder="0" scrolling="no"></iframe> 1つ目のiframeはGoogle、表
Cross-Origin Resource Sharingって何? XMLHttpRequest Level 2で実装されてるXHRでクロスドメイン通信を行う仕様。 via http://www.w3.org/TR/access-control/ http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/ 仕様としてはrequest headerおよびresponse headerに特定の情報を付与してクロスドメインなリソースアクセスの範囲を定義するようなもの。Flashで言えばcrossdomain.xmlみたいなもんやね。 ちなみにIE8ではxhr自体にXMLHttpRequest Level 2相当の実装はなされていないが、XDomainRequestって
簡単なサンプル † #!/usr/bin/perl use strict; use warnings; use DBI; my $db = DBI->connect('DBI:mysql:testDB:localhost','user','passwd'); my $sth = $db->prepare("select * from testTable"); $sth->execute; my $num_rows = $sth->rows; print "rows::$num_rows\n"; for(my $i=0;$i<$num_rows;$i++){ my @a = $sth->fetchrow_array; print "$a[0], $a[1], $a[2]\n"; } $sth->finish; $db->disconnect; ↑ prepared statement † #
テーブル作成時 † mysql> CREATE TABLE index_test_tbl1( -> id INT PRIMARY KEY AUTO_INCREMENT, -> name CHAR(50), -> INDEX idx(id) -> ); ↑ 既存テーブルにインデックスを追加 † CREATE INDEX インデックス名 ON テーブル名(フィールド名); mysql> CREATE TABLE index_test_tbl2( -> id INT PRIMARY KEY AUTO_INCREMENT, -> name CHAR(50) -> ); Query OK, 0 rows affected (0.01 sec) mysql> CREATE INDEX idx ON index_test_tbl2(id); Query OK, 0 rows affected (0.04
via livedocs † Sprite クラスは、表示リストの基本的要素です。つまり、グラフィックを 表示でき、子を持つこともできる表示リストノードです。 Sprite オブジェクトはムービークリップと似ていますが、タイムラインを 持ちません。Sprite は、タイムラインを必要としないオブジェクトに適した 基本クラスです。例えば、Sprite は、通常はタイムラインを使用しない ユーザーインターフェイス(UI)コンポーネントの論理基本クラスになります。 Sprite クラスは、ActionScript 3.0 での新しいクラスです。これは MovieClip クラスの代替機能を提供します。また、以前のリリースの ActionScript のすべての機能を維持しているので後方互換性があります。 ↑ これまでのMovie Clipクラスとの違い † 大きくは「タイムラインを持たない」この
あるOperationのINパラメータについて知りたい時 † HelpType=Operation 指定できるResponseGroupも確認できる。 http://ecs.amazonaws.jp/onca/xml? Service=AWSECommerceService& AWSAccessKeyId=[AWSAccessKeyID]& Operation=Help& HelpType=Operation& About=CartAdd サンプル ↑ あるResponseGroupの戻りパラメータを知りたい時 † HelpType=ResponseGroup 指定できるOperationの逆引きも出来る。 http://ecs.amazonaws.jp/onca/xml? Service=AWSECommerceService& AWSAccessKeyId=[AWSAccessKeyI
次のページ
このページを最初にブックマークしてみませんか?
『kozy.heteml.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く