Unity Blog

[2015/11/10 追記] Web Components周りはだいぶ情勢が変わったのでこの記事の内容は真に受けないでください。 (コメント欄が有益なので記事は残します) Polymerというより現状のWebComponents全体がふらふらしてるので口車に乗せられると将来痛い目を見そうだと思った 半年くらい経ってブラウザベンダー間での議論がけっこう進展したので、Web Components自体は割と安泰かと思います。 Shadow DOMの仕様を満たしてない Polymerが使っているShady DOMはCustom ElementsのStylingを容易にするためにShadow DOM仕様を満たさない状態で使われています。 https://www.polymer-project.org/1.0/docs/devguide/styling.html#background the Pol

「+」という文字の入力はUS配列だと shift+=, JIS配列では shift+;になる。 問題となるのは、ctrl+shift+αという組み合わせがどういうメタキーの組み合わせとして解釈されるか、キーボードの設定次第で変わる。 US配列だとkeyCode: 187 とctrlKey。JIS配列だと186とctrlKeyとshiftKeyになっていた。 window.addEventListener "keydown", (e) => # US / JIS if (e.keyCode is 187 and e.ctrlKey) or (e.keyCode is 186 and e.shiftKey and e.ctrlKey) e.preventDefault() # exec something return false return true この挙動によって何が起こるかというと、

コーディング向けの日本語対応の等幅フォント「Sourceソース Hanハン Codeコード JPジェイピー（和名：源ノ角ゴシック Code JP）」が、2015年6月4日に公開されました。「源ノ角ゴシック Code JP」は、プログラミングやHTML/CSSのコーディング、ターミナルでのテキスト表示など、和欧表示用フォントとしての利用を想定されたフォントです。 ダウンロードはこちらから Release Fonts (OTF, OTC) · adobe-fonts/source-han-code-jp · GitHub ※このフォントは無償でダウンロード可能です。OTCとTTFの両方のフォーマットで配布されているので、Windows/macOSともに簡単にインストールできます。 ※上記リンクの「Fonts version ［バージョン番号］ (OTF, OTC)」となってい箇所の［Sourc

laco0416です。Polymer 1.0におけるShadow DOMとStyling、CSS Variablesの話をします。 Shadow DOM PolymerはWebComponentsの三本柱の1つ、Shadow DOMを用いることで、Custom Elements内外のDOMを隔離します。隔離されたCustom Elements内のDOMを Local DOM と呼びます。 Local DOMを生成するのにPolymerは2つの実装を使い分けることができます。基本的にはPolymerに含まれる Shady DOM というShadow DOM実装を使用しますが、ユーザーが明示的に指定することでブラウザにビルトインのShadow DOM実装を使ってLocal DOMを生成することができます。(将来的にはデフォルトがビルトイン実装の使用になる予定です) ビルトイン実装を使おうとして

BitbucketやGitHubのGitリポジトリにアクセスではSSH認証キーを使うことができます。このSSH認証キーを使ったアクセスのメリットは次のとおりです。 * Pushするときにいちいちパスワードを打つ必要がなくなる * セキュリティが向上する 今回はMacでSSH認証のための公開鍵と秘密鍵を生成して、GitHubやBitbucketに公開鍵を登録して、SSHでアクセスできるようにするまでの設定手順をできるだけわかりやすく書いていきます。もし、詰まった点とかあればコメントお願いします！ (04/11 22:30) 前回の修正でミスってた部分を修正 🐯 流れSSH認証キーの設定の流れは次のとおりです。 (1) SSH認証の公開鍵と秘密鍵を作成 (2) Mac側(クライアント側)へのSSHキーの設定 (3) Bitbucketへの公開鍵の登録 (4) GitHubへの公開鍵の登録

@armorik83です。なにやら最近は完全にAngular芸人と呼ばれるようになったのですが、一方でRuby知識はド素人、今まで避け続けてきたもんだから仕方がない。で、思い立ったので学び始めます。理由はご想像にお任せ。 以下の文体ですが、他言語にはある程度長けていても、Rubyは一切やったことがない、というレベルを想定しています。比較対象は主にJavaScript ES6、自分用なので雑です。 バージョン JavaScriptのバージョンはES nで表現するが、基本的にはブラウザの実装次第。Rubyはインタプリタ自体のバージョンを指す。インタプリタといっても、Ruby 1.9からはYARVというVM上で動いてるらしい。 最新は執筆時点で2.1.6, 2.2.2。この2系統あたりを見ておけばいいのかな、1.9.3はサポート終了してるらしいので、今回は2.0以降に絞って学ぶ。 読むもの ざっ

Comparison between Play Framework (Scala) and RubyOnRails (Ruby)

AngularJS with ES6/TypeScript and Browserify 『AngularJSモダンプラクティス - Qiita』を参考に，僕がAngularJSでなんかつくるときのディレクトリ構成とかそういうのを雑にまとめてみました． 対象 TypeScript 1.5 or ECMAScript 6 AngularJS >= 1.3.0 Browserify 方針 基本的にはTypeScriptで記述 型定義ファイルはdtsmで管理 エントリーポイントを定め，そこに全部importする app nameやdirectiveのprefix等は定数にしてexport 各ファイル内でangular.module(appName)してangularのmoduleを取り出す directiveやfactoryの登録は各ファイル内で行う tscでコンパイルしたファイルを一時ディレク

この記事は、開発を持続可能にできるようなアーキテクチャとその適用方法を考察するものです。 骨子はできていますが、実装経験をフィードバックして詳細を若干変更するかもしれません。 勉強不足な点もあるので、意見を歓迎します。 開発においてよくある問題点 ビジネスロジックの本質が何だったか見失う。ソースコードのどこまでが業務上の関心で、どこからがそれを実現するための技術上の関心か分からなくなる。 入出力双方向の処理が散在して処理が追い切れなくなる。特にイベント処理でどこに飛ぶかわからないコールバック地獄になる。 初期化・つなぎ込み・統合者的オブジェクトが小さな機能単位で生まれて統一感が無くなる。 状態を持つ値が大量に散在して副作用を起こしバグを生む。 これらの問題の結果、小さな単位ごとに個人のノウハウで"良い"設計がされ、機能を追加しようとしたときにどういう方針で行えばよいか分からなくなる。 解決

こんにちは。imaiです。待望のAngularJS1.4がリリースされましたね。Directive関係では、bindToControllerの機能が向上しました。 このbindToControllerとは一体何なのか。使って嬉しいことは何か。どう機能が向上したのか。について書いていきます。また、最後に自作Directiveを作っていく際に筆者がよくつまずく点を記しておきます。 この記事の対象者:AngularJSに触れたことがある、自作のDirectiveを作ったことがある bindToControllerとは AngularJS公式サイトのReferenceからbindToConrollerの説明を意訳すると、 再利用可能なコンポーネントを作るために、分離?隔離?スコープやcontrollerAsを用いる際に、bindToController:trueとすることでコンポーネントのプロパテ

node アプリ + HTML/CSS/JavaScript のリポジトリを Dockernize したときの話。最近 Docker の機運が高まっているのはたまたまです。 同じプロジェクトのバックエンドのリポジトリ（ただし別言語）が Dockerfile 内で依存解決をしていたので、おもむろに RUN cd /src && npm i && npm run build 的な処理を記述したら時間がかかりすぎて爆死しました。 予想はしてましたが node_modules 以下の依存ツリーが肥大化しているのが原因です。 $ du -k -d 1 node_modules | sort -nr 466792 node_modules 85224 node_modules/sc5-styleguide 60400 node_modules/gulp-svg-sprite 32844 node_mo

@tsuchikazuです。半年ほど仕事でAngularと戯れています。 3/21に開催されたng-japanでは、あと1週間後ほどでリリースされるとアナウンスされていたAngular 1.4 あれから10週間ほど経った5/27。ついに、Angular1.4の安定版がリリースされました。 Developer Guide: Migrating from 1.3 to 1.4とCHANGELOGから、Breaking Changeを中心に簡単にまとめましたので、公開します。 概要 Angular1.4では、主にngAnimateの大きなリファクタリングと、ngMessagesの機能改善、$cookiesへの新しいAPIが追加されました。 ngAnimateのリファクタリングは、今まで存在していたissueやバグフィックスと、より便利なアニメーションを提供するための新APIのために行われました。

連載「Webサイト・アプリ高速化テクニック徹底解説」の第5回は、前回の「DOM操作の最適化によるJavaScriptチューニング（前編）」に続く後編です。後編では、createElement()などのDOM操作メソッドを使ったさまざまなテクニックや、パフォーマンスを劣化させるよくあるパターンについて詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ 前回は、DOM操作が遅い原因と仕組みについて簡単に説明し、チューニングのサンプルをいくつか解説しました。その中で、innerHTMLを利用したコードをサンプルにあげていますが、innerHTMLを利用する場合、いくつかの

@armorik83です。新MacBook Pro 15"が発売され、長らくの相棒MacBook Proも6年選手だったため、めでたく引退となった。今日は個人の日記レベルで新しいMacをセットアップしていく。 OSを丸ごと再インストールする機会自体あまりないが、私は儀式的にOS Xをアップグレードする度にクリーン・インストールする癖があり、次の機会に備えてメモを残す。（未だにクリーン・インストール儀式を執り行うが、周りはどうなんだろう） 購入時点の環境 2015年5月28日、開封直後の状態。 MacBook Pro 15" Mid 2015 2.8GHz Core i7 16GB DDR3 500GB Storage 電源投入 cmd-Rを押しっぱなし Disk Utilityでプリインストールを削除 Yosemite再インストール（要Wifi） 確認 「Yosemite 10.10.3だ

背景 愛用していた MBP15" が一ヶ月ほど前に突然亡くなり、急遽 MBP13" を買って環境構築を行ったので記録しておく。 (その後噂の薄くて軽くて新しい Macbook が出ただけでなく MBP13" までマイナーアップデートされたりしたが、悔しくはない。悔しくはないぞ！！) Brewfile オワコン問題 開発環境の構築は Homebrew と Homebrew Cask を入れて Brewfile を書き、 brew bundle すれば終わりかと思いきや、もう Brewfile はオワコンになってしまったらしい。 (3/25 追記) Brewfile がオワコンなのではなく Homebrew 本体から bundle コマンドが外されただけで、 元となった brewdle コマンドは健在で、もっと便利な brew-file もあるとのことです。 参考: Brewfileはオワコン

@armorik83です。Qiitaはなんか違うなと思ったので初めてはてなブログに手を出す。 postd.cc 元ネタは上の記事。真面目に回答してみたら能力全然足りてなくて危機感いっぱいです、がんばろ。 コンピュータサイエンス データ構造: レベル1 レベル2: ハッシュテーブルの実装方法や衝突への対処法、優先度付きキューとその実装方法などを説明できる。 レベル2で説明求められたので脱落。 アルゴリズム: レベル0.5 レベル0: 配列内の平均値を見つけることができない（信じ難いことですが、私はそのようなプログラマ志望者と面接したことがあります）。 レベル1: 基本的なソート、検索、データ構造トラバーサル、データ取り出しアルゴリズムの知識がある。 さすがに平均値は見つけられても『データ構造トラバーサル、データ取り出しアルゴリズムの知識がある。』がどこまでのものを指すのか…。アルゴリズムは自

2015/3/7 にMSakamaki氏に声を掛けられれて一緒に AngularJS ES6 リファクタソンを開催しました。 内容は参加者が 2〜3 人のチームに分かれて ES5 で書かれた Angular1.3 ベースの Web アプリを、ES6 でリファクタするという企画です。 ES5 のコードの中にクソコードを仕込んでおいて、ついでにリファクタしてくれるかなーなんて思いながら主催側ですが、一緒にリファクタして結構楽しかったです。 Angular1.3 を ES6 でリファクタするポイントや、書き換えてみての所感とかまとめようと思います。 (注 今回のコードは実験的な試みです。プロダクションコードに適用するかは自己責任でお願いします。) AngularJS ES6 リファクタソン - AngularJs Japan User Group | Doorkeeper Angular1.X

HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js