配色えらびも人工知能の時代！素敵なカラーパレットを自動生成できるツール Khroma
デザインに欠かせない配色選びは、デザイナーにとって頭を悩ませる問題のひとつ。もしコンセプトにあった色の組み合わせを素早く、しかもたくさんのサンプル案と一緒に確認できるとしたら？ Khroma は、そんなデザイナーの想いを人工知能をつかって解決したオンライン配色ツールです。お好みの色を追加することで、より精度の高い組み合わせを実現できる、まさに「育てる」配色ツールと言えます。 Khroma とは。 Khroma とは、人工知能 Ai を利用することで、選択した色を解析し、実用性の高いカラーパレットを生成するオンライン配色ツールです。 このツールを使えば、以下のようなスタイリッシュな配色をほんの数分で作成することができます。今回は、Khroma の使い方を詳しくみていきましょう。 Khroma の使い方 まずは、お好みの色を50色選んでいきます。「50色」と聞くと多いように感じるかもしれません
JS-XLSX - JavaScriptでExcelファイルを解析
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebフォームでCSVファイルをアップロードしてください、というのはよくある機能です。しかしCSV自体解析するのが大変だったり、ユーザが作成するのも一手間かかるのであまり効率的とは言えません。 そこで、ユーザにはExcelファイルをそのままアップロードしてもらいましょう。その際使うのはJS-XLSX、JavaScriptによるExcelファイルパーサーです。 JS-XLSXの使い方 JS-XLSXのデモです。ドロップしたExcelファイルを解析して、CSVにしています。 さらにJSONにもできます。 JS-XLSXを使えば、Webブラウザ上でExcelファイル（ODSも可）を解析してAjaxでJSONだけを送ると言ったこともできます。これならシステムで扱うのも簡単そうです。さらにJ
レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」
業務メモ。 最近はかなり減りましたが、Webサイト作成時たまに使用せざるを得ないあいつ。そう、クリッカブルマップ。 画像の好きな場所にリンクを仕込めるのは便利ですが、レスポンシブの案件ですとリンクエリアが指定した座標からずれてしまうため困っちゃう。 jQuery RWD Image Mapsはそんな悩みを一発で解決してくれる便利なjQueryプラグインです。 使い方 使い方は非常に簡単。まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。 HTML [html] <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
面倒なSVGのパスを簡単に作成できてしまう便利ツール -SVG Path Builder
面倒で複雑なSVGのパスでも簡単に作成できてしまう便利ツールを紹介します。 オンラインでもローカルでもどちらでも利用できます。
makeAppIcon - iOSアプリ用の画像を一気に生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました iOSの種類、解像度が増えるのに伴って予め用意すべきアイコンのサイズが多種多様になっています。しかもデバイスの種類によってアイコンのデザインを分けるのは推奨されていないので、基本的に一つの大きな画像を作ってサイズを変更する必要があります。 そうした自動化できそうな手間はぜひとも減らしていきましょう。そのためのソフトウェアがmakeAppIconです。 makeAppIconの使い方 makeAppIconのインストールはnpmを使って行います。 $ npm install -g makeAppIcon 使い方としては –in で画像を、–outで出力先のディレクトリを指定します。例えば以下が元画像ですが、これは1024px以上の大きさである必要があります。 makeAppIconコ
Electron Screenshot Service - Electronを使ったWebサイトスクリーンショット
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトのスクリーンショットを撮りたいと思う機会は多いかと思います。Webサービスの中でもURLに対してそのサムネイルを表示したいと考えることもあるでしょう。 そんな時に使えそうなのがElectron Screenshot Serviceです。旧atom shellであるElectronを使ってnodeベースでWebサイトのスクリーンショットを撮影、保存できます。 Electron Screenshot Serviceの使い方 Electron Screenshot Serviceのインストールはnpmで行います。 $ npm install electron-screenshot-service 使い方としてはコマンドは提供されていないのでコードを書いて使います。例えば次のよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
