サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
画力アップ
www.fumiononaka.com
React + Redux入門 08: Redux公式サイトのTodoリストの作例をフックuseDispatch()とuseSelector()で書き替える ID: FN2004005 Technique: HTML5 / ECMAScript 2015 Library: React 16.13.1 / Redux 4.0.5 / React Redux 7.2.0 前回は「React + Redux入門 02: フィールドに入力したテキストを項目リストに加える」の作例を、フックuseDispatch()とuseSelector()で書き替えました。このシリーズは、Redux公式サイトの「Example: Todo List」をつくるチュートリアルで、第6回ができ上がりです。けれど今回は、「React + Redux入門 05: PropTypesで型を確かめる」の作例(サンプル001)に
ID: FN1905001 Technique: HTML5 / ECMAScript 2015 Library: Vue.js 2.6.10 Vue.jsは、ユーザーインタフェースをつくるためのプログレッシブフレームワークです(図001)。画面の表示(View)に絞った操作を扱います。jQueryでつくると手間がかかるようなインタフェースも、簡単にわかりやすく組み立てられます。本稿では、Vue.jsのインストールおよび設定を行い、とりあえずごく簡単に画面のインタラクティブな操作をしてみます。なお、JavaScriptコードの構文は、ECMAScript 2015(ECMAScript 6)準拠です。 図001■Vue.jsのサイト 01 Vue.jsのインストールと設定 Vue.jsサイトのトップページにある[はじめる]ボタン(前掲図001)で「はじめに」のページに移ります。そして、左カ
ID: FN1809001 Technique: HTML5 / ECMAScript 2015 Tool: Vue CLI 3.0.4 Vue CLIサービスは、Vue CLIプロジェクトにインストールされるバイナリです。デフォルトで備わっているコマンドのほか、プラグインが加えるものもあります。本稿は「CLI Service」をもとに、CLIサービスについてご説明します。 01 バイナリを使う Vue CLIプロジェクトには、@vue/cli-serviceがvue-cli-serviceという名前のバイナリをインストールします。バイナリは、 npmスクリプトではvue-cli-serviceで直ちに参照できます。ターミナルからは、./node_modules/.bin/vue-cli-serviceです。 デフォルトのプリセットでつくられたプロジェクトでは、package.jsonのs
ID: FN1807001 Technique: HTML5 / ECMAScript 2015 Tool: Vue CLI 3.0.0-rc.9 Vue CLIは、Vue.jsでアプリケーションをつくるための、コマンドラインインタフェース(CLI)にもとづく開発ツールです(図001)。2018年7月29日にv3.0.0-rc.9が公開されました。本稿では、Vue CLIの機能とシステムの構成要素について簡単にご説明します。 図001■Vue CLI 3サイト 01 Vus CLIの機能 Vue CLIは、 Vue.jsの開発を手早く進めるためのシステムです。つぎのような機能が備わっています。 インタラクティブなプロジェクトのひな型作成 - @vue/cli 設定なしに即使えるプロトタイプ作成 - @vue/cli + @vue/cli-service-global 実行時の依存設定 -
ID: FN1804003 Technique: HTML5 / JavaScript Package: TypeScript 2.8.1 Application: Visual Studio Code 1.27 「TypeScript」はマイクロソフトが開発したオープンソースのプログラミング言語です(「TypeScript: とにかくJavaScriptファイルをビルドしてみる」参照)。そのマイクロソフトが提供する無償の高機能エディター「Visual Studio Code」は、もちろんTypeScriptをサポートします。本稿では、Visual Studio Codeをインストールして設定したうえで、TypeScriptの簡単なコードをビルドしてみます。なお、TypeScriptはあらかじめインストールしておいてください(「TypeScript: とにかくJavaScriptファイルを
ID: FN1610004 Technique: HTML5 / JavaScript Package: TypeScript 2.0 TypeScript 2.0にreadonly修飾子が備わりました。この修飾子で読み取り専用のプロパティ、つまり定数が定められます。 01 これまでの定数の定め方 これまでのTypeScriptでも、読み取り専用の変数やプロパティを定めることはできました。ここでは、つぎのクラス(Point)を例にして、定数の扱いをご説明しましょう。なお、このクラスはTypeScript入門01から同06までの解説で書いたコードから、一部を抜き出して簡単にしたものです。具体的な中身については、それらのノートをお読みください。コンストラクタには引数として(x, y)座標を与えます。ふたつのgetアクセサで、それぞれ座標の原点からの距離(length)およびx軸となす角度(an
ID: FN1702008 Technique: HTML5 / JavaScript Library: Vue.js 2.1.10 Vue.jsには、普通のプロパティとメソッドのほか、プロパティのように扱えるメソッドが備わっています。そのプロパティで、条件に合ったデータを数えて返してみます。 [注記] 本稿はVue.js 2.6とECMAScript 2015(ES6)にもとづく「Vue.js + ES6入門 05: 項目を数えて表示する」に改訂しました。 01 項目の数を示す 「Vue.js入門 04: フィールドに入力したテキストを動的に項目として加える」でつくったコード001に手を加えてゆきましょう。アプリケーションに納めた複数のデータがリストとして示され、入力フィールドのテキストは「追加」ボタンで項目に加えられます(図001)。これら項目のすべてとチェックされていない数を、それぞ
ID: FN1710004 Technique: HTML5 / ECMAScript 2015 Library: Vue.js 2.5.2 Vue.jsサイトの「グリッドコンポーネントの例」は、コンポーネントの使い方を知るのによい作例です。 これをECMAScript 2015(ECMAScript 6)の構文でつくってみます(サンプル001)。とくに、データのコレクション(リスト)は、Arrayクラスの新しいメソッドとアロー関数式で扱うようにしました。Vue.jsについては、すでに入門ノートを何本か書いています。これらノートやVue公式サイトの情報は必要に応じて本文に引用しましたので、詳しく知りたい場合にはそちらをお読みください。 サンプル001■Vue.js + ES6: Grid component with sort and search See the Pen Vue.js +
ID: FN1701003 Technique: HTML5 / JavaScript Library: D3.js 4.4.0 D3.jsは、データにもとづいて動的にコンテンツを描くJavaScriptライブラリです。HTMLやSVG、CSSなどのWeb標準にのっとって、モダンブラウザにデータを可視化します。本稿はライブラリの基本的な使い方と構文について、かいつまんでご説明します。 01 D3.jsをインストールする ライブラリはD3.jsサイトからダウンロードできます(図001)。本稿執筆時のバージョンは、4.4.0です。また、GitHubでソースが公開されています。CDNを使う場合には、つぎのコードをコピーしてください。
ID: FN1704013 Technique: HTML5 / JavaScript Package: Angular 4.0 Angularは今もっとも注目されているフレームワークで、SPA(Single Page Application)の開発に力を発揮します。2017年3月23日には、メジャーバージョン番号をひとつ飛ばして、Angular version 4.0.0がリリースされました。ただし、ローカルで試そうとすると、環境をつくらなければならず、TypeScriptなど学んでおかなければならない技術もあります。JavaScriptの基礎を身につけただけでは足りず、力尽きてしまいそうになるかもしれません。本稿はAngularサイトの「QuickStart」と「Setup for local development」にもとづいて、環境を整え、サンプルのコードを動かすまで、できるかぎり
SassはCSSと完全な互換性をもった拡張言語です。CSSにないさまざまな機能を使って、柔軟かつ効率的にスタイルが定められます。Sassの書き方の基本を公式サイトの「Sass Basics」に沿ってご紹介します。構文をSCSSに絞り、解説はわかりやすく改めて、参考のリンクも加えました。 Sassで書いたファイルは、CSSに変換してHTMLドキュメントに用います。まだ環境を整えていない方は、先に「Sass: 使えるようにするには」をお読みください。 01 変数 変数に納めた値は、スタイルシート全体で使い回せます。変数の値を変えると、変数で与えたプロパティの値もすべて書き替わるのです。Sassの変数は$記号を頭につけて定めます。SassをコンパイルしたCSSからは変数は除かれます。変数を参照したプロパティの値は、CSSでは変数値に書き替えられるのです。サイト全体で使うカラーやレイアウトの尺度な
ID: FN1704008 Technique: HTML5 / JavaScript Library: EaselJS NEXT 2017年4月13日付CreateJS Blogに「StageGL - A Faster, Better, Stronger WebGL update to EaselJS」と題して、EaselJSに新たなWebGLへの対応としてStageGLクラスが導入されると発表されました。本稿はこのblogにもとづいて、その中身をご紹介します。 01 StageGLで何が変わるのか EaselJSにStageGLクラスが導入され、WebGLへの対応がより強化されることになりました。これまでのSpriteStageクラスの制約が取り払われ、パフォーマンスが増すとともに、フィルタの機能も加わります。クラスからSpriteStageがなくなり、StageGLはStageと置き
ID: FN1611004 Technique: HTML5 / JavaScript Package: Angular 2.1 Angular 2は今もっとも注目されているフレームワークで、SPA(Single Page Application)の開発に力を発揮します(「GoogleがAngular 2を正式リリース! 未来のウェブ標準を意識した新しいフレームワーク 」参照)。ただし、コードを書き始める前に、環境をつくらなければならず、TypeScriptなど学んでおかなければならない技術もあります。JavaScriptの基礎を身につけただけでは足りず、力尽きてしまいそうになるかもしれません。本稿はAngularサイトの「QUICKSTART」と「Setup for local development」にもとづいて、環境を整え、簡単なコードを動かすまで、できるかぎり手っ取り早くご説明しま
Animate CC 2017では[HTML5 Canvas]ドキュメントにも、数は少ないもののActionScript 3.0と同じように[コンポーネント]が備わりました(図001)。本稿では、その中のユーザーインターフェイスコンポーネントの使い方についてかいつまんでご紹介します。 図001■[HTML5 Canvas]ドキュメントの[コンポーネント]パネル 01 ComboBoxコンポーネントに項目を定める [ウィンドウ]メニューから[コンポーネント]パネルを開いて([command]/[Ctrl] + [F7])、ComboBoxコンポーネントをステージにドラッグ&ドロップしたら、[プロパティ]パネルでインスタンス名(my_cb)を与えます(図002)。 図002■ComboBoxコンポーネントのインスタンスに名前を与える ComboBoxインスタンスのドロップダウンリスト項目は、[
ビデオライブラリ: LinkedInラーニング ハンズオン講座: 「jQueryではじめるJavaScript入門」 「Vue.js入門講座」 ■Twitter: @FumioNonaka / Facebook Page: CreateJS / Away3D Creators MeetUp vol.30 「ネイピア数」eは、自然対数の底として用いられ、多くのプログラミング言語に定数Math.Eとして備わる。けれど、ほとんどの人生にまったく必要のない数で、この定数を使わずに過ごすプログラマが大半だろう。これほどまでに実用性のとぼしい定数が、数学や自然界のふとした端々に顔を現す。そんな「ネイピア数」の生態を追ってみたい。 このレジュメは、2015年7月18日土曜日に催された第30回Creators Meetupで務めた同名の高座の参加者向けとして書いた。当日のYouTube録画をつぎに掲げる。
ID: FN1609002 Technique: HTML5 / JavaScript Package: TypeScript 2.0.3 「TypeScript」はマイクロソフトが開発したオープンソースのプログラミング言語です(「TypeScript: とにかくJavaScriptファイルをビルドしてみる」参照)。そのマイクロソフトが提供する無償の高機能エディター「Visual Studio Code」は、もちろんTypeScriptをサポートします。本稿では、Visual Studio Codeをインストールして設定したうえで、TypeScriptの簡単なコードをビルドしてみます。なお、TypeScriptはあらかじめインストールしておいてください(「TypeScript: とにかくJavaScriptファイルをビルドしてみる」01「TypeScriptをインストールする」参照)。 0
ID: FN1609001 Technique: HTML5 / JavaScript Package: TypeScript 2.0.3 「TypeScript」はマイクロソフトが開発したオープンソースの無償プログラミング言語です。JavaScriptに静的型づけとクラスベースのオブジェクト指向を加えたスーパーセットとなっています。TypeScriptでコードを書いてJavaScriptファイルをビルド(書き出し)するまでには、整えなければならない環境や予備知識が求められます。本稿では、そうした準備をできるかぎり少なくして、TypeScriptの簡単なコードを動かしてみます。 01 TypeScriptをインストールする TypeScriptは「npm」(Node Package Manager)でインストールします。そのため、あらかじめNode.jsをインストールしておいてください(「
ID: FN1608001 Technique: HTML5 / JavaScript Library: React 15.4.2 ReactはFacebook社が開発している、今もっとも注目されているJavaScriptフレームワークです。HTMLの要素を動的につくり上げて、ページに表示することができます。ただ、なじみの少ない構文などの予備知識や準備が求められるため、初めての方には手をつけにくいきらいがあります。本稿では最小限のコードを示して、とりあえず大枠をご説明します。 01 ページに"Hello, world!"のテキストを動的に表示する 最小限のコードは以下に掲げました(コード001)。コードをそのままHTMLドキュメントにコピー&ペーストすれば、"Hello, world!"のテキストが示されます(図001)。 図001■ページに示された"Hello, world!"のテキスト
ID: FN1601002 Technique: HTML5 / JavaScript Library: AngularJS 1.5.3 AngularJSは、Google社とコミュニティが開発するJavaScriptフレームワークです(図001)。MIT Licenseのオープンソースで、商用にも使えます。AngularJSは、JavaScriptで書いたクライアント側のコントローラによりデータモデルを管理し、画面(ビュー)とリアルタイムにデータを交換するのに適したフレームワークです。本稿では、AngularJSのインストールおよび設定を行い、とりあえずごく簡単なアプリケーションとして動かしてみます。 図001■AngularJSのサイト 01 AngularJSのダウンロードと設定 AngularJSはサイトのトップページにあるボタンでダウンロードします(前掲図001)。Angular
jQueryのプラグインParticlegroundを使うと、Webページの背景に粒子のアニメーションが加えられます(サンプル001)。マウスポインタの位置に応じた視差効果(パララックス)も備わっています。このプラグインの使い方をかいつまんでご紹介しましょう。 サンプル001■jQuery + Particleground: Background particle 01 プラグインParticlegroundのダウンロードと設定 Particlegroundのページの[DOWNLOAD]ボタンでプラグインのZIPファイルがダウンロードできます(図001)。また、ページ右上にはGitHubへのリンクがありますので、そちらで確かめてダウンロードしても結構です。 図001■Particlegroundのページ ParticlegroundをjQueryのプラグインとして使いますので、script
2015年6月にメジャーアップデートされたFlash Professional CC 2015のHTML5 Canvasのパブリッシュと2015年5月21日のCreateJSアップデートの新しい機能や、2014年12月12日のバージョンアップの中であまり触れられてこなかったり、ドキュメントからはわかりにくい項目について、少し掘り下げて解説する。 01 Flash Pro CC 2015のHTML5 Canvasパブリッシュの改善 01-01 書出しの最適化 Flash Professional CCは、HTML5 Canvasドキュメントの[ライブラリ]に含まれる以下の項目は書出されない(CC 2014の2015年2月アップデート)。 タイムラインで使われていないシンボルやサウンド、ビットマップなど ガイドレイヤーに含まれる素材 非表示レイヤーに含まれる素材([非表示レイヤーを含める]オプ
lynda.com ビデオライブラリー Webクリエイターのための CreateJSスタイルブック gihyo.jp連載 「CSS3アニメーションでつくる インターフェイス表現」 ハンズオン講座: 2018年02月09日金曜日「Vue.js入門講座」 2018年02月23日金曜日「jQueryではじめるJavaScript入門」 ■Twitter: @FumioNonaka / Facebook Page: CreateJS Creators MeetUp vol.22 三角関数のsinとcosは、直角三角形の辺の比率として初めに習う。それをプログラムのアニメーション表現で使うのは、おもに円運動だ。「三角」がどうして「円」になるのか、疑問をもったとしても不思議はない。sinとcosはどう定められ、どういう性質があるのかという基本を中心に、変わったアニメーションの応用表現も紹介したい。 この
CSS3のプロパティtransformやtransitionを用いると、要素をアニメーションさせたり変形することができます。Lopan.jp「動くCSSのためのメモ。」はさまざまな作例で、CSS3の効果を解説しています。それらを参考に、イメージとテキストが組合わったサンプルを3つつくりました。いずれも、マウスポインタを画像に重ねると、それを説明するテキストが表れます(サンプル001)。JavaScriptコードは書いていません。 サンプル001■CSS3: Showing texts over images on rollover *デフォルトの画面は少し狭いので、フルスクリーンにすると全体が見えます。 01 画像の上にテキストが広がる 初めのサンプルは、画像にマウスポインタを重ねたら、テキストが真ん中から広がって表れるようにします。画面に置く画像とテキストの要素は、つぎのようにリストで組
CodePen「fade loading」に、CSS3を使ってテキストを順に浮かび上がらせるようなアニメーションの手法が紹介されています。animationプロパティでテキストの影を、ひと文字ずつ時間差で増減させることにより浮き沈みが表現されているのです(サンプル001)。「fade loading」のコードをさらに簡単にして、仕組みをご説明します。 サンプル001■CSS3: Fading in and out characters in sequencial order 01 Webフォントの文字を影で浮き上がらせる まず、テキストのフォントには「Nunito」を選びました。SILオープンフォントライセンスにもとづき、Google Fontsから読込めます(図001)。スタイルは「Bold 700」を用いいることにします。 図001■Google Fontsの「Monoton」 Web
Flash Professional CC 13.1から加わったドキュメント形式の[HTML5 Canvas]を用いれば、入れ子にしたタイムラインのインスタンスがCreateJSで親子の階層としてActionScript 3.0のように扱えます(新たなドキュメント形式については、「Flash Professional CC 13.1のHTML5 CanvasドキュメントとCreateJS」をご参照ください)。ただし、子インスタンスに定めた関数を呼出そうとすると、かなり勝手が違ってきます。 01 子インスタンスを参照しただけではその中に定めた関数が呼出せない メインタイムラインに置いたインスタンスに、つぎのような簡単なアニメーションの関数(rotate())を定めたとします(図001)。たとえば、インスタンスをクリックしたとき呼出したいのであれば、さらにこの[アクション]パネルにJavaSc
CSS3のtransformプロパティは、要素に回転・伸縮・傾斜・移動などの座標変換を加えます。さらに、transform-styleプロパティも合わせて用いれば、要素が3次元空間で変換できます。記事「Creating an animated 3D CSS cube using 3D transforms」のサンプルを参考に、CSSで3次元空間に立方体をつくって回してみます(サンプル001)。 サンプル001■CSSで3次元空間に立方体をつくって回す 01 3次元空間の座標変換で使うCSSプロパティ CSSのtransformプロパティは、要素に座標変換を加えます。具体的には、要素の回転や伸縮、傾斜、平行移動がプロパティで定められます。transformプロパティの値には、変換関数を与えます。次表001に掲げたのは、2次元平面の座標変換を行う関数です[*1]。 表001■transform
バネが伸び縮みするアニメーションは、「単振動」と呼ばれて三角関数で表すのが定石です。けれど、バネの端をもって振り回すような動きは、加速度にもとづく式で扱うのが便利です。この式は「オイラー法」という数学の考え方から導かれます。 01 三角関数を使ったバネの動き バネの伸び縮みをアニメーションで見せたいときは、三角関数のsinまたはcosを使うのが定石です。sinとcosは半径1の「単位円」で定義されます。単位円の円周上の点Pと原点O(0, 0)を結ぶ線分がx軸の正方向となす角度をθとすると、点Pの座標は(cosθ, sinθ)と定められています(図001)。 図001■単位円の円周上の座標は原点と結ぶ線分がx軸となす角をθとするとき(cosθ, sinθ) 角度θを等しい速さで増やしてゆくと、sinθとcosθは値がバネの動きのように上下します。横軸を角度、縦軸に三角関数値としたグラフを描く
2014年1月28日付CreateJS Blogに「WebGL & EaselJS: a Technical Intro」という記事が投稿されました。EaselJSの次期バージョンがサポートするでWebGLレンダラをどのように使うかの入門的な解説です。現在、EaselJS次期バージョンはパブリックプレビューがGitHubに公開されています。本稿はblog記事にもとづいて、新しいWebGLレンダラについてご紹介します。なお、次期バージョンに備わる機能については、「EaselJSがWebGLをサポート」をお読みください。 01 はじめに これまで試されたかぎりでは、一般的に使うWebGLレンダラをEaselJS向けに開発する意味はないと考えられていました。最近のCanvasの実装は、すでにさまざまな2DコンテンツをGPUで適切に描くことができます。それも、ネイティブコードにより、重い仕事をこな
次のページ
このページを最初にブックマークしてみませんか?
『FumioNonaka.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く