保存データを初期化したい際に、
NSUserDefaultsを全削除する方法です。
ひとつのキーの値を削除するコードも念の為に追記。
use with Gist Search
Objective-Cの場合
use with Gist Search
2015/04/06
2014/12/24
AngularJs ✕ Firebaseで爆速リアルタイムアプリケーションの作成
AngularJs ✕ Firebaseで爆速リアルタイムアプリケーションの作成
Firebaseとは
いわゆるモバイルBassでWebアプリケーション、モバイル・アプリケーションの開発者向けにリアルタイムにスケーラブルなバックエンドサービスを提供しています。つい最近(今年10月)、Googleに買収されています。
一定の転送量、接続数、容量は無料で、クレジットなしで使用できます。
Baasとして有名なParseは、Facebookに買収されていますし、
FirebaseもGoogleがつい先日買収と、もはやBaasの2大巨塔ですね、この2つは。
AngularFire
そして、AngularJsからFirebaseを利用できる、AngularFireというAPIも公開されていますので、
バックエンドのコードを書く必要も、サーバも必要なく、
必要な作業に集中できます。
AngularFireのAPIを利用することで、
Angularjsのモデルが自動的に同期され、Firebase上でリアルタイムにデータバインディングされます。
これでhtml側でのview, Angularjsでのmodel, firebaseでストアされたjsonのデータの3wayデータバインディングが可能となります。
サンプル:チャットアプリ
100行以内で簡単チャットアプリが作成できます。
var ref = new Firebase("https://<your-firebase>.firebaseio.com/");
上記の箇所をfirebaseにサインアップして、URLを書き換えてください。
Firebaseにストアされたデータにindexをはる方法
設定で、json形式でkey,rulesの中に.indexOnを記述するだけ詳細はこちら
https://www.firebase.com/docs/security/guide/indexing-data.html
Firebaseにストアされたデータのセキュリティに関して
jsonでのセキュリティルールの設定が可能。認証されたユーザがどのようにデータを変更できるかを決める。
データの転送はSSL経由。
さらなる詳細はこちら
https://www.firebase.com/docs/security/
AngularFireの使用アプリ
好きなアーティストの音楽をランキング順の聴くことができるサービスです。Recentの箇所をfirebaseでストアしています。
Lamusica
http://manchan.github.io/lamusica/
githubはこちら
https://github.com/manchan/lamusica
AngularFireのドキュメントはこちら
https://www.firebase.com/docs/web/libraries/angular/index.html2014/12/22
iOS 8 todays widgetの作成
iOS 8 今日のウィジェットの作成
今回はiPhoneで今日のウィジェットを表示させるアプリのサンプルを作ります。
iOS8 からの新機能、 Today ウィジェット、通知センターの左側に表示されます。
はじめにウィジェットの概念について。
既存のアプリに付属する拡張のようなものです。
ウィジェット単体では申請できません。既存のアプリに追加する形となります。
既存のアプリにエクステンションを追加するイメージ
あくまで、アプリに内包されて配布するものです。
以下、簡素化したステップ
1. 新規アプリ開発、Single View Applicationで言語はObjective-cを選択。
2. File > New > Target にて Application ExtensionにてToday Extensionを選択
3. Product NameをWidgetと入力、finishを選択したあと、Scheme追加ダイアログが出て、activateを選択。
4. TargetのWidgetを確認すると、Link Binary With LibrariesにNotificationCenter.frameworkが入っていることを確認。
5. デフォルトでビルド実行すると、ノティフィケーションセンター左の今日のウィジェットを確認すると、アプリ名の中に"Hello World”を確認。
6. ウィジェットで表示されるアプリ名の変更はinfo.plistのBundle display nameを変更
7. MainInterface.storyboardにて、label, progress viewを追加
8. Constraintsを追加。それぞれの制約を設定、詳細は以下github。
9. ビルドして実行、確認。※ビルドターゲットはエクステンションの方を選択
10. リアルなデータを結びつける。
11. labelとprogress viewをアウトレット接続する,propertyの追加
12. システムサイズとフリー、ユーズドのサイズを測定するメソッドを定義
13. それらをnsuserdefaultでキャッシュする。
14. そしてそれらをUIに表示、更新する
15. 値に更新があった場合のメソッドを定義 ビルド実行で確認。値の再計算メソッド。
16. もっと情報を表示させる。まずUIの変更、それぞれの高さを設定。
17. 詳細ラベルの更新。
18. タッチの検出と値の更新。
19. アニメーションの追加。
20. ビルド実行で確認
ソースはこちら
参考: iOS 8: Creating a Today Widget
2014/11/25
AppleWatch Tutorial
AppleWatch
https://www.apple.com/jp/watch/features/
ついに最近、デベロッパー向けにwatchkitが発表されました。
AppleWatchアプリのチュートリアルで、
今回は絵文字を拡大表示させるサンプルをやります。
以下、簡素化した20のステップ。
ソースはこちらです。
https://gist.github.com/manchan/1e9cfae322f87583a2f7
上記動画を参考にしています。
以下ソースです。
次回はglanceやnotificationのサンプルを作りたいと思います。
AppleWatchのお仕事お待ちしております!
https://www.apple.com/jp/watch/features/
ついに最近、デベロッパー向けにwatchkitが発表されました。
AppleWatchアプリのチュートリアルで、
今回は絵文字を拡大表示させるサンプルをやります。
以下、簡素化した20のステップ。
ソースはこちらです。
https://gist.github.com/manchan/1e9cfae322f87583a2f7
- 新規プロジェクトのシングルページアプリケーションで作成。言語はswift
- プロジェクトパネル、General > Targets > Add Targetにより、iOS > Apple Watch > Watch Appを選択
- Watchkit extensionとWatch appが追加される
- watchのデフォルトの画面をシミュレーターで確認する際は、「~Watch App」にターゲットを変更。デバイスはなんでもよい。
- ビルド実行でシミュレータが立ち上がるが、無視。
- シミュレータメニューのHardware > External Displays > Apple Watch - 38mm またはApple Watch - 42mmを選択し、再度ビルド実行、watch画面が立ち上がり確認可能。
- はじめにInterface.storyboardのInterface Controller Sceneにて, tableを追加、table内にlabelを追加
- tableをInterfaceController.swiftにnameをtableとしてoutlet接続
- 新規ファイルを追加より、EmojiRow.swiftを追加
- Interface.storyboard, Interface Controller SceneにてtableのクラスをEmojiRowに設定
- table内のlabelをEmojiRow.swiftにemojiRowLabelとしてoutlet接続
- ここまででtableのラベルの内容を定義してforループを回せば同じ内容が表示される。
詳細はInterfaceController.swiftを確認 - tableの要素をひとつ押した際に、詳細の画面に遷移させたいので、
新規ファイル,ZoomEmojiController.swiftを追加する。 - Storyboardにて、新規画面の追加をする、右サイドパネルよりInterface Controllerを追加する
- ClassをZoomEmojiControllerとし、ModuleはEmojiWatch_WatchKit_Extensionとする
- IdentifierをZoomEmojiControllerとする, これによりtableのひとつの要素を押した際に遷移するcontrollerの識別が可能となる。
- labelをふたつ追加し、それぞれ、zoomEmojiLabel、definitionLabelをZoomEmojiController.swiftにoutlet接続する
- tableの一要素押下の処理をdidSelectRowAtIndexより指定、
詳細はInterfaceController.swiftを確認 - ZoomEmojiController.swiftのコンストラクターメソッド内にて、
contextを受け取り、fontサイズなどを指定後、それぞれのlabelに代入する。 - ビルドして実行、シミュレーターにて、配列に定義した絵文字が拡大表示、テキストが表示されていればOK
Finish!
Apple Watch Tutorial - Learn How to Make a Simple Apple Watch App
http://vimeo.com/112249657上記動画を参考にしています。
以下ソースです。
次回はglanceやnotificationのサンプルを作りたいと思います。
AppleWatchのお仕事お待ちしております!
2014/11/21
Sprout by HP 新発想デスクトップPCがほしい
アメリカですでに発売しているPC、Sprout
HPの一体型デスクトップPCの新製品Sproutの紹介です。
日本発売は2015年からの発売のようです。
https://sprout.hp.com/
3Dスキャンとプロジェクターが一体となった、
マウス、キーボードなしのマルチタッチスクリーンとマット付きのWindowsPC Sprout.
Windows 8.1, 1TB of storage, and an Intel i7 processor, so it’s a regular powerful PC.
HP is launching its Sprout PC on November 9th for $1,899.99.
20万強、iMac 5Kよりか安い。
SDKも公開されています。
Sprout SDK
https://sprout.hp.com/developer/develop/download/
開発言語はC#, C++
デザインツール、DTPとしてはもちろん、
アニメーション、映画、音楽、本のスキャン、ゲーム、ピアノ、スクラップブック作成などのアプリがすでに用意されてあるようです。
デザイン会社はみんな買うでしょうね、教育機関にも最適かなー。
なんやかんやでキーボードは必要になるかと思うけど、オプションがあるとすれば、プロジェクターで投影するのかな?
あとスキャンする時に、プロジェクターの影は下のマットに映らないんだろうか。
NEW @HP Sprout PC with @Windows featuring 3D scanning and a projector! | HP® Official Site http://bit.ly/1tDrBqA
#sproutbyhp
2015年が待ち遠しい!
HPの一体型デスクトップPCの新製品Sproutの紹介です。
日本発売は2015年からの発売のようです。
https://sprout.hp.com/
3Dスキャンとプロジェクターが一体となった、
マウス、キーボードなしのマルチタッチスクリーンとマット付きのWindowsPC Sprout.
Windows 8.1, 1TB of storage, and an Intel i7 processor, so it’s a regular powerful PC.
HP is launching its Sprout PC on November 9th for $1,899.99.
20万強、iMac 5Kよりか安い。
SDKも公開されています。
Sprout SDK
https://sprout.hp.com/developer/develop/download/
開発言語はC#, C++
デザインツール、DTPとしてはもちろん、
アニメーション、映画、音楽、本のスキャン、ゲーム、ピアノ、スクラップブック作成などのアプリがすでに用意されてあるようです。
デザイン会社はみんな買うでしょうね、教育機関にも最適かなー。
なんやかんやでキーボードは必要になるかと思うけど、オプションがあるとすれば、プロジェクターで投影するのかな?
あとスキャンする時に、プロジェクターの影は下のマットに映らないんだろうか。
NEW @HP Sprout PC with @Windows featuring 3D scanning and a projector! | HP® Official Site http://bit.ly/1tDrBqA
#sproutbyhp
2015年が待ち遠しい!
2014/11/13
Wordpress 既存サイトのwordpress化
既存サイトをワードプレス化するにあたっての情報です。
なぜワードプレスを使用するか。
ブログなどをHTMLだけで管理している場合、
記事が増えた際に管理しにくくなってきますので、wordpressなどのCMSなどが便利です。
例えば、ブログ記事や、メディア記事などを時系列に、
同じようなデータ構造の内容を管理したい場合に最適です。
最近ではconcrete5という汎用的かつ高機能のCMSツールもあるようです。
wordpressはblogなどの紋切り型のコンテンツを管理したい場合に向いているかと思います。
今回説明する内容
・ワードプレスのインストール
・テーマの作成(テンプレートのレイアウト設定など、詳細は以下を確認してください)
・ページャーの設定
・/wpがwordpressページとなるようにリダイレクト設定
・その他、設定など、詳細は以下
あくまでも備忘録としての認識。
【実行環境】
phpバージョン5.2以上
MySQLバージョン5.0以上
【ワードプレス公式サイトよりインストール】
https://ja.wordpress.org/
ダウンロードより、wordpress 4.0をダウンロード
【ワードプレスのバージョン】
4.0
【ワードプレス、インストール箇所】
/wordpress/
既存のサイトを運用しているサイトにwordpressディレクトリをFTPなどでアップロードしてください。
その後ホスト/wordpressにアクセスし、DBの設定などを行う。
そして管理画面にログインする。
【新イベントページTOP】
/wp/
※リダイレクト設定により
wordpressのままでは長いのでwpに変更
【ワードプレス管理画面】
/wordpress/wp-admin/
【テーマの編集】
テーマとはワードプレスページのデザインのこと。
ワードプレス側にテーマを与えることによって、固定したページレイアウトとなる。
例えば大枠は、ヘッダー、左サイド、ボディ、ボディの記事部分、
フッターに分けています。
○テーマのCSSを編集したい場合は、
1.左サイドメニュー、外観 > テーマ編集を選択
2. style.cssの編集が「ファイルを更新」のボタンより可能
○テーマのレイアウトの説明
既存htmlをベースに以下に分割。
index.php(メインテンプレート)
header.php(共通ヘッダー,グローバルメニューなどの共通部分)
footer.php(共通フッター)
sidebar.php(左サイド、記事の部分)
single.php (単一記事の投稿用)
loop.php (記事一覧のループ箇所)
それぞれのページをテンプレート化することによって、
個別にphpで呼び出しています。
例えば、index.phpの場合、header部分の呼び出しには、
でヘッダー部分のソース、header.phpを読み込んでいます。
header.phpの中身を確認してみると、
ところどころにphpのタグがありますが、
meta, titleタグの部分など、WP用のタグに変更しています。
何を読み込んでいるのかの確認はこちら
日本語版wordpressチートシート
http://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet/
管理画面からテーマ編集をすることが面倒な場合は、
/wordpress/wp-content/themes/【テーマの名前】内をエディターで編集
【記事の投稿】
管理画面、ログイン後左サイドメニューの「投稿」
○新規投稿、編集、公開
HTMLの編集は新規投稿ページ内、タブにて、
ビジュアル、テキストがありますが、テキストを選択してください。
その後、プレビューして確認後、公開。
「続きを読む」を追加したい場合は以下のタグを入力することで、
表示されます。
<!--more—>
これは以下のボタンでも挿入可能です。
実態は.more-linkなので、
CSS変更したい場合はstyle.cssに追記してください。
※コメント欄を非表示にしたい場合はこちら
http://wp-exp.com/blog/comment-no-display/
○公開日の設定
デフォルトでは公開日が今日になるので、過去の記事を投稿したい場合は、
新規投稿ページ、すぐに公開するの右、編集リンクより、日付を操作
【記事のページング設定】
デフォルトで、記事3つでページングするようにしています。
ページングのデザインに関して変更したい場合は、cssの調整が必要
【左サイドのアーカイブリスト】
デフォルトで公開している記事があれば、
年月(記事数)を表示。
li要素にクラスを当てるために、
functions.phpにて、archiveのリンクにクラス当てをしています。
【もろもろの設定】
左サイド、設定より確認
メールアドレス、日付、時刻のフォーマットなど要確認
○メールでの投稿
メール投稿したい場合、メールサーバーの設定を行う。
○1ページに表示する最大投稿数の設定
設定 > 表示設定より、1ページに表示する最大投稿数に「3」を設定
ページングのCSSに関しては、style.cssを参照。
○設定 > ディスカッション設定により、
記事のコメントに関しての設定編集など
○設定 > 投稿設定 更新情報サービス
新しい投稿を公開すると、他の更新情報サービスに自動的に通知します。
通知するサイト(yahoo, google, fc2)などを追加。
以上、既存サイトのワードプレス化の説明です。
ワードプレスはカスタマイズすることで、もっといろいろできそうです。
以下のページが参考になるかと思います。
ワードプレス超初心者講座
http://wp-exp.com/
なぜワードプレスを使用するか。
ブログなどをHTMLだけで管理している場合、
記事が増えた際に管理しにくくなってきますので、wordpressなどのCMSなどが便利です。
例えば、ブログ記事や、メディア記事などを時系列に、
同じようなデータ構造の内容を管理したい場合に最適です。
最近ではconcrete5という汎用的かつ高機能のCMSツールもあるようです。
wordpressはblogなどの紋切り型のコンテンツを管理したい場合に向いているかと思います。
今回説明する内容
・ワードプレスのインストール
・テーマの作成(テンプレートのレイアウト設定など、詳細は以下を確認してください)
・ページャーの設定
・/wpがwordpressページとなるようにリダイレクト設定
・その他、設定など、詳細は以下
あくまでも備忘録としての認識。
【実行環境】
phpバージョン5.2以上
MySQLバージョン5.0以上
【ワードプレス公式サイトよりインストール】
https://ja.wordpress.org/
ダウンロードより、wordpress 4.0をダウンロード
【ワードプレスのバージョン】
4.0
【ワードプレス、インストール箇所】
/wordpress/
既存のサイトを運用しているサイトにwordpressディレクトリをFTPなどでアップロードしてください。
その後ホスト/wordpressにアクセスし、DBの設定などを行う。
そして管理画面にログインする。
【新イベントページTOP】
/wp/
※リダイレクト設定により
wordpressのままでは長いのでwpに変更
【ワードプレス管理画面】
/wordpress/wp-admin/
【テーマの編集】
テーマとはワードプレスページのデザインのこと。
ワードプレス側にテーマを与えることによって、固定したページレイアウトとなる。
例えば大枠は、ヘッダー、左サイド、ボディ、ボディの記事部分、
フッターに分けています。
○テーマのCSSを編集したい場合は、
1.左サイドメニュー、外観 > テーマ編集を選択
2. style.cssの編集が「ファイルを更新」のボタンより可能
○テーマのレイアウトの説明
既存htmlをベースに以下に分割。
index.php(メインテンプレート)
header.php(共通ヘッダー,グローバルメニューなどの共通部分)
footer.php(共通フッター)
sidebar.php(左サイド、記事の部分)
single.php (単一記事の投稿用)
loop.php (記事一覧のループ箇所)
それぞれのページをテンプレート化することによって、
個別にphpで呼び出しています。
例えば、index.phpの場合、header部分の呼び出しには、
でヘッダー部分のソース、header.phpを読み込んでいます。
header.phpの中身を確認してみると、
ところどころにphpのタグがありますが、
meta, titleタグの部分など、WP用のタグに変更しています。
何を読み込んでいるのかの確認はこちら
日本語版wordpressチートシート
http://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet/
管理画面からテーマ編集をすることが面倒な場合は、
/wordpress/wp-content/themes/【テーマの名前】内をエディターで編集
【記事の投稿】
管理画面、ログイン後左サイドメニューの「投稿」
○新規投稿、編集、公開
HTMLの編集は新規投稿ページ内、タブにて、
ビジュアル、テキストがありますが、テキストを選択してください。
その後、プレビューして確認後、公開。
「続きを読む」を追加したい場合は以下のタグを入力することで、
表示されます。
<!--more—>
これは以下のボタンでも挿入可能です。
実態は.more-linkなので、
CSS変更したい場合はstyle.cssに追記してください。
※コメント欄を非表示にしたい場合はこちら
http://wp-exp.com/blog/comment-no-display/
○公開日の設定
デフォルトでは公開日が今日になるので、過去の記事を投稿したい場合は、
新規投稿ページ、すぐに公開するの右、編集リンクより、日付を操作
【記事のページング設定】
デフォルトで、記事3つでページングするようにしています。
ページングのデザインに関して変更したい場合は、cssの調整が必要
【左サイドのアーカイブリスト】
デフォルトで公開している記事があれば、
年月(記事数)を表示。
li要素にクラスを当てるために、
functions.phpにて、archiveのリンクにクラス当てをしています。
【もろもろの設定】
左サイド、設定より確認
メールアドレス、日付、時刻のフォーマットなど要確認
○メールでの投稿
メール投稿したい場合、メールサーバーの設定を行う。
○1ページに表示する最大投稿数の設定
設定 > 表示設定より、1ページに表示する最大投稿数に「3」を設定
ページングのCSSに関しては、style.cssを参照。
○設定 > ディスカッション設定により、
記事のコメントに関しての設定編集など
○設定 > 投稿設定 更新情報サービス
新しい投稿を公開すると、他の更新情報サービスに自動的に通知します。
通知するサイト(yahoo, google, fc2)などを追加。
以上、既存サイトのワードプレス化の説明です。
ワードプレスはカスタマイズすることで、もっといろいろできそうです。
以下のページが参考になるかと思います。
ワードプレス超初心者講座
http://wp-exp.com/
2014/11/12
Underscore.js Practice
javascriptのライブラリ
jQueryにはDOMの操作をさせて、Underscore.jsには
配列やオブジェクトの操作をさせるのが、ベスト。
MV*フレームワークに(AngularJS, Backbone.js)と組み合わせるのがよい。
Backbone.jsは開発者が同じなので、underscore.jsと依存関係にある。
rubyライクな書き方ができる。
大量のデータを処理する際に楽、あくまで補助的なツール。
mapやfilterが便利。
バージョンは1.7.0です。
jQueryにはDOMの操作をさせて、Underscore.jsには
配列やオブジェクトの操作をさせるのが、ベスト。
MV*フレームワークに(AngularJS, Backbone.js)と組み合わせるのがよい。
Backbone.jsは開発者が同じなので、underscore.jsと依存関係にある。
rubyライクな書き方ができる。
大量のデータを処理する際に楽、あくまで補助的なツール。
mapやfilterが便利。
バージョンは1.7.0です。
登録:
投稿 (Atom)

