LINE Engineer
こんにちはUITチームの手島です。 先日社内のセミナー（勉強会のようなもの）でJavaScriptのクロージャについてお話しさせていただいたので、その内容をblogでご紹介させていただきます。 クロージャ自体はJavaScriptだけが持つ機構ではなく、現在様々なプログラミング言語でサポートされています。最近ではSwiftやJava 8など、クロージャを使える言語が増えてきています。 本記事ではクロージャとは一体なんなのかをJavaScriptの具体的な例を交えて初心者向けに解説します。また、ECMAScript 6のドラフトにあるletキーワードによる変数宣言についても少しご紹介します。 クロージャの例 いきなりですが、クロージャのコード例をご紹介します。 function appendPrefix(x) { return function(y) { return x + "_" + y; } } var brown = appendPrefix("brown"); var cony = appendPrefix("cony"); alert(brown("stamp
LINE Engineering Blog official account
皆様お久しぶりです。LINEの天然男子。UITチームのキョウです。 最近、AngularJSで構築したコンテンツに様々なトラッキングコードを入れて計測を強化する対応を行ったのでご紹介します。 はじめに 現在、様々なJSフレームワークがでていますが「やはりJavaScriptはSEOに弱い」と言う風潮の影響で、実業務で積極的に使えないのが現状でした。 しかし、2014年5月にGoogleからJavaScriptのインデックスを強化していると言う話が出ています。 少しずつですが、SEOにとらわれずAngularJSやBackbone.jsを使ってサイト構築ができる未来が近づいています。 今回の話は、そんなJS新時代が到来した時の為に知っておきたいトラッキングコードの導入方法について説明いたします。 目次 1. 要件 2. 対応方法 3. AngularJSにトラッキングコードは設置できないの？ 4. Adwordsのリマーケティングタグが実はやっかい! 5. AngularJSとGoogleタグマネージャを連携する方法 6. 最後に 1. 要件 AngularJSを使い実装されたコン
こんにちは＆はじめまして、最近脱ペーパードライバーを目指し車の運転を始めたUITチームの手島です。 今回は最近の記事と比べると少し軽めな（？）フロントエンドのお話をさせていただきます。 LINE占い "宇宙兄弟 宇宙占い"特集ページ 先日、LINE占いの中で宇宙兄弟占いという特集ページがリリースされました。この特集は講談社様、コルク様、ロックミー様のご協力をいただいて企画・作成をしました。アプリ内ウェブビューで宇宙兄弟のキャラクター達による占いがおみくじ感覚で楽しめます。 この特集ページが提供するアニメーションは以下のように大きく４つのフェーズ（イントロ、スタート、占い、結果）に分かれています。 (c)小山宙哉/講談社 企画協力ロックミー 各フェーズの中で文字やキャラクターが移動したり、フェードイン/フェードアウトなどのアニメーション効果が付与されています。次フェーズへの遷移は各フェーズのアニメーション完了時もしくはclick/tapイベント発生時に行われます。 今回の記事ではこのようなフェーズごとに区切られたアニメーション（フェーズ有りアニメーション）をHTML/CSS/JSで実
[13/11/14 追記] flex-wrapの実装について注記を追加しました。 暑さもやわらいできたような気配がしてきました。皆様いかがお過ごしでしょうか。久しぶりのブログ更新です。UIT 富田です。 今回はCSSでのレイアウトをより柔軟にしてくれるflexboxについて解説します。 flexboxは大幅な仕様の変更が過去に2度もあり、各ブラウザとそのバージョンによって実装している仕様が異なるため、後方互換をきっちり対応しようとすると、gradientと並んで2大考えるのをやめたくなるプロパティとなっております。 しかしflexboxを利用することで、現時点ではCSSだけでの対応が難しかったり、複数のプロパティを複雑に組み合わせる必要があるレイアウト（例えば一番大きい高さに揃えた要素を横に並べたり、子要素を上下左右中央位置したりといったもの）が、容易に利用できるようになるという大きなメリットもあり、使えるならば使っていきたいプロパティでもあります。 にも関わらずflexboxについて調べてみると、各仕様をまとめた記事はみつかるものの、新旧の仕様を横断的に確認できるものが見つからなかっ
こんにちは、こんばんわ、お久しぶりです。NHN Japan ウェブサービス本部開発1室UITチーム 吉田徹生(@teyosh)と申します。 3ヶ月ぶりの登場です。AngularJSって何？という方は第一回目の記事[Angular JSを使おう]を御覧ください。 さて、3ヶ月の間にstableは1.0.5と順調にアップデートしております。ちゃんとアップデートがされると使っていても安心できます。 今回はAngularJSを利用していると気になるng-clickやng-repaeatなどAttributeに設定されているものについてです。これはdirectiveの拡張でAngularが機能を設定してくれます。 Hello, World 以下のようなコードがあるとします。 <div ng-app='hello'> <div ng-controller='helloCtrl'> <button ng-click='hello("world")'>hello</button> </div> </div> ang
Web Front-end Developer
UITチーム 清水大輔 (@tori3_jp)です。2012年も残り僅かとなりましたが、年の瀬をいかがお過ごしでしょう か。 Backbone.js Advent Calendar 2012の10日目のエントリーとなります。 先月、DailyJSというJavaScript関連のトピックを配信しているサイトにBackbone.jsの次期リリースに関する記事が投稿されていました。今回はこの中からBackbone.jsの次期リリースで予定されている変更点について紹介したいと思います。 Backbone.$ Backboneで扱うjQuery互換ライブラリへのエイリアスが変更されます。ローカル変数$を参照していたものがBackbone.$に変更されます。 - var $ = root.jQuery || root.Zepto || root.ender; + Backbone.$ = root.jQuery || root.Zepto || root.ender; また、同時にsetDomLibrary()は削除されます。使っているケースはほとんど無いと思いますが、どうしてもsetDomLibr
歳晩の候、皆様におかれましてはますますのご繁栄の事とお喜び申し上げます。NHN Japan ウェブサービス本部開発1室UITチーム(長い) 富田(@a_t)です。 CSS Preprocessor Advent Calendar 2012の3日目、css書くのに便利だからといって盲目的にcompass使ってないでちょっとは中でなにをしているか知っておいてもよかろうもん ということでタイトルのとおり、compassがベンダープリフィックスの制御をどのよ うに行なっているかについて書きます。compassのソースをまだ一度も見たことがない人向けの内容です。 sassについてよくしらない、というかたは過去の記事をよむとわかるかもしれません。 CSS3関連のmixinはなにをしてるか compassのCSS3関連のミックスインは、引数に値を渡してあげるだけで、しちめんどくさいベンダープリフィックスを自動で出力してくれる大変霊験あらたかな機能です。 使っているだけでは中で何をしているかはわかりませんが、compassは公式サイトからsourceの中身を見ることができます。そこからベンダープリフィッ
こんにちは、こんばんわNHN Japan ウェブサービス本部開発1室UITチーム 吉田徹生(@teyosh)と申します。 前回の続きでAngularJSについて紹介していきたいと思います。AngularJSって何？という方は前回の記事[Angular JSを使おう]を御覧ください。ここ数年でJavaScriptのコードは膨大に増えてきていると感じています。出来うる限りバグを少なくしよう、保守をしやすくしようと様々なライブラリーやデザインパターンが導入されてきています。それに伴い、JavaScript界隈にもテストを重視する様になってきて、クオリティも上がってきていると思います。 さて、JavasScriptのテストといえばQunit、Jasmine、Mocha、seleniumなどを挙げられると思います。 今回はそれらとは少し違うAngular JSのために作られたTestacularを紹介したいと思います。 まずは、Testacularについて Vojta Jina created Testacular (GitHub: vojtajina / testacular, License
こんにちは、こんばんわNHN Japan ウェブサービス本部開発1室UITチーム 吉田徹生(@teyosh)と申します。 最近ではJavaScriptのMVCフレームワークが雨後のタケノコのようにたくさん出てきています。先日Quirks ModeがJavaScript Libraryの利用状況をアンケートが公開していました。backbone.jsやknockout.jsなど、MVCライブラリもランクインしてきました。 その中で今回はAngularJSを紹介しようと思います。 まずは、Angular JSについて AngularJS（アンギュラージェイエス）は、Googleとコミュニティによって開発されているオープンソースのJavaScriptフレームワークである。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としている。MIT Licenseでラ イセンスされたフリーソフトウェアである。初版は、Miško HeveryとAdam Abronsによって2009年に発表され、2012年6月にバージョン1.0.0がリリースされた[1]
こんにちは、開発１室UITチーム 清水@tori3_jpです。 さて、今回はLINEのスマートタブレット向けブラウザ版でも採用したJavaScriptのMVC FrameworkであるBackbone.jsについて紹介したいと思います。 この数年でブラウザの高速化やHTML5の機能の実装が進むにつれHTML/CSS/JavaScriptでよりネイティブアプリケーションに近い表現がブラウザ上で可能になりつつあり、それにともない開発はより複雑になってきています。 jQuery pluginなど使えば短いコードで様々な機能を手軽に実装できますが、規模が大きくなるにつれcallbackが増え、徐々に見通しの悪いコードになりがちです。また、DOMとデータの分離が難しくなることも問題となってきます。 そこで、Javaなどで広く使われているデザインパターンの１つであるMVCパターンで構造化された設計をとりいれることで問題をある程度解決できます。 構造化されることで以下のようなメリットが考えられます。 モジュール同士の独立性が高まる = 保守性が高まる ユニットテストの実装が容易になる =
