最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 4月5日公開澤田 悠♥ 35

米Adobeアドビ Systemsシステムズが主催の世界最大のクリエイティビティ・カンファレンス「Adobe MAX 2017」（ネバダ州ラスベガス）。二日目の10月19日は「スニークス」と題してAdobeの研究中の技術が発表されました。スニークスはAdobe MAXで最大の盛り上がりをみせる恒例の人気イベントです。 ここで発表されたものは現時点では製品に搭載されていないものの将来的に製品に組み込まれるかもしれない技術。過去の例を挙げると、Photoshopのディフォグ（霧を増減させる）機能やマッチフォント機能、最新のPremiere Proに搭載されたイマーシブ空間内での編集機能もかつてスニークスで発表された技術です。本記事では発表された11のテクノロジーを、現地のイベントに参加したスタッフ（池田）がレポートします。 今年は人工知能Adobe Senseiをフル活用した次世代技術のオンパ

DockerfileをビルドしてDockerイメージを作成する Dockerfileとnginx.confの準備ができたら、Dockerfileのあるフォルダーに移動しdocker buildコマンドでイメージの作成を行います。 docker build -t icsmedia/nginx-http2 . -tオプションでは、生成するDockerイメージの名前を指定します。設定しない場合は、自動的に適当な名前で生成されます。.の箇所にはDockerfileが配置されているディレクトリを指定します。Dockerfileの配置されているフォルダーにいる場合は.と指定します。 実行すると数秒ほどでDockerイメージの作成が完了します。docker imagesコマンドを使って以下の通りDockerイメージが作成されていることを確認します。 $ docker images REPOSITORY

Docker（ドッカー）とは、シンプルで軽量なコンテナー型の仮想化環境です。コンテナー技術の採用により、仮想化ソフトウェア（たとえばVMware Player、VirtualBox、Paralles Desktop等）と比べて起動も速く高速に動作します。 ※コンテナー型の仮想化環境については、@ITの記事「アプリ開発者もインフラ管理者も知っておきたいDockerの基礎知識」がわかりやすいでしょう 2016年7月に「Docker For Windows」と「Docker For Mac」が正式リリースされたことで、Windows・macOSでも環境の違いを意識することなくDockerを導入できるようになりました。 Dockerは、サーバーサイドエンジニアやインフラエンジニアだけでなく、Webのフロントエンドエンジニアにも非常に有用なツールです。本記事では、フロントエンドエンジニアがDocke

みなさんは次世代の画像形式「WebP(ウェッピー)」をご存知ですか？　聞いたことはあるものの、作り方や採用したときのメリット、事例にピンとこない方が多いのではないでしょうか。「せめて手軽にWebPを作れるツールが欲しい」と思い、デスクトップアプリケーション「WebP画像を作る君」(英語名は「WebP Converter」)を開発し公開しました。本記事では、このアプリケーションでの使い方から、ウェブページにWebP画像を配置する方法を解説します。 ▲ オリジナルアプリケーション「WebP画像を作る君」。無料で配布しています ▲「WebP画像を作る君」の動作ビデオ WebP(ウェッピー)とは WebP画像形式は米Googleが開発している静止画フォーマットで、採用することでWebサイトの表示速度短縮やトラフィック量の節約が期待できます。具体的には従来のPNG/GIF/JPEG画像形式に比べて次

JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ

Flash Proが改名し大幅機能強化！ ユーザー視点で新生Adobe Animate CCを徹底レポート 2016年2月9日（火）、アドビシステムズより「Flash Professional CC (通称：Flash Pro CC)」が名称を変更し「Animate CC」としてリリースされました。2ヶ月前の記事「Flashが終わったと勘違いをする前に知っておきたい8つのこと」で紹介したとおり、ソフトの改名は業界が震撼した大ニュースだったわけですが、今回のアップデートはどのようなものだったのでしょうか？ 新生Animate CCでは名前が変わっただけではなく、数多くの機能の充実が図られています。アニメーション制作ツールとして完成度の向上、Creative Cloudアプリケーションとしての連携、HTML5への対応強化が主軸となっています。ソフトがどのように進化したのか確認していきましょう。

みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか？ そもそもなぜインデント論争が起こってしまうのでしょうか？　それはそれぞれ一長一短のため好みが分かれてしまうか

コーディング向けの日本語対応の等幅フォント「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

筆者が試したところ、開発環境としてWebStormやVS Codeがとくに優れており、ツールチップにJSDocコメントの情報がすべて表示されました。 ちなみにReactやAngularなどのメジャーなJSライブラリにおいても、そのソースコードではJSDocコメントが使われています (例 : Angular、React)。APIが多岐に渡るJSライブラリを利用するとき、わざわざリファレンスをブラウザで開いたり解説書で調べることなく、コード上で関数の仕様を確認できます。 ▲描画ライブラリCreateJSのAPIを表示したもの JSDocコメントのメリット② APIリファレンスの生成 TypeDoc等のツールを使うことでコードのリファレンスドキュメントを作成できます。こういったJSライブラリのリファレンスはみなさんも一度は見たことがあるのではないでしょうか。 ウェブサイト案件のソースコードでAP

Mac、iPhone・iPad、そしてApple Watch。これらのApple製品上で動くアプリはObjective-CとSwiftという言語で開発できます。Swiftは2014年に発表され、他のプログラミング言語の長所を多く取り入れたプログラミング言語です。何かしらのプログラミングの経験がある開発者にはもちろん、これからプログラミングを始める人にも比較的学習しやすいものとなっています。今回はiOSアプリにおけるパーティクル表現を通して、ActionScript 3.0やJavaScriptのようなウェブ開発技術と比較しながらSwiftを始めてみましょう。 デモについて Swiftで作られたパーティクルアニメーションをiPhone 6 Plus上で動かすデモです。画面上でフリックした場所にパーティクルが発生し、時間の経過とともに色が変わっていきます。 ソースコードはGitHubで公開して

みなさんは普段Node.jsをどのように使っていますか？ サーバーサイドで動くJavaScriptであるNode.jsは、Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、webpackやgulpのようなフロントエンドエンジニアのツールとして使われたりとさまざまな場面で活用されています。 Node.jsで大規模な開発をする場合、TypeScriptを採用して開発の生産効率性・保守性を上げるのもオススメです。WebStormやVisual Studio Codeを使えばコード補完が効くためプログラミングの効率が劇的に向上し、TypeScriptの静的型付けによってコンパイル時型チェックが行われるので安全性が増します。Node.jsを使って中・大規模なシステムを構築するときはTypeScriptを検討するといいでしょう。 今回はNode.jsをTypeScriptで記述する

今回はGitクライアントソフトのSourceTreeから[カスタム操作]という機能を利用して「コミットの差分ファイルをzipファイルとして書き出す」ことを行います。この処理は納品で前回のリリースとの差分のファイルが必要なときに使用すると便利です。 カスタム操作のデモ動画 カスタム操作としてバッチ・スクリプト・exeを登録すると、上図のようにメニューから実行できるようになります Gitをインストールする ※Gitをすでにインストールされている方はこの作業は不要です。SourceTreeの内蔵Gitを使用しているかたはgitコマンドが環境設定に登録されておらず、これから紹介するバッチが実行できない可能性があります。 インストールされているかチェックするためには、Windowsなら「コマンドプロンプト」、Macなら「ターミナル」上で下記コマンドを実行して確認します。 git --version

リアルタイムなデータ通信はインタラクティブなwebコンテンツには不可欠の要素です。今回はリアルタイムなデータ通信を簡単にしてくれるSocket.IOを使ってパソコンとスマホがペアリングするコンテンツを作りました。Socket.IOの簡単な解説と共に紹介します。まずは次のデモをご覧ください。 ※ ファイアーウォールの設定によっては閲覧できない可能性があります。デモ動画も御覧ください。 別画面でデモを再生する サーバーサイドのソースコード(Node.js) サーバーサイドのJavaScriptを含む全ソースコード ※ 全ソースコードをダウンロードし展開後のフォルダーにてコマンドラインでnode serverを実行後、http://localhost:5000にアクセスするとローカル環境でもデモを確認できます。 デモについて デモページにアクセスするとURLとペアリングコードが表示されます。以下

SourceTreeの使い方 | コミットの取り消し方法まとめ（amend, reset, revert, cherry-pick） 高機能Gitクライアントの「SourceTreeソースツリー」（無料）や「Tower」（有償）は導入しやすく機能が豊富なため人気があります。Gitにはコミットやプッシュだけではなくさまざまな機能が存在するので、使いこなすことで効率よく開発を進めていけるでしょう。本記事ではGitを使う上で必須となるcommitコミットの取り消し方法をテーマに、次の4つの機能を解説します。 コミットの修正・やり直し（amend） コミットの取り消し（reset） コミットの打ち消し（revert） 別ブランチからのコミットの取り込み（cherry-pick） 本記事では次の機能をSourceTreeとTowerの両方のソフトウェアの操作方法として解説します。 コミットの修正・や

先日公開した記事「JenkinsでCI環境構築チュートリアル(Windows編)」では、Jenkinsのインストールとジョブの作成方法についてご説明しました。今回は特定のブランチにPUSHされたタイミングでGitHubと連携して最新ファイルを取得する方法をご説明します。 完成イメージ　～JenkinsとGitHubの連携～ 実際の開発シーンを想定して上記の図のようなフローを構築したいと思います。開発者が変更したソースコードをGitHubにPUSHしたことをトリガーにJenkinsにその旨を通知します。Jenkinsはその通知を受けて、最新ファイルをGitHubから取得してくる仕組みとなります。 処理の流れとは逆になりますが、まずはJenkins側で「GitHubから通知を受け取る設定」と「ジョブの作成」から行っていきます。 Jenkinsの設定　～GitHubからの通知を受け取る設定～ 本

APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは

Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。

SourceTreeの使い方 - 初心者が習得すべき基本操作(diff, stash, tag, revert, cherry-pick) GitクライアントのSourceTreeソースツリーは無料で使えるGitアプリケーションとして人気があります。「SourceTreeの基本的な使い方はバッチリ！　だけど、まだまだ使っていない機能があるなぁ」なんて人も多いのではないでしょうか？　そんな人へオススメの知っておくと便利な機能を5つ紹介します。 ※本記事は2020年現在のmacOS 10.15、SourceTree 3で解説しています。Windows版のSourceTreeでも同じ手順で利用できます。 はじめに - SourceTreeとは？ SourceTreeはGit / MercurialのGUIクライアントで、Atlassian社から無償で提供されています。WindowsとmacOSで

クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ 「インタラクティブコンテンツをワンソースでクロスプラットフォームに対応させたい」、それはフロントエンドのデベロッパーであれば誰もが望むことではないでしょうか。一昔前はAdobe Flashが「Open Screen Project」と題して一歩手前まで実現していましたが、iPhoneからFlashを締め出そうとするAppleの強硬な姿勢によって頓挫することになりました。 尾野さん(しっぽさん)からの勧めもあり調べたのですが、「OpenFL」（オープンエフエル）というテクノロジーはさまざまな形式にインタラクティブコンテンツを出力できます。つまりOpenFLを使えばワンソースでクロスプラットフォームを実現できるのです。今回はOpenFLからHTML5とFlashを出力することによってクロス