パララックスをやってみた。
巷で話題（？）のパララックスの原理・仕組みを知りたくて、フルスクラッチで書いてみた。
まぁ、実際には他のサイトのDOMの動きを見ながら、必要そうなところだけ切り出した感じです。
文字について
positionをfixedにしておく。
windowのscrollイベントにて、スクロール量を取得（scrollTop）、
それに係数をかけ、leftに設定する。
画像について
文字のdivとは別に、positionがfixedなdivを用意する。
その中に、画像を複数並べておく。
今回は、下から上がってくるようにしたいので、普通に並べました。
あとは、スクロール位置（dy）によって、div要素のtopを変更する。
animateは連続で呼ぶと、ダメだったはずなので、毎回stopを呼んでます。
あと、上方向にスクロールされることも考え、そのスクロール量でどこにいて欲しいかを再設定しています。（23行目とか）
感想
- 思った以上にめんどい。
- このぐらいの操作で、同じような記述を何回も書くことになっているので、まじめにやるなら、ライブラリを使うor作る必要がありそう。
- それぞれの要素のwidth, height、変更後のtopがてきとーな値を固定しているので、ウィンドウのリサイズなどで変になる可能性あり。そこらへんも、まじめにやるのはめんどくさそう。
- 一般的に大きな画像を何枚も使うことになるので、読み込みが完了するまでは、ロード中画面とかを出しといた方がいいんだろうなー。
- チューニングしないと、動きが気持ち悪い。。。
見つけたライブラリ
jarallax
http://www.jarallax.com/Parallax.js
https://github.com/wagerfield/parallax
iOS端末実機で動作させるために証明書などを準備する
前提
手順
ログイン状態で https://developer.apple.com/account/ios/certificate/certificateList.action にアクセスし、右上の"+"を押す。
今回はテスト用なので、下記のように、Developmentの「iOS App Development」を選択した状態でContinueを押す。
下記の画面が表示される。
手順に従い、「キーチェーンアクセス」を起動し、メニューより「キーチェーンアクセス」->「証明書アシスタント」->「認証局に証明書を要求...」を選択する。
証明書アシスタントが起動されるので、Apple Developer Programに登録したApple IDのメールアドレスと通称（多分、なんでもよい。今回はローマ字で自分の名前を入れた）を入力し、 「ディスクに保存」を選択後、「続ける」を押す。
下記の画面が表示されるので、「完了」を押す。
「キーチェーンアクセス」での操作が終わったので、ブラウザに戻り、「Continue」を押す。
「Choose File...」を押し、先ほど出力した「CertificateSigningRequest.certSigningRequest」を選択する。 そして、「Generate」を押す。
「Download」ボタンを押し、「ios_development.cer」を保存する。 「Done」を押す。
下記のように、表示される。
Finderにて、ダウンロードした「ios_development.cer」をダブルクリックする。 「証明書の追加」が表示されるので、キーチェーンを「ログイン」にし、「追加」を押す。 （注：「システム」とどっちが正しいかわかりませんでしたが、「ログイン」にしている人がネット上にいたので、「ログイン」にしておきました。）
Xcode（バージョンは5.0）を開き、該当のプロジェクトを選択する。 「General」タブの「Term」が「None」になっているはずなので、「Add an Account...」を選択する。
Apple Developer Programの際に作成したApple IDとパスワードを入力し、「Add」を押す。
左側の「Apple IDs」に入力したApple IDが表示されているので、それを選択する。 右下の「iOS」の下に「Agent」と表示される。 （注：１度、間違えて左下の"-"を押して削除し、再度、XCodeから「Add an Account...」を選択しました。１回めで、「Agent」が出ていなかったような気もします。）
Xcodeに戻ると、「Term」の選択肢として、先ほど入力したApple IDが表示されるので、それを選択する。 その後、「Fix issue」を押すと、読み込みが始まるので、数分待つ。
「Fix issue」ボタンと警告文が消えるので、左上のプルダウンから、端末（XXXのiPod touchなど）を選択し、左側の再生ボタンを押す。
端末にインストールされ、アプリが実行出来ました。
感想
- 操作がちょーながい、めんどい
- 実機だからか、iOS7だからか、レイアウトがめちゃくちゃになってるorz
- 画像をたくさん使った記事を書くのはめんどい（求む：楽な方法）
- Markdown記法は楽
- iPod touchを開発用として登録する？デバイス登録？をした覚えがないけど、動いた
- あとは、PUSH通知用の証明書を作ってー、production用の証明書作ってー、そのPUSH通知の証明書つくってー、って感じ？めんどい
- 「Certificates, Identifiers & Profiles」になった？あとの記事があんまり無かった
- Xcode5での記事もあんまり無かった
宣伝
iOS用の詰め共円を作成中です。来月には公開できるかな、と思います。。。
Androidの方はGoogle Playからダウンロードしてください。
PCや、ブラウザでやりたい方は、こちらにて。
プログラミング生放送勉強会第25回＠品川に参加しました。
Windows ストア アプリケーションのUIデザイン
- UX
- ユーザビリティテスト
- マニュアルは読まれない前提でUIを作る
Modern Style
- Metroと呼ばれていたもの
- 10フィート離れたところからリモコンで操作出来るように
- 日本の地下鉄は複雑だけど、路線図を見れば、なんとなくわかる→Metro UI
Application Design
- タブレットのデザインは難しい
→広い、統一できない、まとまらない - コンテンツが最優先
そぎ落とす
- Crome（余計な装飾・今使わないメニュー）は要らない
- 左上は一番重要
→コンテンツを置くべき - RSSリーダーに、3つもペインは必要ない。人間は一度にそんなに情報を処理できない。
- 重複なアイコン→共通メニュー（アプリバー）
- ほんとうに、今、これが必要なのかを考えて作る
- デベロッパーはデザイナーの下僕です。
構造とリズム
- タイポグラフィ
- 非デザイナーがなんとなく作って、なんとなくかっこ悪いのはルールがないから
- フォントも4つに絞る（9pt, 11pt, 20pt, 42pt）
- 文字サイズを大きくすると、細いフォントを利用する
- グリッド
- 1unit = 20px x 20px
- 1sub unit = 5px x 5px
軽快に、滑らかに
- ビジュアルなフィードバック
- スプラッシュスクリーンの本当の意味は、起動にかかる時間をごまかすため
- 5mm なら、30回に1回ぐらいタップミスする
- 7mm なら、100回に1回ぐらいタップミスする（だいたい大丈夫）
デザインガイドラインをぜひ見てください（MSDNのUXパターン）
Leap Motion ではじめるNUIプログラミング
NUI概要
- Project Natal（のちのKINECT）
- 3D深度センサー・RGBカメラ・マルチアレイマイク
Leap Motion概要
- 様々な言語で開発可能
- デモアプリがかっこいい
C#によるLeap Motionプログラミング
- センサーの視界領域にある手や指を追跡
- Controller, Listener などのクラスが用意されている
- PUSH形式とPULL形式のデータ取得が可能
- ListenerのOnFrameでFrameを取得して操作する
- Gestureは4種類
- onFrameはすごい勢いで呼び出される（秒間数十？）
- InteractionBoxクラス（箱状の領域を設ける）
ソフトウェアアーキテクチャの求め方
結局何を決めなければいけないのか？
- アーキテクチャという言葉の定義に「万人の合意」は存在しない
- 複雑さへの対処
- 整理・細分化を行う→「関心事の分離」
- 開発や運用が容易な大きさの集合に分解する
- モジュール化・カプセル化
再利用可能は必須ではない
設計パターンを用いた分離
- 設計パターンといわれるものは、本質をつかみづらい
用語の誤認と誤った情報が配信されているため - 関心事を分離する視点そのものが、いわゆる設計パターン
切った結果ではない
→サンプルコードから読み取ることは不可能 - 設計パターン→設計視点
実際の分離で使用する視点の例
- Presentation Domain Separation（PDS）
- 分離したいのは、プレゼンテーション部分は他のコードと別の知識・制約がかかるから
- 次の入力フォーカスをどこに置くべきかは、Domain側に書くべき
- 資料：「GUIアーキテクチャの基礎からMVVMパターンへ」
PDSとは、アプリケーション全体から「PresentationPlatform関連」を分離する「視点」
Domain Logic Pattern
- アプリケーションの状態の持ち方の特性で大きく分かれる
- TransactionScript or Domain Model
- 資料：「Modelの中身 - ドメインロジックパターン」
- TransactionScriptが有用な場面ではDRY原則は原則ではなくなる
DomainModelで継承してると、仕様変更で継承関係が変わってしまうと大変になる
大きな食べ物を順々に切り分けていく間隔
前のステップでの切り方によって、次のステップの切り方は変わってくる
まとめ
- すべては「関心ごとの分離」に通ず
- 「設計パターン」って言葉よくないよ！
- 大体いつも使う知見：PDS（MVC系の裏）, Domain Logic Pattern
- なぜそうしたいのか？なぜこれが必要になったのか？から考え直す
- どこにも載ってない情報は自分で考えるしかない
Visual C++ は C++10.8 ←イマココ
delegating constructor
uniformed initialization
- "()"ではなく、"{}"でコンストラクタを呼び出す
cplx c0(); では、関数宣言になってしまう
initializer_list
- initializer_list という型の定義
追加・挿入・変更できないコンテナ
initializer_list<int li { 1, 2, 3 };
explicit conversion operator
- 暗黙の変換を抑止する "explicit"がないと、加算出来たりする
LT
@ZuQ9Nn 自作アプリの宣伝
- 虹人間カメラ - RainbowMainCamera
- あざとい感じのアプリ名
- なんの成果も得られませんでした
- 初日1桁DL
残念な原因 - アプリの説明がわかりにくい - 宣伝を全くしなかった - 露出が少なすぎるために、存在していないのと同じ
- 現在、App Storeのランキングはお金で買える
→個人が趣味で作って上位になるのは大変難しい
@@ww24 FlashAir x Node.js
@_kz6 Javaを勉強してわかったこと
@azyobuzin イカすJava Xtendの話
- Java嫌い
- 一般的な高校生には理解できない
- Java1.5相当に変換される
- Eclipseのプラグイン
- ラムダ式
- 拡張メソッド
- プロパティ
- null 処理
- No Statements
- 型推論
- defで戻り値の型を書かなくて良い
- ドキュメントに書いてあっても出来ないこともある
- それでもJavaよりまし
@mikan_x コミックマーケットでの携帯電話のお話
- いつも電波悪いよね
- C84では改善された
- 以前まではau, docomoが厳しかった
- 201THを使え（衛星電話高い）
- emobileはユーザが少ないから最強
- 電波が無いなら、迷子にならないで
- 将来的にwebカタログが使えるかも
@shinoblogavi お絵かきツールとしての Blend と Power Point
- パスで描く
- 部品管理とグループ化は大事
- 図形の結合
- トリミング・図形貼り付け・半透明化
- パワポまじ凄い
@daruyanagi プロ生ちゃんの声をアプリに組み込もう
- Expressでも使える
感想
- MSはUI/UXに頑張ってる
- Leap Motionすごい。欲しい。
- ソフトウェアアーキテクチャを考えるためには、視点を学ぶ必要がある
- gloops はアーキテクチャをしっかり考えて作ってるっぽい
- C++、言語としては残念
- FlashAirすごい
- PowerPointまじすごい。絵を描ける
- プロ生ちゃんって、結局なんだったのだろう（ぇ
第一回 納涼もんご祭りに参加しました
参加したセッション
話を聞いた・パンフ貰ったブース
- 「さくらのクラウド」デモ
- ソーラーパネル、どこへ置く？
- もんごの薄い本
- CodeIQ
- co-meetingのご紹介
MongoDBについての感想
- アプリケーションを作るのに便利な機能が備わっている
- 特に、地理空間インデックスはハマれば強そう
- レプリケーション・シャーディングが簡単そう
- スキーマレス
- migrationが不要なのはいいけど、管理が難しそう
- SQLライクな動的クエリが便利そう
- ただし、性能はどのぐらい？オンラインの取得に使えるレベル？
- トランザクションが無いので、割り切りが必要
- ミッションクリティカルな分野では使えない
- 書き込み性能より読み込み性能を重視している
- 普通に運用しようと思ったら、3台必要なのかな。。。
- WEBサーバにセカンダリ・プライマリサーバ・hiddenなセカンダリサーバ ってのが事実上の最小構成？
あれ、そういえば、参加受付ってどこにあったの・・・？
ふつうのエンジニアの情報収集法
会社の後輩に、どーやってそういう（エンジニア的な）情報を集めてるのか聞かれたので、
自分の中での整理のためにも書いてみる。
下準備
Twitterで、それ系の発言をしている人をフォローする。
→そこで発言している人たちをフォローしていく
http://tagamidaiki.com/tech-twitter10/ とか出てくるので、気になったらフォロー。
- twitterがおすすめユーザを表示してくれる
https://twitter.com/who_to_follow/suggestions
後述するサービスでリンクを集めてくれるため、URLを含んでつぶやいている人多めの方がよいと思います。
数百人レベルでフォローしちゃえばいいと思います。
ただ、タイムラインは読めたものではなくなる（流速的に）と思います。
はてなブックマーク - マイホットエントリー
http://b.hatena.ne.jp/
http://bookmark.hatenastaff.com/entry/2013/05/08/131308
はてなのIDと、Twitter・Facebookを連携させる。
朝９時（通勤時間前）にメールを送信するようにする。
→電車の中とか、会社着いてから読む
→一通り読んだらメールを削除（未読・既読管理）
→あとで利用できそうな内容だったら、はてブでブックマークしておく（Twitter連携もしておくと、それ系のフォロワーが増えるかも）
物足りなかったら、「テクノロジー」タブを眺める。
Gunosy
http://gunosy.com/
Facebook・Twitter・はてなのアカウントと連携させる。
「日々のまとめメールを配信する」にはチェックを入れておく。
→一通り読んだらメールを削除（未読・既読管理）
リンクを踏んだものを学習してくれるようなので、気になったものだけリンクを踏む。
昼休みに読む。
http://getpocket.com/
はてな・Gunosyで気になったけど、そのとき時間がなくて読めないものを突っ込んでおく。
Read It Now（https://play.google.com/store/apps/details?id=hm.orz.chaos114.android.readitnow&hl=ja）にて、
state = unread
sort = oldest
のウィジェットを作って、読み終わったら delete or archive しておく。
（ウィジェットに表示される数字を０に保つ気概で）
RSS
上記で様々なサイトを見ていく中で、自分の興味ある分野の記事を多数書いている人がいれば、RSSを配信していないか調べる。
配信している場合、RSSリーダーに突っ込み、新着を読む。
自分の場合は、RocketSS（http://rsspocket.appspot.com/ ）にRSSのURLを突っ込んで、自動的にPocketに保存されるようにしている。
その他（暇な時）
Qiita
Forkwell
電子書籍
一つの言語・フレームワークなどの一通りの情報を抑えたかったら、本を読むのは手っ取り早いと思う。
電子書籍なら、タブレット（AQUOS PAD）一台で、何冊でも持ち歩けるので便利。
- 達人出版会 http://tatsu-zine.com/
- O'Reilly http://www.oreilly.co.jp/ebook/
- オーム社 http://estore.ohmsha.co.jp/titles
- 技術評論社 https://gihyo.jp/dp
（Advent Calendar以外にめぼしいものは無いかも。。。）
※実話ですが、ステマでもありますｗ
rbenvをインストール
環境：Mac OS X 10.8.4
rbenvのインストール
基本、下記の通り。
https://github.com/sstephenson/rbenv
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
その後、書いてある通り、ruby-buildを入れる。
https://github.com/sstephenson/ruby-build
ちなみに、入ってないと、rbenv installってやっても
rbenv: no such command `install'
てエラーが出る。
git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
これで、下記のコマンドが実行できる
rbenv install -l
2.0.0-p247 ってのがあったので、それをインストールする。
rbenv install 2.0.0-p247 rbenv rehash rbenv global 2.0.0-p247
下記も参考にしました。
http://rochefort.hatenablog.com/entry/20121015/p1
http://qiita.com/sifue/items/b7d252b18ebbae636fa9
RocketSSにサービス名を変更しました
昨日、一応のリリースをした「Rss to Pocket」ですが、さっそくサービス名を変更しました。
新しくは「RocketSS」になります。
（ドメインは面倒なので変更しません。。。）
http://rsspocket.appspot.com/
会社で話してたら、そのまま過ぎるというdisりと、RSS+Pocketでろけっとでいいんじゃない？という話が出たので、ほぼ採用。
Rocketだと検索に引っかかりづらそうだったので、余った"SS"を後ろに付けてみて、RocketSSに落ち着きました。
サービス名は、さすがにもう変えないと思います。多分。
使い方について、Facebookで聞かれたので、
http://rsspocket.appspot.com/home
に手順を書いてみました。
時間があったら、スクリーンショットとか追加しようと思います。
で、すっかり忘れていた、Read It Nowへのリンクもついでに追加しました。
これでダウンロード数が伸びるといいなー。。。
Rss to PocketというWEBサービスを公開しました
Rss to Pocket
http://rsspocket.appspot.com/
出来ること
- RSSを登録しておくと、Pocketに自動的に記事が追加されます
- RSS毎に「タグ」を付けられるので、Pocket内で整理しやすい
- Google Readerからエクスポートしたファイルを読み込める
雑記
本当は、Google Readerが停止する前に公開したかったんですが、気力が足りずに遅れてしまいました。
現状はタグの編集など、必須と言っていいぐらい機能すら実装出来てないので、随時更新していきます。
NeoBundleを有効にすると、シンタックスハイライトが無効になる
環境
Mac OS X 10.8.4
VIM - Vi IMproved 7.3 (2010 Aug 15, compiled Jun 20 2012 13:16:02)
最初は、下記のように書いていた。
syntax on
set nocompatible
if has('vim_starting')
set runtimepath+=~/.vim/bundle/neobundle.vim/
endif
call neobundle#rc(expand('~/.vim/bundle/'))
で、最終行をコメントアウトすると、シンタックスハイライトが有効になるのに、
最終行を有効にすると、色がつかない。
結論：syntax on を最後に持ってくる
下記のように変更したら、色がついた。
set nocompatible
if has('vim_starting')
set runtimepath+=~/.vim/bundle/neobundle.vim/
endif
call neobundle#rc(expand('~/.vim/bundle/'))
syntax on
Pocket APIのにて、タグのAND検索
AND検索はできる模様。
・やり方
tagパラメータを複数つける
https://getpocket.com/v3/get?consumer_key=XXXX&access_token=YYYY&tag=hoge&tag=fuga
上記により、"hoge"タグと、"fuga"タグの両方が設定された記事だけ取得できる。
OR検索のやり方は不明。
