LEADING BRANDS TO DIGITAL WE ARE A DATA-DRIVEN MARKETING AGENCY FICCはデータに基づく論理的なマーケティングを提供するデジタルエージェンシーです。 消費者に価値あるコンテンツと体験を届けるため、戦略立案から施策実行まで一貫して提供しています。

こんにちは、フロントエンド・エンジニアの荒井です。 今回はJavaScriptを生成する代替言語（いわゆるaltJS）のひとつ、TypeScriptについての紹介です。 普段はFlashコンテンツ/AIRアプリの開発がメインのため、まだまだTypeScriptを案件などで本格導入する程に使いこなしているわけではないのですが、TypeScriptのコードを色々と試してみてこの機能が便利だなとか、こういう使い方をすると良さそうといった内容をFlash開発者の視点を交えて話をしたいと思います。 TypeScriptを選ぶ理由 TypeScriptで気に入った機能 個人的な要望 TypeScriptを選ぶ理由 普段ActionScript3.0(以下、単にActionScript)で開発を行っている私からすると、JavaScriptにはないクラスベースの開発と静的型付けの2つがあればまずは充分なの

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

grunt-initがファイルをカスタマイズしてコピーするcopyAndProcess()ではgrunt.template.process()を使っていて、それはgrunt.util.normalizelf()を最後に呼んでいる。これによりLFのファイルが環境に合わせてノーマライズされるようになっている。そのためWindowsでは常にCR+LFでファイルが吐かれる。 LFで吐かれるようにするにはgrunt.util.linefeedで\nを設定してやれば良いのだけど、grunt-initにはこの設定を変える方法は用意されていない。Issueも立ってるけどGruntに文句言えみたいに返答されていて、それ違うし！　みたいな。と、いうことでこれをどうにかしてみようと。 View Commit: Set grunt.util.linefeed for copyAndProcess() CR+LFで

はじめに この投稿はGrunt Plugins Advent Calendar 2013の25日目の記事です。 grunt-asciifyで、遊び心のあるgruntを作りましょう。 後最後にちょっとしたgruntの今後を書きました。最後までお付き合いをお願いします。 asciify is 何 コンソールに文字ascii artを出力させるモジュールです。 $ npm install asciify -g でインストールできます。 簡単な使い方 $ asciify hello だけで、以下の様な画像が出ます。 詳しくは過去にまとめた記事があるので、それを見て下さい。 コンソールに文字でAscii Artを出力する asciify がイノベーティブな件 grunt-asciifyはこれをgruntから使えるようにしたものです。 grunt-asciifyの使い方 grunt.initConfi

Angular.jsでaltJSを使う場合、CoffeeScriptが一般的（たぶん）だが、TypeScriptはあんまり聞かない。TypeScriptの方が好きな自分としてはどうにかならんかねとずっと考えていて、こうやったらいいんじゃないかというのを思いついたのでメモ。 controller定義の基本 Angular.jsでcontrollerを定義する場合、だいたいはangular.module.controllerの第１引数にcontroller名、第２引数にcontrollerのコンストラクタ関数を渡す。 var app = angular.module('app', []); // 'MainCtrl'という名前のcontrollerを定義 app.controller('MainCtrl', function ($scope) { }); このままだとminiyした時にinje

AngularJSのようなクライアントMVCフレームワークを採用すると、クライアントサイドの規模が大きくなってくるので、できればJavaScriptじゃなくて型のあるプログラミング言語で開発したいですよね。 AngularJSは独自のクラスシステムを持っていないし、モデルやコントローラを実装するためにベースクラスを継承したりする必要もないので、altJSとの相性がよくて組み合わせやすいです。 altJSと言ってもたくさん種類がありますが、今回はTypeScriptを使ってAngularJSアプリを書くときのTipsやコツなどを紹介したいと思います。 ベースとなるプロジェクトを作る AngularJSのコードを書くとき、JavaScriptであればおもむろに書き始めることも可能ですが、altJSを使う場合はコンパイルなどの手順が必要になるので、Gruntを使ったプロジェクトを作る必要がありま

Gruntのtaskの実行にかかる時間を劇的に短縮する方法 最近ではGrunt無しでのフロントエンド開発は考えられなくなってきた気がしますが、大抵taskを実行した際に結構時間がかかってしまいます。 Gruntの実行にかかる時間を減らすにはどうすれば良いのか調べてみたら、loadTasks as they are needed to speed up Grunt load time · Issue #975 · gruntjs/gruntのissueに方法がありました。 何に時間がかかっているか taskを走らせた際、何で時間がかかっているのかをtime-gruntで確認してみると、実行しているtask自体ではなくnpmタスク(適切な表現かは分かりませんがGruntプラグインの事です。)の読み込みの方に時間がかかっている事が分かります。 loadNpmTasks()で2秒はかかっている状態

jQueryプラグインのメソッドパターン このエントリーはjQuery Advent Calendar 2013の 最終目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はjQueryプラグインのメソッドパターンについて紹介をしたいと思います。 jQueryプラグインのメソッドとはどいうものかというと、まず以下のようなプラグインがあったとします。 $.fn.alert = function(options){ return this.each(function(){ $(this).click(function(){ alert(options.text); return false; }) }); } セレクタで指定した要素でアラートを表示するだけの簡単なプラグインです。(プラグインの作り方は「

この記事は Grunt Plugins Advent Calendar 2013 23日目の記事です。 Gruntタスクを並列で実行するプラグイン grunt-parallelize を紹介します。 ある程度プロジェクトが大きくなるとJavaScriptが1500ファイルとか超えてきてJSHintにくっそ時間かかるみたいなことがよくあります。JSHintを含む多くのNode製ツールはシングルプロセスなので、普通に実行しちゃうとマルチコアなCPUが遊んでてもったいないわけです。 そんなときにgrunt-parallelizeを使うと、指定のプロセス数にファイルリストを分割してマルチプロセスでタスクを実行してくれます。 まずはもとになるタスクのGruntfile.jsの定義。grunt-contrib-jshintを使った普通のタスクですね。 grunt.initConfig({ jshint

Although there are many JavaScript frameworks available, jQuery has remained the most popular and influential in web design and development. Its main purpose is to simplify the process of writing complex JavaScript functions by bundling them into methods that can be called with just one line of code. This makes it lightweight and easy to extend with free plugins for almost any functionality you ca

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

モバイルデバイス全盛の昨今、サイトのデザインだけでなく動きも対応しなくては！というケースがあります（私はありました）。 そんなわけで、JavaScriptのタッチ対応ライブラリについて評価を行ってみました。ライブラリの一覧についてはこちらのサイトが詳しく、ここから対応イベント・更新頻度を基に評価対象を表題の３つに絞り、その動作を比較してみました。 各ライブラリによるタッチの挙動は、以下で比較可能です(おまけでTouchyも入ってます)。 Gesture Detector 今スマホやタブレット的な何かでこの記事を読まれているあなた！はぜひ実際に動かしてみて下さい。 私はAndroid4.0デバイスしか持ってないので、xxで動かんぞ、ということがあるかもしれないです。そんな時はコメントなどで連絡いただけたらうれしいです。また、コードはこちら。 結論 **結論としてはHammer.jsをお勧めし

2011-07-22の投稿の「HTML5なVideo Playerライブラリ、VideoJSとMediaElement.js」その後です。 2011-07-22の投稿から2年が経ちました。 2年はネットの世界では大昔な感もあります。 VideoJS, MediaElement.js双方ともアップデートされ再生環境（OS, Browser共々）進化しています。 久しぶりにHTML5 Videoの実装する機会がありそれぞれのライブラリを使用した感想を記録しておきます。 HTML5 Video実装方法。 リンクをクリック モーダルウインドウを開 モーダル内でVideo再生 試行錯誤を重ねた結果モーダル内コンテンツは外部ファイル(HTML)としiframe内に読み込む方式が一番安定していました。 動画: mp4 対応環境: IE 6 ~ 11, Safari 5 ~ 6, Firefox 最新版