Builderファイル。単ページのテンプレートフォーマット。Storyboadファイル。画面遷移を可視化できる新テンプレートフォーマット。xibからstoryboadへの完全移行も共存も可能。用いてカタログ管理している。どの操作がどのコードに影響を与えているのかが、序盤の肝となりました。ファイルツリーは実ファイルの配置と異なります。管理されており、ファイルの並び順が変わった際にもコードが書き換えられます。下のxml等に対する書き出しを行っています。下に差分が出た際はマウス操作等による可能性もあり、ちょくちょくコミットから外しています。アプリ起点についてコードリーディングに際して真っ先に気にする起点についてもこちらに設定がありました。起動時に実行されるので、こちらでインスタンス生成しても良さそうです。開いた際はこれらのエディタが起動しています。こちらもXcodeのバージョンアップでオプションの追加などが発生し、ときおり意図せずコードが勝手に書き換わるケースがあります。存在するのですが、画像をサイズで括って管理するのに便利です。節尾句を設けるのがセオリーだったようですが、こちらのほうが一覧性もあるので、追々完全移行する予定です。唯一、多言語対応の考慮がされていないのが難ありです。Objective-Cを学ぶネット上の記事やブログはSwiftに席巻されていて、Objective-Cについてはあまり残っていませんでした。こちらは書籍を購入し体系的に学習中です。見るNSLog(@"test");最初に学ぶべきはどの言語でもダンプでしょう。わたしはそのほうが捗ります。コード実行箇所のあたりを付けて、ブレイクポイントで確認。ダンプで細かな値なども確認。これで実動を踏まえたコードリーディングが可能です。Objective-Cはこれを利用して読み解いていく予定です。ライブラリ管理を学ぶCocoaPodsの把握iOS開発ではCocoaPodsというパッケージ管理ツールを用いるようです。プロジェクトが併設されます。いう内容のエラーに苦しみます...(苦しんだ)インプットが多く纏めきれませんでしたが、俯瞰的にこんな感じで情報収集をしていました。次はもう少し絞り込んで、メモを残そうと思います。カメラ・マイクのブロックを個々に検知Tweet最近詰まったので、メモっておくことにします。用いてカメラやマイクにアクセスすると、それらのデバイスへのアクセス許可が必要になります。カメラ・マイクともにアクセスを求めた際、どちらかが利用できる状況であればブロックエラーが取得できません。受け取る上記のブロックを受けた場合は音声のみの動画、または音声のない動画が取得出来ます。これはこれで、プライバシーを尊重したブロックの結果なのですが、開発都合で個々のブロックをキャッチしたいケースが多々あると思います。以下のコードが対応策を施したものです。エラーを取得してくれます。console.log(err));getUserMediaを連投して大丈夫かな、という懸念はありましたが、Android数端末、Windows等で確認したところ問題は見られませんでした。取得後すぐに止めています。急場しのぎではありましたが、比較的シンプルに対処ができてよかったです。それでも、これより良い解決方法などありましたらご享受いただければ幸いです。コメントなどください。23:05Tweet広告を非表示にするもっと読むコメントを書く2017-12-312017年を振り返るその他Tweet自身の来年やるべきことを模索するためにメモを残しています。昨年にクライアントサイドに転向し、主にブラウザ対応に重きをおく開発をおこなっていました。サーバーサイドでもRailsなど新しい経験もしましたが、Javascriptの世界は作法も大きく異なり、エンジニアリングの世界が格段に広がりました。やったことReactjsクライアントサイドの学習基盤としてReactjs+Reduxに触れられたのは非常に良かったです。APIを通してデータを取得するフローや、特に非同期の考え方はクライアントの動きを深く知ることができました。コンポーネントのライフサイクルはネイティブにも通じる考え方で、今後はiOSやAndroidの開発にも触れてみたいと思っています。RailsAPI開発とRSpecコーディングに触れる機会は多かったです。bundleもトラブルが多かったので、そこそこ多く調べましたね...特にVagrantではnfsストレージ上でbundleがうまく動かないトラブルもありました。kaminariがCで書かれているのも知って驚きました。レイアウトについては縦方向でのセンタリングの難しさや、ブラウザによって出る描画差異なども実践なくしてはわからないものが多かったです。flexやjustify-contentなどの魔法の単語を知って作業がかなり楽になりました。translateとtop、bottomを組み合わせて縦位置をど真ん中に合わせるなども今は重宝しています。(これはいずれブログにまとめたい...)WebRTCブラウザができることが大きく広がっていることを知りました。以下のコード、htmlにて保存してChromeで開いてみてください。);</script></html>ローカルHTMLでもカメラがいとも簡単に起動する、それを保存したりもできる、ネイティブアプリとブラウザとの違いはどんどん少なくなっているようです。逆に言えば、Webエンジニアに求められることもどんどん増えているわけで、今後も精進が必要そうです(^_^;)Xcode業務都合で自社アプリのビルド程度まではおこなうようになりました。Settingくらいは読むようにはなっていました。ビルドを行うようになって意識が変わったことのひとつに、MacOSとXcodeのバージョンは比較的早く最新のものを追うようになりました。モヒカンSlackkotakanbeさんが運用されているSlackチームですが、こちらの利用で情報収集の効率が格段に良くなりました。qiita.com冬眠気味だったTwitterアカウントも改めて情報収集に活かせるようフォローを増やしたり手をかけましたが、情報収集方法も年々進化していますね。learndでTILですね。learnedまとめ今年はわたしにとってはクライアント元年であり、非常に楽しい試みを多く経験できた年だったと思います。環境的には同じ技術軸で作業をする人間が身近におらず、ガラパゴス懸念を感じながらLintだ勉強会だと他者の技術や標準化にやや枯渇した時期でした。来年は身近なメンバーに技術普及をすることで切磋琢磨できる環境をつくることにも尽力したいですね。それと、やはりネイティブには触れていきたいです。Reactjsかvuejsか、みたいな時期もありました。それでもReactjsを選んだのは「アプリも作れるみたいだし...」というとろこもあったわけで。Nativeをはじめてみようかと思っています。githubTweethttps://github.com/settings/security困ったこと会社のルールでGithubで二段階認証(SMS)をおこなっていたのですが、コンソールでID+パスワードを求められた際に認証不足で処理が通らなくなります。'https://ttaniguchi@github.com':httpsでリポジトリをクローンするとID+パスワードが必要になります。tokensを作れば大丈夫でした!https://github.com/settings/tokens先ほどのパスワードの代わりに発行したトークンを利用すればOKです。リポジトリの取り込み操作だけであれば、このあたりのチェックだけでおおよそOKです。メモがてら共有します。Routerの4系がリリースされて久しいですが、相変わらず対応ができていませんでした。重い腰を上げてアップデートしたのですが、噂に違わず障壁が多い移行だったため、メモがてら記録を残しておきます。v4で何が変わったか簡潔に言うと、とても良くなりました。ルーティングコンポーネントのネストについての制約(縛り)が解消された。contextを利用せずにパラメータを送れるようになった。現在の状況React+Reduxで構築されたサービスです。react-router3系とreact-router-reduxを併せて利用していました。画面遷移はhistroyに対するrouter.push()がメインです。今回更新したパッケージは以下の通りです。react-router-dom@4.2.2DOMのみパッケージ分割されていましたが、こちらで事足りました。@next4系への対応は@nextバージョンを利用するように、とのことでした。それ以前のバージョンは2/3系用となっています。query-stringクエリパラメータ取得に使います。新たなルーティングがこちらです。document.getElementById('app'),);ConnectedRouterがreduxと連結したhistoryを注入してくれます。Hashによるルーティングを利用しているのでHashRouterで括っています。NaviComponentのように共通のコンポーネントはそのまま組み込めます。Switchで括っておくと、マッチするRouteが複数あっても最初にマッチしたコンポーネントしか表示しません。pathは"/contents(/:id)"と書けなくなってしまったため、2行に分けて記載しています。良い方法があればコメントなどください。URLパラメータの:id引き渡しについても以下の通り変更がありました。goBack等のファンクションはcontext.router内から取得していましたが、withRouter()メソッドの登場によって、Route直下にない孫コンポーネントにもprops経由でこれを送ることができるようになりました。withRouter(Component);また、相対パスが利用できるようになったことも注意が必要でした。React公式ドキュメントにもあるように、contextは非推奨仕様でした。そもそもReactRouterの実装のために用いていたので、これを機にすべて撤廃することにしました。クエリパラメータの対処クエリが元のsearchパラメータからしか取得できなくなっていました。query-stringを利用することで、key/valueに分割して値を返してくれます。}また、Switchからも見て取れるように、パスでのみコンポーネントが切り替わるためクエリの変化はpropsに流れてこなくなりました。上の対応として、props内のhistory.listen()メソッドを利用します。こちらはクエリを含め、historyの更新に対してコールバックをおこなってくれます。詰まったところしか記載していないのですが、大概の情報はこちらのページで仕入れる事ができました。reacttraining.com以下のサイトにもお世話になりました。qiita.com今回のredux連携のようなケースは単体でのパッケージ導入と異なり、公式ドキュメントだけだとなかなか追いづらいところもありましたが、開発者側も周辺パッケージを意識しているようで、今回のアップデートはかなりreduxに寄せたものだったとも思いました。今後もナレッジについてはメモがてら残していこうと思います。ネストが逆になっていました。今のコードは訂正後のコードになっています。一巡遅れて」いました。reactTweetコンポーネントが深くなるとパスが読みづらいecmascriptでは外部ファイルを取り込む際に相対パスを指定します。コンポーネントの階層が深くなるに連れて相対パスがわかりづらくなるので、絶対パスが使えればと思うケースも出てきます。'jsx/DevTools';babel-plugin-module-resolverを使うBabelifyの際にパスを解決できれば絶対パスも利用可能です。それを実現するライブラリがこちら。]}aliasとしてディレクトリ名を登録できるので、相対パスもそのまま利用できます。npmパッケージと被らない名称であれば複数aliasを増やせます。eslintも通したいBabelで解決させた後はeslintでもパスを許容するよう修正します。eslint-import-resolver-babel-moduleを利用するのが便利です。}}これで絶対パスもlintが通るようになります。VSCodeなどでタグジャンプなどを利用している場合、うまく動かなくなる可能性があります。こちらについては別途プラグインなどを調査中です。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。