はじめに ウェブアプリで画面全体にわたるようなリッチなエフェクトを掛ける手段のひとつとして、デザイナさんに作ってもらう動画(たとえばAfter Effectsで)をそのまま使う、なんてことは出来ないかと考えてトライしてみました。 HTML要素の上に半透過の動画を <video> 要素で置くことで、もとのHTMLを動画で演出、みたいなことができています。 できあがった物はこちらで確認出来ます webm transparent test ブラウザは Chrome しか対応しておりません！ご注意。 環境 Windows 7 pro 64bit Google Chrome After Effects CS 5.5 FFmpeg 2.5.1 ちなみに、WebM を透過して表示できるのは、PC/Mac のChrome だけのようです。悪しからず。 Firefox@Mac だと、アルファチャンネルが捨て

本稿について 本稿の対象者 本稿は、次の方を対象に書いています。 CUI(本稿はターミナルを利用)にて、ディレクトリ(フォルダ)構造などがわかる方。 (例 $ cd ~/mastodon/ と打ったときにどうなるかわかる方) Mastodonをローカルで動かしたいけど、他の解説が少し難しいと感じた方。 Dockerって聞いたことあるけど、使う機会がなくて試して見たい方。 Mastodon(Github)(以下、ドキュメント)通りに解説を進めますので、コマンドなど照らし合わせながらご覧ください。 ※リモートでサーバーを立てて動かす等の解説はいたしませんのでご了承ください。 ※またMastodonの使い方も解説はいたしません。 解説の環境 本稿は、 macOS Sierra(10.12.3) CUIはターミナル の環境にて解説しています。 STEP.0 Dockerをインストールする Mast

公開日 : 2014年4月15日 (2018年1月20日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) WAI-ARIA 1.0 が、2014年3月20日付で W3C の勧告 (Recommendation) になりました。 WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェース (UI) であっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリー

Mastodon は自分のドメインでIDを持つことが大事。「リモートフォロー」の価値を最大化するべし。 流行しているMastodonですが、複数のインスタンスにIDを登録したり、一つの大きなサービスに依存したりするIDの取り方をしている人が多いです。本記事では、リモートフォローの価値や自分のドメイン上でMastodonを構築する価値について説明します。 リモートフォローとは　Mastodonは、OStatusというプロトコルで動いています。僕は、OStatusをサポートするサービスの最大の価値は「リモートフォロー」にあるのではないかと思っています。「リモートフォロー」という仕組みは、ひとことでいえばPUSH型RSSです。 リモートフォローは、フォロワーが別なインスタンスのIDであっても、そのインスタンスに更新を通知します。いままで、RSSリーダーで各サイトのRSSを巡回して購読していたわけ

npmとwebpackで作るいい感じのフロントエンド開発環境（React.js使わない）2016年5月の場合。 これをベースにしてthree.jsの開発環境。 以前はGruntやGulpやらで用意してたけどnpm+webpackへ移行。 three.js - Javascript 3D library WebGLをあつかう時にWebGLままで記述するのはちょっとツライので何かしらのフレームワークを利用すると思うけど（Unityでも作れるらしい）その中でもthree.jsが今のところメジャー。なので情報も多いし事例も多い。 開発するってことになるとCDNから圧縮されたthree.min.jsを読み込むのもいいんだけどwebpackでrequireしてみました。 必要なものあるかどうか確認

現場で使えるアニメーション系JSライブラリまとめ GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジャーなJSライブ

はじめに webブラウザからリンクをクリックして、KindleやiTunesを起動したことありますよね。 このときリンク先アドレスは以下のようになっています。 kindle://home/?action=refresh itmss://itunes.apple.com/jp/album/liang-cheng-bai/id1065727732 カスタムURIですね。 自分で作ったElectronアプリもカスタムURIで起動したいと思います。 完全なソースはGitHubにあります。 github.com こんな感じで動きます。 カスタムURIの登録 MacとWindowsに分けて書きます。 MacでのカスタムURIの登録 Macの場合は、アプリのinfo.plistにCFBundleURLNameを登録することで、カスタムURIでアプリを起動できるようになります。 https://devel