※当blogの英語学習に関する記事の一覧はこちらです(随時更新しています)。できれば今月中、遅くとも来月中には約二年振りに英語学習を再開する予定です。blogで報告しなくとも勝手に始めればいいと言われればその通りなのですが、2008年に英語の勉強を始めるときにblogで宣言したので、それに倣って今回も。ちなみに、英語学習開始を宣言したのが四年前の今日でした。あと、英語学習系の情報目当てでこのblogを訪れている方がありがたいことにたくさんいるので、その方々向けの宣言でもあります。できるだけ情報を共有していこうと考えていますので、たまにblogを覗いていただけると幸いです。どんな感じで学習を進めるかはこれから考えます!!楽しく勉強していこうっと。カテゴリ:JavaScriptタイトルの通りです。興味を持ちましたのでKnockout.jsを使ってみました。要はMVVMフレームワーク(MVVMについてはWikipediaをご参照)。端的に言ってしまうとインタラクティブな仕組みをJavaScriptで実現するためのライブラリです。どこかで値が変わったときにそれを他の箇所でも自動で反映するということが容易にできます。使ってみましたが、本当に便利です。jQueryと一緒でなくてはならない存在になりそう。Safari主要ブラウザは網羅しています。使うために必要なライブラリ:他のライブラリ(jQuery等)との依存関係はありません。licenseにて配布されています。公式サイト以外に以下の二箇所でも配布されています(現在の最新バージョン2.1.0のURLです)。http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.jsチュートリアルの紹介これからKnockout.jsがどんなものか、サンプルコードを元にしてさわりだけですが紹介していこうと思います。内容としては、公式ページのチュートリアルのIntroductionを少しいじったぐらいの感じです。よくできたチュートリアルなので、英語に抵抗がなければぜひどうぞ。以下、公式ページチュートリアル各章へのリンクです。data準備まず、HTMLのhead内にてknockout.jsを読み込みます。src='js/knockout-2.1.0.js'></script>私は一緒にjQueryも読み込んでおきました。現時点ではファイル読み込み完了の検知のためぐらいにしか使っていないですが。src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>また、自分でJavaScriptのコードを書くファイルも準備。私はdatabind.jsとしてjsフォルダに入れました。src='js/databind.js'></script>お試しその1まずはこちらのページを開いてみてください(同窓です)。textと表示されています。この文字はHTMLではなく、JavaScriptにて記述しています。以下、実際のコードです。data-bind="text:sample"></span>data-bindという属性がKnockout.jsを使っていく上での鍵となります。ちなみに、データバインド(あるいはデータバインディング)とはデータ結合を意味します。今回の場合、このspanはtext形式のsampleという名前、であることを記述しています。続きましてJavaScript側です。TestViewModel());});まず、TestViewModelと名付けられたファンクションが、実際の処理を行う部分です。text"という文字列を代入しています。sampleというのはHTML側でspanに指定した名前です。TestViewModel());はデータバインドの適用を意味します。要は上で指定したファンクションlが機能するための定義部みたいなもの。ko.applyBindingsというコマンドは今後常に出てきます。これだけだとなにがすごいのかわからないですよね。なんか回りくどいコードを書いて一行表示しただけ。いうことで、次のお試しその2を見てください。※お試しその1のコード一式はこちらですお試しその2続きましてこちらのページを開いてみてください(同窓です)。Nakanoと書かれています。入力欄の内容を変更しますと、それに合わせて自動で下の文章も変わることがわかります。Akiyamaと表示されます。コードを見てみましょう。data-bind="text:sample_add"></span>inputにはvalue形式でsampleという名前が、spanにはtext形式でsample_addという名前を指定しています。続きましてJavaScript側です。TestViewModel());});お試しその1と似ていますが、違う点が二つあります。一つ目が、sampleがobservable指定されていること。これは、sampleを監視対象にすることを意味します。sampleの値が変わったことをJavaScript側で検知できます。次に二つ目としまして、sample_addにcomputed時の動作が記述されています。sampleにて指定した値が表示されるようになっています。computedは、observableで指定した値の変化を検知し、処理を実行するという関数です。sampleの値が変化するとこの関数が呼び出され、sample_addの表示内容が変わります。数行のコードでインタラクティブな仕組みを可能とするのがKnockout.jsのすごいところです。※お試しその2のコード一式はこちらですお試しその3では最後にこちらのページを開いてみてください(同窓です)。お試しその2に消去というボタンをつけたものです。このボタンを押すと、入力欄もその下の出力欄も、値が消えます。HTMLのコードです。data-bind="click:clearButton">消去</button>新たにbuttonが追記されています。data-bindeはclick:clearButtonです。これはclickした際にclearButtonを呼び出すことを意味します。続きましてJavaScript側のコードです。TestViewModel());});this.clearButtonにて、this.sampleを空にしています。this.sample_addはthis.sampleを監視しているため、新たになにも記述しなくても勝手に内容が変わってくれます。トリガはclickの他にも以下のようなものが用意されています。eventsubmitenabledisablevaluehasfocuscheckedoptionsselectedOptionsuniqueName※お試しその3のコード一式はこちらです最後に今回はKnockout.jsがどんなものなのか、とりあえずさわりだけ紹介してみました。便利さの片鱗は伝わったのではないかなと。Masonryはfloatブロック配置用のjQueryプラグインです。ブラウザの幅によって配置した要素がアニメーション付きで綺麗に並び変わります。これを活用すればレスポンシブなWebサイトが制作しやすくなるかも?ということで早速使ってみましたので、以下、そのまとめです!ちなみに、最終的にはこうなります。※レスポンシブデザイン(レスポンシブWebデザイン)とは、単一のHTMLで様々なディスプレイサイズの各端末で最適化表示をする手法です。licenseにて配布されています。現在のバージョンは2.1.05です。お試しその1アニメーション抜きでとりあえず配置してみました。スクリーンショットこちらで実際の動作が見られます(アニメーション設定していないですが、ブラウザサイズによる配置は確認できます)。HTML長いですが、JavaScriptファイル、CSSファイルの読み込みと適当なdivの配置のみです。--></body></html>CSSfloatの指定を忘れずにしてください。220});});ここまでのコード一式はこちら。オプション項目については後述しますが、columnWidthは列幅です。この数値によって配置を計算しています。columnWidthが240pxでその中のdivのwidthが100pxだったりすると、不自然な余白が140pxできてしまいます。画像ロード完了した後でMasonryを動作させたい場合は、imageLoadedというメソッドを指定します。以下、その際のサンプルコードです。240});});お試しその2上と同じものにアニメーションを指定してみました。ブラウザの横幅を変えるとアニメーションと共に配置が変更されます。HTML変更なしCSS変更なしJavaScriptisAnimatedにてtrueを、animationOptionsにてdurationとして600を指定しています。前者はアニメーション可否、後者はアニメーションの時間(m秒)を意味します。オプションについては本記事の最後に一覧をつけています。600}});});このお試しのコード一式はこちら。お試しその3各divの横幅をばらばらにしてみました。スクリーンショットHTML(body要素のみ抜粋)長いですが、同じようなdivを繰り返し書いているだけです。class="item">せせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせせ</div></div>CSS.item{width:420px;margin:10px;float:left;background-color:#ccffcc;color:#333333;}.small{width:200px;}.big{width:640px;}JavaScript変更なしこのお試しのコード一式はこちら。お試しその4ちょっときれいに配置してみるとこんな感じです。スクリーンショットHTML(body要素のみ抜粋)長いですが、同じようなdivを繰り返し書いているだけです。small">15</div></div>CSS.item{width:420px;height:330px;margin:10px;float:left;background-color:#ccffcc;color:#333333;}.small{width:200px;height:330px;}.big{width:420px;height:450px;}JavaScript変更なしこのお試しのコード一式はこちら。お試しその5全体を中央に持ってくるとこんな感じです。HTML変更なしCSS以下を追加しました。trueを追加しました。600}});});このお試しのコード一式はこちら。オプション以下のようなオプションが用意されています。itemSelectorとcolumnWidthは推奨項目ですので設定しましょう。animationOptionsアニメーションオプション指定。columnWidth一列の幅。containerStylecontainerがrelativeかabsoluteか。gutterWidth列と列の間にさらにつける間隔値です。isAnimatedレイアウト変更時のアニメーション可否。デフォルトはfalseです。isFitWidthcontainerのサイズを列幅に合わせて変更するかどうか。demoを見ると早いです。デフォルトはfalseです。isResizableブラウザのウィンドウサイズが変わったときにリサイズするか。デフォルトはtrueです。isRTL右から左に視線を動かすようなレイアウト対応にするか。これもdemoを見ると早いです。デフォルトはfalseです。itemSelector処理対象となる要素(#containerの中の.itemが並び変わるなら、.item)メソッド以下のようなメソッドが用意されています。appended新たな要素を追加します。画面スクロールに合わせての要素追加にも対応。destroyMasonryを削除し、元の状態に戻します。layoutレイアウトを特定要素に反映します。optionオプションをセットします。reloadリロード命令です。要素を挿入した際に使うと便利です(挿入はそれより後ろの要素も並べ替えとなるから、そのときに)。reloadItemsreloadと同じで再構成のようですが、私の方で違いをまだ試していません。remove特定の要素を削除します。アニメーションanimationについてさらに詳しくはこちらを参照。CSS3について、CSS3対応していないブラウザについて等も書かれています。Masonry、ぜひ試してみてくださいませレスポンシブデザインは使いどころが難しく、制作陣の自己満足みたいになってしまうこともあるでしょうから、そこはご注意を。カテゴリ:iPhoneアプリあまりにも今さら過ぎる内容ですが、自分用のメモ。iPhone、iPadアプリ開発で使うXcode。コード部分に以下を記述すると、それがファンクションメニューに反映されます。Editorをどうぞ。ここから先は表示例と記述例です。MARK:以下はただそのまま表示されるだけですが。function-(void)function2{}-が入ることでファンクションメニューに線(セパレーター)が引かれます。function-(void)function2{}MARK:って文字は表示されないと記憶していたのだけれど、試してみたら表示される。カテゴリ:iPhoneアプリXcodeでのiOSアプリ(iPhoneアプリ/iPadアプリ)開発において、StoryBoard(Xcode4.2の新機能である、画面UIの簡単実装)で画面遷移させたいときの方法まとめです。前半は画面遷移そのもの、後半は画面遷移時の値の受け渡しについて書いています。可能な限りシンプルに余計なことは書かないようにというモットーでありながらも、デリゲートとかボタンアクションとかのiPhoneアプリ開発で必須となる知識も一緒におまとめのお得記事!XCodeのバージョンは4.4.1でやっていますが、他のバージョンでもほとんど差異はないかと思います(現時点においては)。画面遷移にせよ値の受け渡しにせよ、方法は幾通りもあります本記事はその一例となりますことはご了承くださいませ。理屈はいいからコードくださいって方はGitHubよりどうぞ(右側のDownloadsを押すと一式ダウンロードできます)。下準備まずはFile→New→Projectで新規プロジェクトを作ります。Applicationを選択。NameはsegueSampleとしました。DevicesはiPhoneで。他のデバイスでも手順は変わりません。Storyboardのチェックを入れるのを忘れずに。Countingはデフォルトのままチェックを入れておきました。Counting(ARC)はオブジェクトの管理をOSに任せてしまう機能です。retainやreleaseを記述しなくてよくなります。これもXcode4.2から追加されました。ARC使っても使わなくても本記事の本質そのものに変わりはありませんが、もしもARCを使わない場合、記述が変わります。プロジェクトを生成すると、segueSampleフォルダの中に五つのファイルがあります。AppDelegate.h、AppDelegate.m、MainStoryboard.storyboard、ViewController.h、ViewController.mの五つです。AppDelegate.h、AppDelegate.mはアプリ全体に関わる処理を受け取るためのクラスです。アプリが起動したときとか、バックグラウンドに移行したときとか。MainStoryboard.storyboardが画面構成を記述するファイルです。これが今回の肝であるStoryBoard。選択してみると↓のように表示されます。ViewControllerって名前がついたものが一つだけあります。これがiPhoneで表示される初期画面になります。(正確には画面に表示されるものはViewで、ViewControllerはそれの管理)まだなにもしていないので真っ白です。ViewController.h、ViewController.mはこのViewControllerについてコードを記述するファイルになります。.hが定義を書くファイル、.mが実装を書くファイルです。外向きが.h、内向きが.m、みたいな言い方もできるのですが、このあたりの細かい説明は省きます。iPhoneアプリ開発では、用意されているオブジェクトに手を加えるためには、この名前が同じで拡張子が異なるhとmの一対のファイルを新たに作っていくことになります。Applicationの場合、初期画面に関するクラス(ViewController.hとViewController.m)は自動で作られます。StoryBoardに二つ目の画面を置いてみます。Controllerをドラッグアンドドロップすると上記画像のようになります。位置はご自由にどうぞ。Buttonをドラッグアンドドロップしてください。わかりやすくするため、ボタンをダブルクリックして「遷移」と書いておきました。controlを押しながら今置いたボタンをクリックし、そのままマウスカーソルを二つ目の画面に引っ張るとボタンクリック→画面遷移という流れが実現できるのですが、今回はこの手は使いません。ボタンクリック以外での画面遷移にも今後対応できるよう、ちょっと遠回りですがボタンクリック→それを検知→画面遷移というステップを踏むことにします。Controllerのアイコンをcontrolを押しながらクリックし、そのままマウスカーソルを二つ目の画面に引っ張ってください。すると上の画像のように線が伸びます。マウスから指を離すと"Push"、"Modal"、"Custom"のいずれかを選ぶようにポップアップが出ます。今回はModalを選択します。(元画面の上に新画面を表示する方式)上の画像のように一つ目の画面から二つ目の画面に矢印が描かれます。この矢印をクリックして、Identiferのところに画面遷移の名称を書きます。私はmySegueとしました。他の名称にするときは、以降のコードでもそれに合わせてください。Nameにも出てきましたSegueという単語は切れ目なく移行するという意味です。iPhoneアプリ開発では画面遷移をSegueと呼びます。Editorにすると、Xcode上に二つの作業領域が表示されます。左側はStoryBoardのまま、右側でViewController.hを表示します。UIViewControllerの下まで引っ張ってください。ConnectionでActionを選んで、NameにpushBtnと入れ、Connectを押します。このNameは、ボタンをタップした際に呼び出されるメソッド名となります。他の名称でも構いません。(IBAction)pushBtn:(id)senderというメソッドが記述されました。ボタンを押すとこのメソッドが呼び出されます。次にViewController.mを開きます。(IBAction)pushBtn:(id)senderというメソッドが記述されています。hに書き込まれたのが定義、mに書き込まれるのが処理です。このmの側でメソッドになにをさせるかを書くことになります。上の画像のように一行追加してください。追加したコードは下記。sender:self];self(つまり自分)がmySegue(さっき自分でつけた名前)を使って遷移しますという意味の処理です。画面遷移が複数あるときも、Identifierで分岐可能です。これで一つ目の画面から二つ目の画面への遷移は完成です!二つ目の画面を閉じる次に、二つ目の画面を閉じて一つ目の画面に戻る処理を書きます。左側にあるProjectNavigaterでメニューを表示してNewFileを選択。名前は二画面目ってことで、SecondViewControllerとしました。ofはUIViewControllerにしてください。こちらは自由ではありません。これでUIViewControllerを継承したSecondViewControllerというクラスが作られます。継承というのはクラスの内容を受け継ぐことです。SecondViewController.hとSecondViewController.m。StoryBoardを表示して二つ目の画面を選択し、ClassをSecondViewControllerにしてください。これでこの画面はSecondViewControllerのインスタンス(クラスを元としたデータ)となります。Buttonをドラッグアンドドロップしてください。一つ目の画面のときと同じです。こちらはボタンを「閉じる」としました。左側にStoryBoard、右側にSecondViewControllerを映します。UIViewControllerの下まで引っ張っります。一つ目の画面と同じ手順です。ConnectionでActionを選んで、NameにpushBtnと入れ、Connectを押します。これも一つ目の画面のときと同じ。SecondViewController.mを開き、pushBtnメソッドの中にコードを書きます。dismissModalViewControllerAnimated:YES];dismissModalViewControllerAnimatedはmodalで表示した画面を閉じるメソッドです。画面遷移はこれで完成です!一つ目の画面と二つ目の画面がしっかり遷移します。myValue;の二行を追加します。myValue;追加した一つ目は_myValueという名の文字列インスタンスを宣言しています。二つ目はmyValueという名の文字列のプロパティを宣言しています。プロパティとは、端的に言えばクラスを外部から扱いやすく設定すること、です。説明すると本筋から離れすぎるので、詳しくは検索してください。_myValueとmyValueは別物なの?なんで_がついてるの?と思うかもしれません。後述するsynthesize文により、二つは結びつけられるようになります。結びつけるなら、なんで別の名前にするの?最初から同じにしておけばいいんじゃない?これはわざわざ_をつけることでどういう用途のものかを明示的にし、バグを防ぐためです。一つの文法マナーです。守らなくてもプログラムは動きます。詳しくは検索してみてください。ちなみに、つけるべきではないって人もけっこういます。_myValue;を追加します。この一文によって、myValueと_myValueが結びつけられます。myValueが変わると、_myValueも変わります。"SecondViewController.h"の一文を追加します。することによって、ViewControllerがSecondViewcontroller.hで定義されているものにアクセスできるようになります。"SecondViewController.h"この段階ではViewController.mの側に記述しても動作します。二つ目の画面から値を受け取るときのため、h側に書いておいてください。ViewController.hに書いた内容はViewController.mでもアクセスできます(mがhをimportしているため)。次に、ViewController.mに新たにprepareForSegueというメソッドを記述します。↓のコードをまるまるコピーアンドペーストしてください。@"test";}}prepareForSegueは画面遷移が行われる前に呼び出されるメソッドです。if文で画面遷移がmySegueかどうかをチェックしています。画面遷移が複数のときは、こう書くことで遷移先によって前処理を分岐できます。if文の中には、遷移先画面インスタンスの取得と、遷移先画面のmyValueへの値の設定をしています。myValueはさきほどSecondViewController.hにプロパティとして記述したものです。testという文字列にしたことに意味はありません。今回はNSString型にしていますが、他の型でもやり方は同様です。これで二つ目の画面の_myValueにtestという値がセットされました!SecondViewController.mのpushBtnの中にNSLogを書いてみました。_myValue);//渡された変数の表示これで閉じるボタンを押した際に値を確認できます。二つ目の画面から一つ目の画面へ値を渡すまず、デリゲートというものについて簡単に説明。デリゲートとは日本語で言うと委譲です。デリゲートを使うことによってインスタンスAで起きたことをインスタンスBで処理させるといったことができるようになります。なんかややこしいですが、基本的な記述ルールさえ覚えてしまえば機械的に対応できるようになります。今回は二つ目の画面が閉じるとき、それをデリゲートによって一つ目の画面に通知する。いう処理を組み込んでみます。SecondViewController.hです。追加されたのは三箇所。(void)finishView:(NSString*)returnValue;@endこれはSecondViewDelegateというデリゲート名でfinishViewというデリゲートメソッドを定義したことを意味します。NSStringを渡すという定義にしていますが、これは他の型でも変わりません。次に、↓の二つ、各一行。delegate;このdelegate(_delegate)が通知先を入れるためのインスタンスになります。通知先は、通知を受ける側でセットされます。今回の場合は一画面目であるViewControllerです。続きましてSecondViewController.mです。上の方(9行目)に↓のコードがあります。delegateと_delegateを結びつけています。_delegate;次に、pushBtnメソッドの中に以下の三行が追加されています。finishView:@"finish"];}if文において、通知先が存在しているかどうかを確認しています。その上で通知先のfinishViewメソッドを呼び、その際にfinishという文字列を渡しています。finishという文字列そのものに意味はありません。これで通知元であるSecondViewControllerの記述は完了です。次に、一つ目の画面である、ViewController.h。<SecondViewDelegate>という記述が加えられています。UIViewControllerこれはSecondViewDelegateを受けるという宣言です。"SecondViewController.h"の一文をmではなくhに書きました。mに書いてしまうと、hではこれが何者かわからないのです。最後に、ViewController.m。prepareForSegueの中に以下の一文が追加されています。self;delegateというのは先程SecondViewControllerで記述したプロパティです。このプロパティにself、つまり自らを入れることで、デリゲートの通知先になれます。実際に呼ばれるのが以下のメソッドです。returnValue);}finishViewもSecondViewControllerで先程記述しましたね。returnValueの中に、SecondViewControllerから渡される値(今回はfinish)が入っています。NSLogは受け取った値の確認用で入れておいたコードです。終わりかなり長文になってしまいましたが、その分だけ、画面遷移のみではなく、iPhoneアプリ開発で必要となる重要な要素をいくつも詰め込んだつもりです。最初にも書きましたがファイル一式はGitHubよりどうぞ(右側のDownloadsを押すと一式ダウンロードできます)。意見等ありましたら、Twitterででも気軽に声かけてください。青春B運営メンバー多口カタンによる雑記blogです。開発物をまとめたものはこちら。ありましたら気軽にフォームにてコンタクトくださいませ。Twitterはじめましたので誰でも気軽に声かけてくださいね。