Anything New

2014/11/25

AppleWatch Tutorial

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

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

以下ソースです。

File: ZoomEmojiController.swift ------------------------- // // ZoomEmojiController.swift // EmojiWatch // // Created by matz on 2014/11/24. // Copyright (c) 2014年 matz. All rights reserved. // import UIKit import WatchKit class ZoomEmojiController: WKInterfaceController { @IBOutlet weak var zoomEmojiLabel: WKInterfaceLabel! @IBOutlet weak var definitionLabel: WKInterfaceLabel! override init(context: AnyObject?) { // Initialize variables here. super.init(context: context) var emoji:AnyObject = context! // Emoji Zoom size var font = UIFont.systemFontOfSize(90) var specialString = NSAttributedString(string: emoji[1] as String, attributes: [NSFontAttributeName:font]) self.zoomEmojiLabel.setAttributedText(specialString) var definition = emoji[0] as String self.definitionLabel.setText(definition) } }

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

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/

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です。

File: undescorejs-practice.html ------------------------- underscore.js practice Underscore.js practice see on console

2014/11/03

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

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

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

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

File: services.js ------------------------- // Atnd API GET app.factory('EventAtnd', function($http, EventConnpass) { var getEvent = function(query, callback){ $http.get('http://api.atnd.org/events/', { params : { keyword : query, count : 10, ym : "201411,201412", format : 'json', callback : 'JSON_CALLBACK' } }).success(function(data){ if(data.events){ atnd_events = data.events; callback(atnd_events); } }); } return {get : getEvent}; });

2014/10/31

AngularJs × YouTube API Sample

AngularJsの練習です。
LamusicaはAngularjsを使用していますが、
再度復習でやってみる。

今回はAngularJsでYouTube APIを叩いて、
検索し、取得した動画を一覧表示させるサンプルです。

jQueryでやるよりもかなり少ないコード量。30行足らず。
iframeを動的に埋め込む際にng-bind-htmlではそのまま利用できないので、
trustAsHtmlを利用しました。

SCEに関してはQiitaのこちらを参考にさせていただきました。
AngularJSのStrict Contextual Escapingって何だ？

ソースは以下です。

File: index.html ------------------------- AngularJs YouTube Search YouTube Search Results {{ result.title.$t }} ↑ 上から検索してください。

2014/10/30

AngularJs Practice1

AngularJsの練習です。
LamusicaはAngularjsを使用していますが、
再度復習でやってみる。
ドットインストールのAngularjs入門を参考にしています。
http://dotinstall.com/lessons/basic_angularjs

AngularjsとはjavascriptのMVCフレームワーク。
versionは1.2.0です。
詳細な説明については割愛しています。

以下、参考キーワード。

Directive

ディレクティブ（カスタムタグやカスタム属性）を埋め込むことでUI部品として利用できる。
【ng-app】
Angularアプリケーションとしての宣言、これによって、アプリケーションのルートとなるディレクティブ。
【ng-controller】
ビューにコントローラークラスを割り当て。
【$scope】
アプリケーションのモデルを参照するオブジェクト。
コントローラーとビューをつなげる糊の役割。

【ng-model】
【ng-bind】
双方向データバインディング用ディレクティブ

【ng-repeat】
コレクションから各項目のテンプレートをインスタンス化する。
ループ用。

Filter

|date
日付フォーマット用
|uppercase/lowercase
|currency
|date:'yyyy-MM-dd'

|limitTo:5
|orderBy:'score'|limitTo:5
|orderBy:'-score'

テキストフィルター
ng-model="query"

※要素指定
ng-model="query.name"
|filter:query

ng-repeat
{{ $index + 1 }} {{$first}} {{$middle}} {{$last}}
ng-repeat="user in users|filter:query" ng-class-even="'even'" ng-class-even="'odd'"

controller nest
click event
ng-click
button ng-click="increment()"
$scope.increment = function() {
$scope.user.score++;
}

------

Form

ng-submit
デバッグ表示

validation
novalidate
required
ng-minlength="5" ng-maxlength="8"
ng-show validation message
Required!

input type="number"
input type="email"
input type="url"
checkbox
radio
select/option

API Referenceはこちら

https://docs.angularjs.org/api

AngularJs ToDo List

最後はサンプル・アプリケーションです。

以下、サンプルコード。

File: index.html ------------------------- AngularJs practice Data Binding Your Name: Hello! {{ yourname }} Hello! Filter {{ 25* 500| number}} {{ 25* 500| currency:""}} {{ today| date:'yyyy-MM-dd h-mm-ss'}} Text filtering ng-repeat ng-click {{ users.length }} users. {{ $index + 1 }} {{$first}} {{$middle}} {{$last}} {{ user.name|uppercase }} {{ user.score|number:4 }} ng-submit Name: Required! Too Short! Too Long! Gender: male female Score: Email: Not valid email! Web Url: Not valid web url! 18+: Phone: iPhone Android {{140-user.memo.length}} Color: Debug {{user}} ToDo List Sample Finished Task: {{ getDoneCount() }} / {{ tasks.length }} {{ task.body }} [x]

登録: 投稿 (Atom)