AppleWatch Tutorial

AppleWatch
https://www.apple.com/jp/watch/features/

ついに最近、デベロッパー向けにwatchkitが発表されました。
AppleWatchアプリのチュートリアルで、
今回は絵文字を拡大表示させるサンプルをやります。

以下、簡素化した20のステップ。
ソースはこちらです。
https://gist.github.com/manchan/1e9cfae322f87583a2f7

1. 新規プロジェクトのシングルページアプリケーションで作成。言語はswift
2. プロジェクトパネル、General > Targets > Add Targetにより、iOS > Apple Watch > Watch Appを選択
3. Watchkit extensionとWatch appが追加される
4. watchのデフォルトの画面をシミュレーターで確認する際は、「~Watch App」にターゲットを変更。デバイスはなんでもよい。
5. ビルド実行でシミュレータが立ち上がるが、無視。
6. シミュレータメニューのHardware > External Displays > Apple Watch - 38mm またはApple Watch - 42mmを選択し、再度ビルド実行、watch画面が立ち上がり確認可能。
7. はじめにInterface.storyboardのInterface Controller Sceneにて, tableを追加、table内にlabelを追加
8. tableをInterfaceController.swiftにnameをtableとしてoutlet接続
9. 新規ファイルを追加より、EmojiRow.swiftを追加
10. Interface.storyboard, Interface Controller SceneにてtableのクラスをEmojiRowに設定
11. table内のlabelをEmojiRow.swiftにemojiRowLabelとしてoutlet接続
12. ここまででtableのラベルの内容を定義してforループを回せば同じ内容が表示される。
    詳細はInterfaceController.swiftを確認
13. tableの要素をひとつ押した際に、詳細の画面に遷移させたいので、
    新規ファイル,ZoomEmojiController.swiftを追加する。
14. Storyboardにて、新規画面の追加をする、右サイドパネルよりInterface Controllerを追加する
15. ClassをZoomEmojiControllerとし、ModuleはEmojiWatch_WatchKit_Extensionとする
16. IdentifierをZoomEmojiControllerとする, これによりtableのひとつの要素を押した際に遷移するcontrollerの識別が可能となる。
17. labelをふたつ追加し、それぞれ、zoomEmojiLabel、definitionLabelをZoomEmojiController.swiftにoutlet接続する
18. tableの一要素押下の処理をdidSelectRowAtIndexより指定、
    詳細はInterfaceController.swiftを確認
19. ZoomEmojiController.swiftのコンストラクターメソッド内にて、
    contextを受け取り、fontサイズなどを指定後、それぞれのlabelに代入する。
20. ビルドして実行、シミュレーターにて、配列に定義した絵文字が拡大表示、テキストが表示されていればOK

Finish!

Apple Watch Tutorial - Learn How to Make a Simple Apple Watch App

http://vimeo.com/112249657

上記動画を参考にしています。

以下ソースです。






次回はglanceやnotificationのサンプルを作りたいと思います。
AppleWatchのお仕事お待ちしております！

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年が待ち遠しい！

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/

Underscore.js Practice

javascriptのライブラリ
jQueryにはDOMの操作をさせて、Underscore.jsには
配列やオブジェクトの操作をさせるのが、ベスト。

MV*フレームワークに（AngularJS, Backbone.js)と組み合わせるのがよい。
Backbone.jsは開発者が同じなので、underscore.jsと依存関係にある。

rubyライクな書き方ができる。
大量のデータを処理する際に楽、あくまで補助的なツール。
mapやfilterが便利。

バージョンは1.7.0です。

AngularJs, WebAPIをサービスでまとめる

AngularJsで複数のWeb APIを使用する時、
処理をまとめた関数を作成すれば便利

EventAtndというサービス名をfactoryを使って宣言、
ビジネスロジックはservice.jsにまとめ、使う際は複数のコントローラーから呼び出せる形。

例はatndのAPIでイベントを取得するサンプル