MacとWindows共存/共用のために「変わらない操作性/インターフェイス」を目指してみた！
2018-06-01 
ずっとwindows派でしたが、仕事や開発の都合により、Mac使用機会が増えてきました！
こちらの記事の通り、自分はずっとwindows派でした。Macも持っていましたが、しばらくはあまり使っていませんでした。それは、別にwindows信者だからという訳ではありません。Thinkpadのキーボードが好きすぎるからです。そのThinkPadのキーボードが使えるのが、windowsだけ。なので、windowsを多用してきました。（詳細はコチラの記事で）
しかし、仕事や開発を行うときには、どうしてもMacのほうが楽なことが沢山あるんですよね。詳細は省きますが、MacのほうがUNIXベースで設計されており、特にweb系の開発では圧倒的に環境構築がMacのほうが楽なんです。
ということで、MacでもThinkPadを使えるように頑張ってみました。また「windowsでもMacでも変わらない操作性/インターフェイス」というものを目指してみました。MacとWindowsを両方併用して使いこなしたい、という方に参考になればと思い、記事化してみました！
Amazonタイムセール祭りでAdobe Creative Cloud製品の安売り中！でも、もっとお得な方法＆お得な時期があるよ！
6/2までAmazonのタイムセール祭りが開催中です！
現在、Amazonでタイムセール祭りが開催中です。このタイムセールは5/31～6/2までの3日間開催されているセールです。電子機器を筆頭に、様々な製品が安売りとなっています。そんな中で注目はAdobe Creative Cloud製品です。度々安くなっていますが、今回はお得なんでしょうか？このあたりについて、解説させて頂きます！
自分の力作ツール「余命カウントダウンタイマー」が評価された！こんなに嬉しい事はない！
ブログの更新を少し休んでいた間、自分の力作「余命カウントダウンタイマー」が評価されていました！
本サイト/ブログ、先月2018年5月は丸々一ヶ月休んでいるような状態でした。とある生活事情で。こんなに一ヶ月もブログ更新しなかったのは、ほぼ初めてのことです。この期間中で、やっぱりブログを更新するのは自分の生活リズムになっているという事を改めて感じました。これからは、更新バンバン頑張っていきたいと思います！
さて、その休んでいた一ヶ月で嬉しいことがありました。それは、自分の最大の力作である「余命カウントダウンタイマー」が評価された事です。こちらの「驚愕の事実！キミの人生に劇的変化を起こすために気づくべきたった1つの事 | ジュンイチのブログ」さんで紹介してくれた事をきっかけに、多くの方が使用してくれるようになったんです！
↓一部だけ、その記事のスクリーンショットを掲載させて頂きます。こんな感じで紹介して頂きました！
[Adobe Animate CC] GIFアニメ作成ツール基盤作りました！Animate CCを最大活用すると、こんな便利なツールまで作れますよ！
Adobe Animate CCには物凄く便利な機能が備わっています。でも、なかなかその利点が伝わりにくいです。Adobe Animate CCの利点は、コチラのその他製品との比較記事でも記したとおり、「ゲームやアニメ、ツールなど各要素を良い具合で混ぜ合わせて、リアルタイムにインタラクティブに使えるコンテンツを生み出せる」ことです。レンダリングに何時間もかかる高画質なアニメーションには勝てませんが、リアルタイムにアニメーションを変えられるということが最大の特徴なんです。
その利点を活かして、GIFアニメ作成ツール基盤を作ってみました！これは、「Animate CCのアニメーションを一定の基準を満たすように作れば、ユーザーがカスタマイズしてGIFアニメを作成できるツールにしてしまうプログラム」です。今回はAdobe Animate CCがここまで、スゴイことが出来るんですよ！というアピールを込めて、機能を紹介させて頂きます。
HTML5のCanvasには、GIFアニメ作成ライブラリがある！
Animate CCはHTML5のCanvas機能を利用してアニメーションを表示しています。ですので、このCanvasに関連する機能は取り込んで使うことが出来るんです。そして、コチラのページ(Narumium Blog様)に記述されている通り、Canvas関連のライブラリとして簡単にGIFアニメが作れてしまjsgifというものがあるんです！
これを使うと、Canvasに描画を行った後に毎ターン、encoder.addFrame(ctx)という関数を呼び出せば、アニメーションのフレームが登録されていき、自動的にGIFアニメを作成してくれるんです！超便利！そのため、Animate CCのメインステージで毎ターンencoder.addFrame(ctx)を呼び出すようにすれば、それだけでGIFアニメが作れてしまうんです！
↓こんな感じのGIFアニメが簡単に生成できます！
ウェブ(HTML)でのアニメーション表現方法一覧と長所/短所をまとめてみた！(GIFアニメ/APNG/WebP/アニメーションSVG/Canvas/動画)
ウェブ(HTML)はドンドン進化しています。昔はHTML上は、文章と簡単な画像ぐらいしか掲載できませんでしたが、今は動きのあるページも多くなっています。簡単なアニメーションが掲載されているページも多いですし、ツイッターとかでも簡単な動画が掲載されていたりしますよね。アニメーションの活用機会は多くなっています。
そこで、今回はウェブ(HTML)上でのアニメーション表現方法にどんなものが有るかをまとめてみました！各表現方法に対して、長所と短所をまとめています。色んな方法が出てきていて、全ての方法を理解している方は少ないかと思いますので、参考になればと思います。
今回は↓のアニメーションを実例(サンプル)として用い、各形式で出力してみてその表現の違いを確認できるようにしています。このアニメーションは、赤丸/青丸/緑丸がそれぞれ透明度25％ぐらいで描かれており、透明度(アルファチャネル)の扱いが重要になるアニメーションになっています！
