Googleでは2014年から新しいUX体系として、デバイスの違いを乗り越えて操作性に統一感を持たせ使いやすさを向上させた「マテリアルデザイン」を提唱。声かけだけではなく統一サポートサイトとして「Material.io」を開設し、情報共有や普及に努めています。このサイト内に、アプリにどんなカラーパレットを用いればいいのかを助ける新たなカラーツールが登場しました。 Color Tool - Material Design https://material.io/color/ アクセスすると、最初は下の方がグレーアウトした状態。ページのどこかをクリックすると…… ツールを使えるようになります。左側にページレイアウト、右側に「マテリアルパレット」が置かれています。 ページレイアウトは文字中心のものや画像が中心になるものなど6種類が用意されていて、「＜」「＞」で切り替え可能。今回は5番のレイアウト

 どうも、まさとらん（@0310lan）です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です！ バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【 Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基本的な使い方！ それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード

企画書やプレゼンテーションのスライドに、フローチャートを入れたくなることは多い。また、頭の中を整理するためにフローチャートを作りながら考えるのもいい。僕はいわゆるシステム図を描くような本格的な場合だけでなく、ちょっとした作業にもフローチャートをどんどん使っている。 フローチャートはとても役立つのだが、パソコンソフトで作ろうとすると案外面倒で、二の足を踏んでしまう人も多いようだ。例えば、「MS Office」のWordやPowerPointでは「図の挿入」機能を利用するわけだが、これが意外に使いづらい。角丸の四角形を作ろうとすると、「挿入」「図形」「角丸四角形」と選んだ上で四角形を書かねばならず、それだけでも手間がかかるのだ。 専用ペンが付属する2in1パソコンなどでは、新たに採用された「図形に変換」機能を使うことで、手書きの図を「図形」に変換できる。確かにこの機能は手っ取り早いのだが、手書

[markdown] こんにちは。 ついに自分の番が回ってきて、かなりのプレッシャーを感じております。 社会人４ヶ月目、新米フロントエンジニア（デザインもしますよ）の坂本です。 フロントエンドの記事で上司がヒエログリフなんて彫ってしまったもんなので、どんな面白い記事を書いたらよいのかと余計にプレッシャーを感じております。 [参考：2016年6月30日 ヒエログリフを彫る。cssで](https://creatorsblog.nijibox.jp/carving-hieroglyphs-in-css/) 困りました。 ところで、フロントエンドの人なんかがブログを書くとなると、 面白い文章の記事よりも実際に作ってみたサンプルを動かしてみて、どうです？すごいでしょ！？的な記事が多くなってくると思うんです。 そこで、活躍するのが、先のヒエログリフでも使われておりましたコレです。 これならhtml、

Web系の開発でJavaScriptの動きをちょっとだけチェックしたいなと思ったことはありませんか？ 最近、自分は便利な関数がいろいろと詰まったUnderscore.jsというライブラリを仕事でよく使っているのですが、ちょっとした関数を実際に動かしてテストしたいなと思うことがあります。 そんな時に便利なのが「JS.Bin」というサービスです。 JS.Binを使えば、ブラウザ上でJavaScriptを動作させることができます。 他にも、jQueryや今話題のReact、AngularJSといったフレームワークなどのライブラリもプルダウンから選ぶだけで簡単に読み込むことができるので、とても便利です。 似たようなサービスはJS.Bin以外にもあるのですが（有名どころだとJSFiddleなど）、JS.Binはデザインがシンプルでコードの文字が大きく見やすい所や、Consoleなどを並べて1つの画面

import.ioとは import.ioは、データ化したいページのURLを入力するだけで、自動でデータ箇所を判断して情報を集めてくれるスクレイピングサービスです。 無料で利用することができ、セットアップも、データ収集用のトレーニングなども必要ありません。 URLを入力して、ボタンを押すだけという簡単さから、誰にでも利用できるデータ収集ツールだと思います。 以下では、その簡単な使い方や、利用例などを紹介したいと思います。 定期的なサイトへのスクレイピングは相手サイトの負荷になるので、一日に何度も何度も同一サイトに使用するのはやめましょう。加えて、取得したデータを、そのまま何かに利用すると著作権違反になる恐れもあります。 基本的な使い方 import.ioの最大の特徴は、使い方の簡単さです。 以下では、その使い方の例として、IKEAのソファー検索結果ページのデータを取得してみたいと思います。

内容：「mozjpeg encoder」は、画像ファイルの容量をオンラインで圧縮できるサービスだ。Mozillaが開発した画像圧縮ツール「mozjpeg」を用いたサービスで、JPGのほかにBMP、さらにTGA（Targa）形式に対応することが特徴だ。 「mozjpeg encoder」トップページ。インターフェースは英語だがとくに難解なところはないだろう。なおページ遷移はなく基本操作で使用するのはこの画面のみ 「mozjpeg encoder」は、画像ファイルの容量をオンラインで圧縮できるサービスだ。Mozillaが開発した画像圧縮ツール「mozjpeg」を用いたサービスで、JPGのほかにBMP、さらにTGA（Targa）形式に対応することが特徴だ。 使い方は簡単で、サイトにアクセスして非可逆圧縮（lossy）もしくは可逆圧縮（lossless）のいずれかを選んだのち、画像をドラッグ＆ドロ

JPEG圧縮でノイズがのった画像やピクセルサイズが小さい画像は、拡大するとギザギザとジャギーがかかったような表示になってしまうことがあります。そのため、お気に入り画像の拡大画像が見つからない場合は、小さいサイズのまま保存しておくしかないわけですが、「できればこの二次元画像を拡大したい……！」というときに便利な無料サービスが、最新鋭の人工知能技術を使ってギザギザの画像でもノイズを除去してハイクオリティな画質で1.6倍～2倍に拡大できる「waifu2x」です。 二次元画像を拡大したいと思ったことはありませんか？ - デー http://ultraist.hatenablog.com/entry/2015/05/17/183436 waifu2x http://waifu2x.udp.jp/ waifu2xは、最新鋭の人工知能技術「Deep Convolutional Neural Networ

SimilarWebって面白いですよね。あのサイトPVどれくらいあるんだろう？って調べる時に使えますよね！ だけど、それだけじゃもったいないです。このツール。 Website Traffic & Mobile App Analytics | SimilarWeb http://www.similarweb.com/ 簡単にSimilarWebの使い方を紹介。 サイトにアクセスし、調べたいurlを入れればそのサイトのPVを見ることが出来ます。さらに、どこ経由でサイトにアクセスしているのかも調べることが出来ます。僕の場合は、７０％以上がソーシャル経由のアクセスになっています。 もう少し、検索駅湯で来てくれる人が増えてくれるといいなー。 こういうデータは、もちろんGoogleアナリティクスでも見ることが可能なのですが、このサービスを使うと他にも色々気になるデータが見えてくるので面白いです。 例え

Photo by Jason Cartwright こんにちは。谷口です。 プログラミングの勉強で「ちょっとあの開発言語の勉強をしてみたいな～」「実際にコードを書いて動かしてみたいな～」という時に、ハードルとなるのが「実行環境の作成」だと思います。 そんな時に役立つのが、書いたコードをブラウザ上で実行できる「オンライン実行環境サービス」です。 今回は、実行環境の手間を省いて「書いたコードをブラウザ上で実行できる無料サイト」を紹介します。 目次 ・複数言語対応系 ・ideone ・CodePad ・paiza.io ・repl.it ・Codecademy ・runnable ・Wandbox ・SourceLair ・JavaScript系 ・JSFiddle ・jsbin.com ・Codepen ・jsdo.it ・PHP系 ・PHPfiddle ・PHP Sandbox ・Write

正規表現は様々なプログラミング言語やツールで利用できる、文字列の検索や置換に不可欠の存在といっても過言ではないかもしれません。 「Regulex」はその正規表現を可視化して分かりやすくグラフとして表示してくれるサービスです。 文字列で正規表現を入力すると対応したグラフが表示されるので、複雑な正規表現も直感的に理解できます(?)。 例1 例えば「(a|b\d+)*c」をビジュアライズすると以下のようなグラフが作られます。 グループがあってその中でaまたはbと数字の繰り返しがきて、最後にcがくる…というような正規表現が、グラフ化されました。 例2 もう少し簡単な例「abc\d+」を考えると次のようになります。 abcがきて、最後に数字の繰り返しが1回以上くる…。ということが直感的に理解できます。 まとめ 作成した正規表現グラフはイメージとして出力したり、サイトに埋め込んだりもできます(Java

サンディスクのmicroSDカード 512GBが40%OFF。写真や動画のデータ置き場はこれで良くない?【Amazonセール】

こんにちは、ライターのナッツです。 突然ですが、Shareaholicのレポートによると、ソーシャルメディアからのトラフィックはPinterestがTwitterを抜いて2番目の参照元となっているようです。（1番多いのはFacebook） 参考：Shareaholicレポート https://blog.shareaholic.com/social-media-traffic-trends-10-2014/ この調査結果は、魅力的なビジュアルコンテンツはサイトへ多くのトラフィックをもたらしてくれる可能性を示しています。 しかし、私のようなノンデザイナーにとって「魅力的なビジュアルコンテンツ」をつくることはなかなかハードルが高いもの。そもそもPhotoshopとか持ってない！という方がほとんどではないでしょうか。 そこで今回は無料で使えるビジュアルコンテンツ作成ツールを紹介していきたいと思いま

2017年2月17日 便利ツール 作業中に、ふと動作確認がしたい…でも新規ファイルを作るのすらめんどくさい…なんてこと、ありませんか？（え？ない？w）そんな時はファイル不要！環境設定不要なオンラインテストサイトを使っちゃいましょう！動作確認用オンラインツールはいくつかありますが、実際に使っているもの、ブックマーク登録しているものをいくつか紹介します！ユーザー登録してコードを保存できるサイトもあるので、備忘録として使ってみてもよさそうです！ ↑私が10年以上利用している会計ソフト！ CodePen Webクリエイターボックスでも何度となく紹介してきたCodePen。フロントエンドの動作確認に最適です。Emmetの利用もOK！ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。作成したコードをブログへ埋め込んだり、シェアするのも簡単！ HTML

似たようなツールはよくあるが、ドメイン名が覚えやすかったのと機能が豊富なのでご紹介。 JS Prettyでは、JavaScriptのソースを綺麗にしてくれるツールを提供している。 使い方は簡単で、綺麗にしたいソースを貼り付けるだけだ。 オプションも豊富で、インデントを何桁にするかとか、配列で桁を揃えるだとか、チェーンメソッドで改行するか、とかのマニアックな設定が可能だ。 よくJavaScriptをいじる人だったら知っておいても損はないかもですな。

単語を入力するだけでイメージにぴったりな画像を提示してくれ好きなカラーを直感的に探し出してカラーパレットやカラーコードを表示してくれるネットサービスが「Colores」です。 Colores http://colores.manugarri.com/ これがColoresのトップページ。単語を入力するテキストボックスがあるだけという超シンプルなデザインです。 例えば「tree(木)」と入力するとこんな感じでカラーパレットやイメージ画像をずらりと表示してくれます。 単語にぴったりの画像と、その画像に使われている主な色がカラーコード付で表示されるので、イメージにあうカラーコードをすぐに調べられるというわけです。 また、イメージに合うカラーパレットは正方形や…… 長方形で表示されるので、これをクリックすると…… Dribbbleというデザイナーのコミュニティサービスにジャンプ。入力した単語にぴっ

透過PNGは素晴らしいフォーマットですが、そのファイルサイズもなかなかのものです。 透過PNGや透過GIF画像をSVG画像に変換し、JPEG圧縮・品質で軽量化するオンラインサービスを紹介します。

デスク配線がスッキリ。Ankerの全部入り12 in 1モニタースタンドが突然8,250円OFFされてた #Amazonセール

写真やイラストや文字など、JPEG, GIF, PNG画像をSVGのベクターに変換できる無料のオンラインサービスを紹介します。 写真画像でもこのクオリティは、スゴイですね！