無料でデザイン上「アリ」な色の組み合わせをサクッと確認できる「Accessible Brand Colors」レビュー
ウェブデザインやフリーペーパーといった物理的なデザインをする際には、人に訴える力を持つ「見やすい」色の組み合わせを見つけ出すことはかなり重要です。背景色と文字色の組み合わせが「アリ」なのか「ナシ」なのかを一目でわかるようにする「Accessible Brand Colors」を使えば、悩みがちな色の組み合わせを直感的にさくっと決められそうだったので、実際に使ってみました。 Accessible Brand Colors by Use All Five https://abc.useallfive.com/ 上記URLにアクセス後、画面右上の「＋」をクリック。 カラーピッカーが現れるので…… 色相や明暗を調整して「Add hex」をクリック。カラーコードを指定することも可能です。 するとこんな感じで1色目が決定。同様に下側の「＋」もクリック。 色を選択して「Add hex」をクリックします。
ブラウザから機械語を実行できるWebAssembly用のオンライン開発環境「WebAssembly Studio」を使ってみた
「WebAssembly」は、C言語などで書かれたソースコードをコンパイルして生成されていて高速に処理できる機械語をブラウザで実行できるようにする技術です。Firefoxを開発するMozillaは2018年4月11日、そのWebAssemblyを簡単に開発できるようにするオンライン開発環境「WebAssembly Studio」を公開しました。 WebAssembly Studio https://webassembly.studio/ ブラウザで何か処理を行いたい場合によく使用されるのが「JavaScript」ですが、JavaScriptはコードを一行ずつ処理するインタプリタ言語であり、また変数の型をインタプリタが解釈する動的型付けを行う言語でもあるため、処理速度が遅いという問題点を抱えています。「WebAssembly」はそのような事情を背景に生み出された技術で、ブラウザ上で高速に動作
Webを再び分散させるSolidプロジェクトの思想を表したエディターツール「dokieli」
「Solid」はGoogleやFacebookなどによってWebが中央集権化してしまっていることを懸念して、Webを再分散化することを目標に立ち上がったプロジェクトです。そのSolidの仕様を取り入れたエディターツール「dokieli」は、SolidではどのようなWebが実現できるのかについてうかがわせてくれるツールとなっています。 Solid https://solid.mit.edu/ dokieli https://dokie.li/ SolidはWorld Wide Webを考案したティム・バーナーズ＝リー氏を中心に動いているプロジェクトです。 「ウェブの父」ティム・バーナーズ＝リーが新プラットフォーム「Solid」を発表 - GIGAZINE 上記の記事では以下のように述べられています。 Solidを使えば、すべてのユーザーは「パーソナル・オンライン・データ・ストア(POD)」を
Webの生みの親バーナーズ＝リーは中央集権化しているWebの現状を憂いている
現在のインターネットを形作っているWorld Wide Webを作ったのがティム・バーナーズ＝リーですが、そのバーナーズ＝リーは現在の中央集権的なWebの在り方に心配していると述べています。 “I Was Devastated”: Tim Berners-Lee, the Man Who Created the World Wide Web, Has Some Regrets | Vanity Fair https://www.vanityfair.com/news/2018/07/the-man-who-created-the-world-wide-web-has-some-regrets 30年前、CERNの研究員だったティム・バーナーズ＝リーは科学者たちがデータを共有するのを助けるためにWebのプラットフォームを整えました。当時そのようなデータ共有のためのプラットフォームはいくつかあ
GoogleやFacebookなどの巨大な管理者なしで個人同士がつながりを作り出す新しいウェブの世界「Dweb」とは？
検索サービスをGoogleが牛耳り、個人情報をFacebookが大量に蓄積するなど、現代のウェブサービスは巨大なサービス提供者が情報へのアクセスを管理するため、表現の自由やプライバシーに関する構造的な問題を抱えています。これらを解消するために、「巨大な主催者」が不要で個々人がネットワークでつながる分散型のウェブ「Decentralised Web(DWeb)」という技術思想が登場しています。 Decentralisation: the next big step for the world wide web | Technology | The Guardian https://www.theguardian.com/technology/2018/sep/08/decentralisation-next-big-step-for-the-world-wide-web-dweb-data-
ウェブページの表示速度を改善するために気をつけなくてはいけないこと
ウェブページの表示が遅くなってしまう原因の一つに「JavaScriptの読み込み」があります。ブラウザはダウンロードしたhtmlドキュメントを上から順番に解釈して描画していくのですが、途中で「script」タグに出会うとJavaScriptの読み込み・実行が終わるまでその場所で解釈を一旦ストップしてしまいます。ページの表示速度に影響を与えずにJavaScriptを読み込むにはどうすれば良いのかについてfly.ioがまとめています。 Lighthouse: how to reduce render-blocking scripts https://fly.io/articles/lighthouse-how-to-reduce-render-blocking-scripts/ scriptタグが外部のJavaScriptを読み込むのかインラインで記述されているJavaScriptを実行するの
CSSとHTMLをリアルタイムに書き換えてプレビューできる「rendr」 - GIGAZINE
「CSS」タブをクリックして、中のコードを書き換えると、リロードせずにそのままリアルタイムにページ全体を再レンダリングしてくれます。「Markup」タブをクリックすればHTMLコード自体を書き換え可能。元に戻すには「clear markup and css」をクリック。 Firefoxの拡張である「greaseMonkey」バージョンもあるので、自分のサイトで同じようなことができるようになり、CSSデザインの試行錯誤が楽になります。 詳細は以下から。 rendr http://gregtaff.com/rendar2.html greaseMonkey版はキャッシュが有効な場合に、ローカルキャッシュのHTMLファイルを直接書き換えてリアルタイムプレビューするというモノになっています。 インストールするにはgreaseMonkeyをインストールした状態で上記ページの「greaseMonkey
Awesome-crawler - Webクローラー使いたい放題の厳選リンク集 | ソフトアンテナ
Web上のリンクを辿りドキュメントや画像、PDFなどさまざまな情報を収集するプログラム「クローラー」。Googleのような巨大な検索エンジンもクローラー(ボット)が地道に収集した情報によって構築されています。 今回紹介する「Awesome-crawler」は、このWebクローラーに関する情報を集めたawesomeリンク集です。さまざまなプログラム言語で作られたクローラーフレームワークに関する情報が1カ所にまとめられています。 サイトには現在Python、Java、C#、JavaScript、PHP、C++、C、Ruby、R、Erlang、Perl、Go、Scalaで作られたクローラーフレームワークが含まれています。 やはり人気の高いプログラミング言語ほどクローラーの数も多く、世界トップクラスの人気を誇るスクリプト言語Pythonでは、多機能で有名なScrapyを初めとして以下のような多くの
ウェブページの重さを計測して高速化に向けたアドバイスをくれる「imgix Page Weight Tool」
ウェブサイト上に画像をアップロードする際、複数サイズの画像を用意したりファイルフォーマットを変換したりすることで、少しでもファイルサイズを小さくしてサーバーに負荷がかからないようにしますが、こういった地味な作業は取り扱う画像の数が多くなれば多くなるほど面倒になっていくものです。そんな画像加工関連の処理を自動かつリアルタイムで行ってくれるサービスが「imgix」で、ウェブページを表示する際に重要な「ページの重さ」を計測してくれるサービス「imgix Page Weight Tool」を提供しているので実際に計測してみました。 imgix Page Weight Tool • Learn how to improve your site or app’s speed. https://pageweight.imgix.com/ 「imgix Page Weight Tool」の使用方法はとても
シンプルなカラーで作る失敗知らずのウェブデザイン
ウェブデザインにおいて、サイトイメージに大きな影響を与える「カラーパターン」は重要です。ついつい色にこだわって色数を増やして全体のバランスを崩してしまいがちなカラーデザインを、極力少ない色だけで、バランスの整った見た目に美しい仕上がりにする方法論がウェブデザイナーによって解説されています。 A Simple Web Developer's Guide To Color – Smashing Magazine https://www.smashingmagazine.com/2016/04/web-developer-guide-color/ Design Academyを主催するウェブデザイナーのローラ・エリザベスさんは、シンプルなカラーデザインで失敗しないデザイン論「simple color workflow」を提唱しています。エリザベスさんは多くの色を複雑に使いこなすよりも、サイトのカ
人間・自動車・動物を自動判別可能なスマート過ぎる屋外監視用ウェブカメラ「Netatmo Presence」
スマートフォンと接続して使用する「気温・湿度・CO2計測器」や「ネットワークカメラ」などのスマート家電を提供しているNetatmoが、新たに人間・自動車・動物を自動判別できる家庭用屋外監視カメラ「Netatmo Presence」を発表しました。 NETATMO https://www.netatmo.com/ja-JP/product/presence 「Netatmo Presence」がどのような監視カメラなのかは、以下のムービーを見るとわかります。 Netatmo Presence - Revolutionary Outdoor Security Camera with people, car and animal detection - YouTube Netatmo Presenceは、人間・自動車・動物を判別できる屋外用監視カメラ。 玄関にセットしたNetatmo Prese
セキュリティ要件を定義しよう（Webアプリ編） - Qiita
高いセキュリティレベルが要求されるシステムの開発を依頼される場合があります。 その場合には、システムをセキュアに作るだけではなく、お客様に「何が」「どう」セキュアなのか、説明する必要があったり、場合によっては担保する必要があります。 この場合、何を元に説明したり、担保したりすればよいのでしょうか？ ここで使われるのがセキュリティ要件定義書です。 OWASP（後述）のセキュリティ要件定義書をベースに、セキュリティ要件定義書の作り方、入れるべき内容を学びましょう！ 要件定義書に書くべきこと セキュリティ要件に書くべきことは、セキュリティ対策のためにベンダーが「具体的に何をやるか」です。 どんな攻撃が想定されていて、どんな防御方法を取るか、セキュリティ要件定義書を使ってそれを説明し、方針についての合意を獲得します。 ただし、「どんな攻撃が想定されていて」の部分は、最終的な要件定義書には書かれてい
ウェブデザインをゲームで遊びながら学べるサービスをまとめた「Games for designers」
優れたウェブデザインを行うためには各種ツールを使いこなすスキルだけでなく、色や形に対する感性を磨くことも大切です。そんなウェブデザインに求められる能力を、ゲームを通して高められるサービスを一挙にまとめているのが「Games for designers」です。 Creative games for creative designers http://graphism.fr/games/ Games for designersにはウェブデザインを学べる各種サービスがサムネイルで表示されています。 ためしに、「The Bezier Game」をクリック。 The Bezier Gameは線描画のスキルアップのためのサービスで、ゲーム感覚でペンツールの使い方を学べるとのこと。「play now！」をクリック。 するとThe Bezier Gameのサイトへジャンプします。「Get Started」
Webデザイナーによるカラーコードを使った便利なテクニックあれこれ
By OliBac コンピュータが色に名前を付ける時、数字やアルファベットを6つ並べた1677万7216通りの組み合わせで表される16進数カラーコードが使われます。カラーコードは他のコンピュータ言語と同じく論理的なシステムに基づいて作られるため、Webデザインを行う人間にとって16進数カラーコードを知っておくことは非常に助けになるとして、WebデザイナーのBen Gremillionさんがカラーコードの仕組みや便利なテクニックをまとめているのが「The Code Side Of Color」です。 The Code Side Of Color | Smashing Coding http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/ そもそもスクリーン上のカラーは指定がない場合は黒いままで、16進数カラーコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5000超えたら独立！フリーランス戦闘力診断
Khan Academy
カーンアカデミー | 無料のオンラインコース，レッスン，練習問題
Netatmo: same home, just smarter
Jeux - Graphisme et interactivité
VisuAlgo moves to https://visualgo.net/en