先月あたりから、オープンソースソフトウェア（以下、OSS）のライセンスのあり方について、Facebookを火種にして侃々諤々の議論が起こっているので解説してみる。 ASFがFacebookにNOをつきつけることの始まりは、Apache Software Foundation（以下、ASF）という著名OSSプロジェクトを多数保有する非営利団体が、Facebookが自社OSSに付加している独自ライセンス Facebook BSD+Patents license を「Category-X」リスト（禁忌リスト）に追加したことだ。 ASFプロジェクトは、Category-Xに含まれるOSSに依存してはいけない決まりがあるため、Facebook製のOSSに依存しているプロジェクトは、8月31日以降はそれらの依存を取り除いてからではないと新しいリリースが出来ない。影響を受けたプロジェクトは少なくとも C

2017年 08月 07日 GulpによるPug、Sass、ブラウザーシンクなどを盛り込んだ開発環境「Speedy」を公開しました。 カテゴリ： gulp タグ：gulppugSassScss Gulpのpugやscss、ブラウザーシンクなど、普段利用する開発環境をGitHubに掲載しています。 GitHub:speedy 何が出来るのか？ htmlを記述するのに pug を採用しています。 div.contents h1.contents_ttl 見出し p.contents_p 本文 <div class="contents"> <h1 class="contents_ttl">見出し</h1> <p class="contents_p">本文</p> 上記のように、pugだとタグを簡潔に書くことができ、閉じタグの必要がありません。ですので、コーディングで発生する閉じタグ忘れや、タグの

TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド

多くのサイトは脱Flashの流れのなかにあり、従来Flashで作られていた表現の多くはHTML5へ移行が進んでいます。使われている技術は変われど、アニメーションを心地よく見せる技やユーザーを楽しませる要素は普遍的なもの。かつて話題になったFlashサイトから得られるものは多いはずです。 2017年7月26日（水）、ブラウザプラグインのFlash Playerが2020年末に終了すると、アドビが発表しました（参照「Flash とインタラクティブコンテンツの未来 | Adobe.com」）。Flashサイトがブラウザで見られなくなってしまうまでに見納めするべきサイトをまとめました。 FONTPARK 2.0 | MORISAWA 別ウィンドウで開く フォントメーカー「モリサワ」のウェブサイト（2008年公開）。文字のパーツを組み合わせてオリジナルのイラストを作成し、作品として投稿・共有できます

ブラウザからハードウェアアクセラレーションを使用してリッチな表現を実現できるWebGL。その新たなバージョンであるWebGL 2.0が主要なブラウザで正式対応し始めました。2017年1月にリリースされたChrome 56とFirefox 51や、2021年9月のSafari 15から標準で利用でき、ウェブ表現のさらなる進化への期待が高まります。 本連載では3回に分けてWebGL 2.0の新機能をデモを交えて紹介します。 WebGL 2.0の機能を使ったデモ まずはWebGL 2.0ではどんなことができるのか、機能ごとにデモを作成したので紹介します。それぞれ、マウスドラッグやマウスホイール/上下矢印キーで視点を変更できるので動かしてみてください。 ※各デモはWebGL 2.0で作成しています。WebGL 2.0に対応したブラウザでご覧ください。 Geometry Instancing Geo

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

最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo

3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne

SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、

npmとはNode.jsインストール時に付属するパッケージマネージャーで、Node.jsのパッケージの管理や実行を取り扱うものです。 npmのバージョン5.2.0で導入された「npx」を用いると、下記のようにローカルにインストールしたnpmパッケージを、npxコマンドだけで実行できるようになります。 npxはnpmにバンドルされているため、npxの個別インストールは不要です。 次のようにしてモジュールを実行できます。 従来のnpmの実行方法との比較 従来では、ローカルのnpmパッケージを使用するには、次のような方法が必要でした。 方法1: ./node_modules/.bin/(パッケージ名)で実行する 方法2: $(npm bin)/(パッケージ名)で実行する 方法3: package.jsonにnpm-scriptsを記述して実行する npxはいずれの方法よりも簡潔なコマンドで、パッ

ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。本記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基本については前回の記事『CSS Grid Layout入門』を参照ください。 この

オブジェクト指向で挫折しないために オブジェクト指向のプログラミング言語は当たり前の存在になり、たしかに目新しさはなくなりました。業務でオブジェクト指向のプログラミング言語が使っている方も多いと思います。 だとすれば、そもそもオブジェクト指向とはどういうもので、実際のプログラミングでどう役立つのか、特別に学ばなければならないようなものなのでしょうか。 考えてみてください。たとえRubyやJavaを使えているとしても、オブジェクト指向プログラミングができているとは限らないのです。Rubyを学び、Railsの本を読んで自動生成されるコードを書き換えることはできても、自分でクラスを追加することができない方もいるかもしれません。 Ruby、Java、Pythonといった個別の言語を学習すると、どうしてもその言語の特徴や機能を中心に学ぶことになります。オブジェクト指向は技術書を読む前提知識として扱わ

ボタンのタップ、ページのスクロールで開始される「マイクロインタラクション」は、ウェブサイトやアプリを印象的に魅せる効果があります。画像の拡大縮小に強いSVGは、さまざまなデバイス向けのマイクロインタラクションの実装に効果的です。今回は、はじめてマイクロインタラクションやSVGに触れるウェブクリエイターを対象に基礎知識を紹介します。 マイクロインタラクションとは 「マイクロインタラクション」とは、ある目的を果たすために1つの作業を行うインタラクションのことで、Dan Saffer氏が著書「マイクロインタラクション」の中で定義したものです。「部屋のライトをつける」「SNSでいいねボタンを押す」「ウェブサイトでスクロール時にグラフを表示する」といったことが、マイクロインタラクションの例として挙げられています。 マイクロインタラクションの構造 マイクロインタラクションは、次の4つの構造に分解できま

ハンターハンターという書物が日本の数ある著作の中でも一際輝く余りにも崇高な作品であり、それが他に類を見ない程に恐ろしく含蓄の詰まった奇跡のマスターピースであることに関しては、もはや議論の余地がない。 人間の生き方や万物の捉え方に関して、これ程までに多くのことを伝えてくれる聖書は、およそ他に見当たらない。もう何度読み返したことか分からないが、台詞は殆ど丸暗記してしまった。完全にメモリの無駄使いだ。 最初の頃は厨二病を極めたキルアとヒソカが個人的なお気に入りのキャラクターだったが、2周3周と読み直すうちに圧倒的にメルエムが好きになり、長らくメルエム時代が続いた後ゲンスルーがお気に入りになってからレオリオになり、その後イルミになってから、ミミズやノヴやバショウに注目する時代を経て、近年、とうとう、まわりにまわってゴンに辿り着いた。 ハンターで好きなキャラは何ですかと聞かれた時に「ゴン」と答えるの

ウェブサーバーのコンテナーを作成 # docker-compose.ymlのwebコンテナ部分を抜粋 web: build: ./web ports: - "80:80" - "443:443" volumes_from: - app volumes: - ./web/nginx.conf:/etc/nginx/nginx.conf ウェブサーバーは前回の記事で作成したDockerfileを利用します。webという名前のフォルダーにDockerfileとnginx.confを格納し、Dockerfileを格納したフォルダーのパスをbuildで指定してください。ただし、ウェブサーバーの設定ファイル（nginx.conf）は外部化しておきたいため、volumesでwebフォルダーに格納したnginx.confをコンテナー内（/etc/nginx/nginx.conf）にマウントします。 ngi

戦略とマーケティングを 込めたデザイン コミュニケーションを最適に デザインする Web & Graphic Design

俺の嫁、かわいいです。フェレットもかわいいんですけれども。 お酒にとっても強いです。全く顔に出ない。それでよく勘違いをされる。 でも実際は酔っていて、よく聴いていると変なことばかり言います。普段、人前ではすごく気を使っているんですけれども。そういうギャップもまたかわいいですね。 ちなみにフェレットは、飼い主に気を使うことはほとんどないです。ギャップ、ゼロ。その点、嫁はフェレットよりもかわいい。 嫁のどこがフェレットっぽいかというと、欲望の赴くままに突き動かされるところとか。毎日コンビニで酒のつまみとチキンを買っています。眠たくなったら寝て、絵を描きたくなったら描く。私も同じなんですけれども。 フェレットもお腹が空いたら食べるし、眠ければすぐ寝るし、かまってあげないと退屈そうにしています。トコトコと意味もなくあちこち動き回ったり。 ちなみに、フェレットも私も足が短いですが、嫁は長くてスタイル

エフェクトツール「Effekseer」ですが、2017年5月25日、WebGLに対応したEffekseerForWebGLがリリースされました。今回はEffekseerで作成したエフェクトをJavaScriptライブラリ「Three.js」を使ってWebGLで表示するまでの流れを紹介します。 EffekseerForWebGLのデモ デモを別ウインドウで再生する ソースコードを確認する Effekseerでのエフェクト作成をオススメしたい理由とは？ 1つのエフェクトソースでマルチプラットフォームに展開できる点。たとえばEffekseerはUnityにも対応しているため、WebブラウザとUnityプラットフォームの両方に対応できます (DirectXやOpenGLを用いたアプリケーション、Cocos2d-x、Unreal Engine4、さらにはMMDやSiv3Dにも対応）。Unity用コン

CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。特に、Flexboxではつくるのが難しい、縦軸・横軸がある格子状のレイアウトに向いています。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基本的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくりながらGrid Layoutの基礎を学ぶ 次のようなヘッダー・メイ

SVGはベクターグラフィックスの画像形式で、昨今のウェブサイトで幅広く使われています。ウェブサイトのアニメーションやインタラクションにもSVGを使えますが、その用途ではJavaScriptを使わなければなりません。 たとえば矩形を1つ描くだけでも標準のAPIでは10行近いコードの記述が必要になりますが、JSライブラリを利用するとほんの数行で実装可能です。手軽に導入できるだけでなく、JSライブラリを使うことで表現の自由度が上がったり、古いブラウザもサポートできる利点もあります。この記事では有用なSVGライブラリをいくつかピックアップし、それぞれの特徴を紹介します。 Snap.svg Snap.svgはAdobe Systems社が提供しているオープンソースのライブラリです。SVG DOMの操作や、アニメーション・モーフィング、マスキング・クリッピングといったさまざまな高度な機能を簡潔に提供し