Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2018年12月6日

いしはら

エンジニアが知っておいたら楽になる配色知識

この記事は フリューAdvent Calendar 2018 の12/06分です。
 

はじめに

こんにちは。ピクトリンク事業部開発部のいっさんです。
普段はWebAPIの開発などをやっていますが、
趣味でフロントやデザインの勉強をやっています。
むしろ趣味のほうが得意分野で色彩検定2級をもってます。
 

今日はエンジニアが知っておけばいい、色に関する豆知識を紹介します。
 
 

色相環

モックなどを開発していて、配色にこまること、ありませんか?
配色に困ったときは「色相環」を見てみると便利です。
 
「色相」とは赤、黄、緑、青、紫といった色の様相の相違のことで、
「色相環」とは色を円状にならべた図のことをいいます。
 

色相環
 
 

ダイアード

この円の向かい合った色同士が「補色」と呼ばれ、
この色の組み合わせをするとインパクトが強くなります。ダイアードと呼ばれています。
例えば赤だと反対色は緑になります。
なのでワンポイントで目立たせたいときに反対色を使うと良いでしょう。
 
 

アイデンティティ

無難な組み合わせを選びたいときは、
隣接した左右を選ぶと無難になります。アイデンティティと呼ばれています。
例えば、オレンジだと赤や黄色になります。
ただ似たような色になるので単調になりがちです。
 
 

トライアド

バランスを取れた配色の組み合わせで
トライアドというものがあります。
色相環を三等分した位置にある3色で配色します。
例えば、黄色の場合、赤紫と青になります。
 
 

気をつけること

使う色は3色以下にすることおすすめします。
3色以上になるとごちゃごちゃしてしまい、見にくくなってしまいます。
色数が少ない方がまとまりのあるスッキリしたデザインになります。
 
 

さいごに

このように、色相環を見て配色を決めるととても便利です。
紹介したのは主な3つでしたが、
他にも色相環を四等分した位置でカラフルな配色にするテトラードなどがあります。
興味ある人は調べてみてくださいね。


2014年10月15日

reika masumitsu

FlashCCからHTML5 Canvas書き出しの際の画像ファイル形式変換の謎

こんにちは。ソーシャルゲーム1部開発課 Hチームのマスミツです。
長いタイトルですみません。初めての投稿です(ドキドキ)
FlashCCで制作したアニメーションをHTML5 Canvasに書き出した際に起こった、 「png画像がjpgに勝手に変換されてしまう」世にも恐ろしい(大げさ)怪現象に遭遇したのでご紹介します。

HTML5 Canvasとは?

Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。 Flash CCから、制作したアニメーションをこの[HTML5 Canvas ドキュメント]に書き出すことが可能になりました。
これにより、ブラウザのプラグインの有無に関わらず再生できるアニメーションを簡単に作れるように!

書き出されるファイル

ドキュメント形式を「HTML5 Canvas」で新規作成、あるいは「ドキュメント形式をAS3からHTML5 Canvasに変換」にて制作し、パブリッシュを行うと下記のファイルが書き出されます。

  • HTML
  • JavaScript
  • imagesフォルダ(の中に使用するimg)

imagesフォルダでおこった怪現象

このパブリッシュですが特に難しい操作がなく、Flash氏がいいようにしてくれるので、 書き出されたHTMLを開けばブラウザだけでちゃんとアニメーションが再生されます。 何もしなくてJSもできてるし・・・ナニコレ便利!!
で、できたJSを見てみますと。画像の記述のところがこのようになっています。

ここまできて・・んん?なんでjpg入ってるの?全部pngのはず・・・(((( ;゚д゚)))

とりあえずJSと同時にFlashから書き出されたimgesフォルダの画像を見てみると、こちらも一部の画像がjpgになっています。

まあそうですよね。だからちゃんと再生されるんですけど。

まったく原因がわからないので、制作したFlashのライブラリを再度見てみてると、こちらは確かにすべてpngです。
画像をシンボル化したものとそうでないもので関係あるのかとか、そもそも元画像が壊れてるのかとか、いろいろと疑ってみたのですが特にそういうわけでもなく・・・詰みました。

調査結果

そして、答えはここにありました。
参考サイト:http://www.adobe.com/jp/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html


画像も、JPGフォーマットまたはPNG32フォーマットでライブラリから書き出されます。画像に透過が含まれるか、ユーザーが圧縮タイプをlosslessに設定してある(オリジナルソースがJPGではない)場合を除き、Toolkit for CreateJSは、JPGを使用します。このToolkitは、JPG出力される各画像に対して、「properties(プロパティ)」ダイアログボックスに指定された品質設定を使用します。


簡単にまとめると、

  1. 画像は、jpgまたはpng32フォーマットでライブラリから書き出される
  2. 透過が含まれる画像・圧縮タイプをlosslessに設定している画像(※且つ元画像がpng)はpngで書き出される
  3. それ以外はjpg

つまり、透過画像はそのままやってくれるけど、背景など透過してない画像は何も設定していないと勝手に圧縮しちゃうってこと!!?画質とかどうなんのよ! ・・はい、そうです。ひどい話です。完全におこです。

回避方法

ということで、

デフォルトでは透過が含まれない画像はjpgに圧縮して出力されてしまうので、回避する場合は「圧縮タイプをlosslessに設定する必要がある」てことですね。 こんな簡単なことでした
bitmap
各画像のビットマッププロパティにて「圧縮タイプ:劣化なし(PNG/GIF)」を選択する
※透過が含まれる画像は自動でpng書き出しされるため必要なし

その他気づいたこと

Flash上でのライブラリは、libネームスペース内の再使用可能なクラスとしてJavaScriptファイルにパブリッシュされます(アニメーションに使用している画像はライブラリでのアイテム名を使用してJavaScript上で処理される)。

「ライブラリでのアイテム名を使用」するので、これに気づかず画像名をちゃんと決めないままで気にせずライブラリに突っ込んで使っていると、JSにその名前で書き出されてしまいました。

上に晒しましたソースを見てみると、ファイル名テキトーすぎる…ハズカシ…しかもよく見ると全角とか入っちゃってるしorz
JSに使うのでそりゃエラーにもなるってもんです。

ライブラリ内のアイテムはパブリッシュ時にそのまま書き出されてしまうので、半角英数を使用してください。全角や日本語を使用するとJS上でのエラーの原因になる場合があります。全角は悪!ダメ、ゼッタイ。

まとめ

ほかにもFlashCCからのHTML5 Canvasにおいてはいろいろとありましたが、ネット上でもなかなか情報を探せなかった この問題が一番謎だったので記事にしてみました。最後まで読んでいただき、ありがとうございました!


2014年02月13日

いしはら

最新版のChromeでtouch eventを有効にする方法

こんにちは。いしはらです。

久々にChrome DevToolのtouch eventを有効にしようと思い、設定画面を開いたところ、「Emulate touch events」の設定が見当たらず 設定に時間がかかってしまいました。

最新版のChromeでは下記の手順になるので 設定してみてください。

 
1.Setting1アイコンをクリック
 
2.Overridesの「Show’Emulation’view in console drawer」にチェックを入れる 2
 
3.Show console3アイコンをクリック
 
4.Emulationタブをクリックし、サイドメニューの「Sensors」を選択 「Emulate touch screen」にチェック 4
 
これで完了です。 カーソルが灰色の丸になっているとtouch eventが有効になっています 5
Chrome DevToolを非表示にしていると設定は無効になるのでご注意を。


2013年11月21日

社内行事でのHTML講習会資料の共有

こんにちは。竹島です。
先日、フリュー2014年度新卒社員さんの「就業体験」というイベントがありました。 来年入社する学生の方々が、フリューの仕事を体験してみる、といった内容なのですが、
その中で行われた、WEBページ製作が初めての方向けの、HTML講習会を担当させていただきました。
その際作成した資料を共有したいと思います。    

Html講習会資料 from 竹島 泉

  

かなり基礎的な内容になっていますので、これからWEB製作をはじめてみたい学生さんなど、ぜひ参考にしていただければと思います。


2013年11月13日

ブログリニューアルしました

はじめまして。
ソフトウェア開発部の竹島です。
HTMLやCSSでのWEBページ開発などを中心に行っています。
今回、本フリューTechBlogのリニューアルをさせていただきました!
フリューの「明るく楽しい雰囲気」に合わせてデザインをしてみました。 そしてできるだけ読みやすいようにいたしました。
個人的に、記事名横の丸アイコンと吹き出しが気に入っています。
 
このブログはWordPressを利用しているのですが、わたくし今回が初めてでした! はじめてWordPressのテーマ作成をしましたが、 とても楽しかったです。
 
「PHPベースだしプログラムの知識がなければ難しいんじゃないか…?」
 
と思っていましたが、やってみたらそんなに難しいものじゃなく、 Google検索すればやりたいことを親切に教えてくれているサイトがたくさん出て くるので、 WordPressの知識がなかった私でもいい感じに製作することができました! (一定期間たったらまたリニューアルしたい、と密かに考えています。。)
 
テーマ作成に参考にさせて頂いたサイト↓↓

技術のお話ができなくて申し訳ありませんが、、
WordPressカスタム楽しい!というお話と、 リニューアルのご報告でした。