Monthly Archives: March 2014

JavaScript:jQueryイージングの確認用アニメーションとサンプルコード一覧

おなじみeasingのカーブの名称と動きを忘れがちなので、アニメーションサンプルをjQuery日本語リファレンスを参考にみやすくまとめました。 サンプルコードを出力しているので、コピーペーストで即使用が可能です。コーディング時にお役立て下さい。 jQueryイージングのアニメーションサンプル カーブの名称 or バー をクリックすればアニメーションが確認できます。(最初の読み込みに多少時間がかかります) まとめ easeInElastic はどこで使用するのでしょうか(笑)一般的には easeInQuad、easeOutQuad、easeInOutQuad あたりがよく使われていると思います。 動きが楽しいからといってやりすぎにはには注意し、節度をもって使用すればUX向上に一役買ってくれると思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:スレッドについて(メインスレッド/バックグラウンドで実行する)

AVFoundationを使用したクラスからデリゲートで受け取った値を表示させるとき、謎の遅延が発生した。 そのときの解決策となった performSelectorOnMainThread や performSelectorInBackground についてのメモ。 メインスレッド/バックグラウンドで実行する メインスレッドで実行する バックグラウンドで実行する スレッドに関するいくつかの注意点 waitUntilDone:メソッドがメインスレッドで実行され終わるのを待つ UIKit のオブジェクトはメインスレッド以外からアクセスしてはいけない UI関連の機能はメインスレッドで実行する withObject で複数の引数をスレッドのメソッドに引き渡す withObjectで複数の引数を渡すためには複数の引数を渡すメソッドをオブジェクト(NSInvocation)として作成し引き渡す。 まとめ 何となく始めたObjective-Cも、スレッドを意識しなければいけなくなるまでになってきた。もっと頑張ろう。 今回はスレッドに関する断片的な内容ですが、時期を見て体系的にまとめられた記事にアップデートしていきたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:HTML5の標準機能!WebStorageの仕様と使い方

Webアプリケーション開発においてWebStorageを使用する機会があったので、使い方をメモしておきます。 とても便利な機能なので、アプリの設定等の保存に活躍するかと思います。 WebStorageについて 種類 以下の2つのストレージがありますが、データの永続性の違いだけで、どちらも使い方は同じです。今回は localStorage について説明したいと思います。 sessionStorage localStorage 対応するブラウザのバージョン IE7対応を強いられる方たちには申し訳ないですが、以下の表を見る限り、実用可能と考えて問題なのではないでしょうか。 IE Firefox Safari Chrome Opera Android iPhone 8.0〜 3.5〜 4.0〜 4.0〜 10.5〜 2.0〜 2.0〜 ストレージの容量 最大5MB 設定データの保存としては必要十分な容量だと思います。 WebStorageの使い方 使い方はとても簡単です。key,value を使用してストレージに保存していきます。 valueへはどんな型でも保存は可能ですが、最終的に保存されるデータは文字列となるので、getした値を文字列として使用しない場合はキャストが必要になります。 基本操作 データをセット(保存)する キーからデータをゲット(取得)する キーごとにデータを削除する すべてのキーと値を削除する ログ出力とセットにしたlocalStorageの関数も作成しました。 その他の使い方 キーのインデックス値でアクセスする キーを列挙する キーの長さを取得する localStorageのデータが保存されている場所(*) Safari /Users/User名/Library/Safari/LocalStorage/ Chrome /Users/User名/Library/Application Support/Google/Chrome/Default/Local Storage/ ※マシン環境は Mac OS X です まとめ WebStorage は HTML5で実装された標準機能ですが、実用レベルに耐えられる便利な機能だと思います。 W3C による HTML5 の勧告はもうすぐですが、HTML5 というワード自体は珍しいものでなくなりました。デファクトスタンダードだと判断できるのは、そのもの自体が騒がれなくなったときだということなのでしょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML5:CSS1からCSS3までの擬似クラス一覧

CSS3までの擬似クラスの一覧リストを作成しました。 HTML5/CSS3であればjQueryを使わなくても、ちょっとしたデザインやレイアウトなら実現できることが分かります。 CSS1からCSS3までの擬似クラス一覧 CSS1 擬似クラス ターゲット :link 未訪問のリンク :visited 訪問済みのリンク :active 訪問済みのリンク CSS2 擬似クラス ターゲット :hover カーソルが上に乗り、アクティブでない要素 :focus テキスト入力にフォーカスされている要素 :first-child ある親要素の最初の子要素 CSS3 擬似クラス ターゲット :last-child ある親要素の最後の子要素 :target フラグメント識別子を持ってるurlリンクでターゲット対象にされた要素 :enabled ある要素が有効なとき :disabled ある要素が無効なとき :checked ラジオボタン/チェックボックスがチェックされた状態のとき :indeterminate ラジオボタン/チェックボックスがチェックされてるかどうかが不確定の状態のとき :root ドキュメントルートの要素 :nth-child(n) 親要素のn番目の子要素 :nth-last-child(n) 親要素の最後から数えてn番目の子要素 :nth-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素 :nth-last-of-type(n) 親要素の中で兄弟関係にある同じ種類の要素の中の最後からn番目の要素 :first-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最初の要素 :last-of-type 親要素の中で兄弟関係にある同じ種類の要素の中の最後の要素 :only-child 兄弟を一つも持たずその親の唯一の子である要素 :only-of-type 同じ要素の兄弟が一つもない要素 :empty 子要素を一つも持たない要素 :contains() テキストの内容が与えられた部分文字列を含む要素 :not() 否定の要素 まとめ 一覧にしてみて面白かったことは、first-child は CSS2 で登場しているのに、last-child は CSS3 から採用されているということです。W3Cの標準策定も大変であることが伺えますね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:NSUserDefaultsの値を一括で出力・消去する

iOSアプリを開発する上で何かとお世話になる NSUserDefaults は、主にアプリの設定等の値を保存する事が多いかと思います。 ここでは個別に値を取り出し出力するのではなく、NSUserDefaults に保存されている全ての値を一括して出力する方法をメモしておきます。 NSUserDefaultsの値を出力する NSUserDefaults の全ての値を NSDictionary に代入し、NSDictionary を NSLog で出力します。 また、NSUserDefaults の全ての値を消去する方法も載せておきます。 NSUserDefaults を一括出力する NSUserDefaults を一括消去する まとめ NSUserDefaults はデータ永続化の手段として重宝しますが、アプリ設定以外のデータは CoreData 等を使用するようにしましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。