1つのSVGスプライト画像をCSS背景画像とインラインHTMLの両方で読み込む方法
この記事は「SVG Advent Calendar 2015 」の9日目の記事です。初めてAdvent Calendar的なものに参加させてもらいます。よろしくお願いします。 ※Advent Calendarの締め切りがあるので、検証途中ですが公開しちゃいます！ご了承ください。現段階では、旧ブラウザをサポートするためのフォールバックが最後まで検証できていないです。あとで追記します。 —–ここから本文—– そろそろロゴとかアイコンまわりの画像をSVGに移行したいと思い、Gulpを使って複数のSVGアイコンを1つにまとめるアイコンシステムを検証してこのブログでも紹介しました。でも、Gulpの設定に慣れていないと難しいし、CSSで背景画像として読み込めないというデメリットもありました。 そこで、今回はロゴやアイコンなどの複数の画像を、Sketchでスプライトにまとめて1つのSVG画像として保存し
商用でも無償で使えるCC0ライセンスの写真を配布するストックフォトサイト・「NegativeSpace」
NegativeSpaceは商用でも個人でも無償で使えるCC0ライセンスの写真を配布するストックフォトサイトです。サイト名のようにネガティブスペースを意識した写真のみを・・といった事ではなく、概念を意識して名付けたそう。写真家同士のコミュニティを作りたい層で、この配布サービスもその一環みたいです。写真配布だけなら数多にあるので選択肢の一つとして。 NegativeSpace
脳科学者の井ノ口馨教授にインタビュー：｢臓器と脳がコミュニケーションをとっていることが最近わかってきた｣
脳科学者の井ノ口馨教授にインタビュー：｢臓器と脳がコミュニケーションをとっていることが最近わかってきた｣2017.02.22 21:14 脳のためには腸をケアしたほうがいい？ 記憶にまつわるSF映画は多々ありますが、その描写が科学的にリアルな作品はあるのか？と聞かれると、いかんせんSF映画なので、それほど多くない気もします。 ケヴィン・コスナー主演のアクション映画『クリミナル 2人の記憶を持つ男』は、死んでしまったCIAのスパイの記憶を取り出すべく、彼の脳の一部を凶悪犯の男の脳へ移植したところ、ふたりの記憶が合体して――といったストーリーですが、なんとこれは実際に起こり得るそうです。 今回は、脳科学者の井ノ口馨教授に映画の記憶描写はリアルなのか？や記憶に関する研究の現在、そしてAIが人間に反乱を起こした場合の対処法などについて、お話を伺いました。 ――実際のところ、映画『クリミナル 2人の
ソニー、電子お薬手帳サービス「harmo」のスマホ向けライト会員サービスを提供開始 - MdN Design Interactive
同社は、2016年7月に、加盟薬局で発行する専用ICカードを利用したサービスを提供開始した。ICカード保有者には、カードと連動する専用のスマートフォンアプリを加盟薬局で登録することにより、薬の情報や履歴の閲覧、家族との情報共有などのサービスが利用できる。 今回提供開始した新サービスにより、利用者は、全国の薬局で薬と共に提供される電子お薬手帳用の二次元コードを撮影することでharmoサービスへの参加が可能となった。また、患者はスマホアプリから始めて、後に加盟薬局でICカードを発行し、併せて利用することも可能となっている。 なお、ライト会員サービスで扱う薬の情報は、利用者の個人情報とデータを分離し、データのみをクラウド上のサーバーに保存しており、これまでと同等の高いセキュリティレベルを維持している。
フラットデザインで使いやすい日付ピッカー「flatpickr」:phpspot開発日誌
flatpickr - lightweight datetimepicker & calendar フラットデザインで使いやすい日付ピッカー「flatpickr」 デザインが次のように美しくモダンなサイトデザインのサイトであればマッチしそうで非常に使いやすそうです。 関連エントリ 日付や時間等に対応した多機能日付ピッカー「tiny date picker」
撮影した写真を自動的にトリミングする「とりかめ for Android/iOS」が提供開始 - MdN Design Interactive
メディアドライブ株式会社は、スマートフォンアプリ「とりかめ for Android/iOS」を提供開始した。App StoreまたはGoogle Playから無料でダウンロードできる。 同アプリは、スマートフォンのカメラを撮影したい対象物にかざすだけで、対象物だけをトリミング（切り取り）してアルバムに保存できる“トリミング特化型”のアプリ。黒板やノート、ホワイトボード、展示会のパネルを撮影すると、自動で対象物を含んだ最小の四角形でトリミングを行い、必要な部分だけを保存することができる。 トリミングされた画像が高品質になるように色彩を補正し、文字を読みやすく修正する。画像補正モードは、背景色や文字色を維持しながら照明の影響を軽減する「色再現」、背景色を除去して文字を見やすくする「文字強調」、メリハリのある画像にする「写真」、撮影時の色彩を保持する「オリジナル」の4種類を搭載している。
Slack絵文字にポケモン導入 - Qiita
概要 Slack絵文字としてポケモンを導入します。 参考 Slackにポケモン絵文字をまとめて入れてみた 手順 1.画像集め すばらCお方が 2.一括で導入するツールをDL デフォルトやと、1個ずつしかでけへんさかいに、、 Chromeプラグイン https://chrome.google.com/webstore/detail/slack-emoji-tools/anchoacphlfbdomdlomnbbfhcmcdmjej 番外.名前を整形 画像集めのときの名前が、すべてそのままポケモンの名前(アルファベット)だったので、[pokemon-{name}]とした。 多分やりかたはあまりイケてない。 ※環境はWindows cd \slack-emoji-pokemon-master\slack-emoji-pokemon-master\emojis dir /b > list.txt
認証トークンをCookieに保存するのは卒業しよう - Qiita
Webアプリケーションの認証トークン（セッション）はCookieヘッダで送信するのが一般的だとは思いますが、 そろそろこのCookieに依存した方法は負の遺産ではないでしょうか？ 認証トークンの送信はRFC 7235で規定されているAuthorizationヘッダを使うと良いです。Basic認証とかDigest認証で使うやつですね。 実はBasicやDigestの他にRFC 6750でBearerというスキームが登録されています。単一の文字列を認証情報として送信するためのスキームで、トークンを送信するのにピッタリです。 参考: トークンを利用した認証・認可 API を実装するとき Authorization: Bearer ヘッダを使っていいのか調べた その場合は、認証トークンはCookieではなくlocalStrage（またはsessionStorage）に保存することになると思います。
【Interview】リリースから1年半!オンラインご近所コミュニティ「PIAZZA」の今を探る | Techable(テッカブル)
2015年夏のリリース以来、子育て世代を中心に、地域密着型O2Oマーケティングツールとして、幅広く活用されてきたオンラインご近所コミュニティ「PIAZZA（ピアッツァ）」。物資の譲渡から暮らしに関する相談ごとまで、ありとあらゆる交流が、この中で育まれてきた。 その有用性を高く評価したのが、ソーシャルビジネス成長応援融資「CHANGE」。主に社会や地域の課題解決にチャレンジする組織支援のためのこのプログラムから、資金調達が実施されることになった。これを受けた開発元のPIAZZA社では、新たな段階に入るべく、現在準備を進めているところだという。 取材に応じてくれたのは、代表取締役の矢野 晃平（やの こうへい）氏。融資後の展開を軸に、さまざまな話を聞いた。 ・つらい気持ちを救ってくれたご近所の人の声 Q1:まずはさかのぼって、「PIAZZA」提供のきっかけから、お聞かせください。 私には2人の子
もうスマホに保護フィルムは不要!? 新開発の液状ガラスを塗れば最強の防御に | Techable(テッカブル)
今や現代人にとって必需品となったスマホに、心強い味方が登場した。 ・保護フィルム代わりに液状ガラス！ 多くの人が常に肌身離さず持ち歩くスマホやタブレット。しかしこれらのディスプレイはとかく壊れやすいもの。割れたり引っ掻き傷や指紋が付くのを嫌って、保護フィルムを貼るのがメジャーな対処法だが、気泡を入れずにキレイに貼るのは手間がかかる上、見た目もあまりいいとはいえない。 今回紹介する商品「Protect Pax」は、スマホに塗布することでディスプレイを保護し、かつ防水機能にも優れた新開発の液状ガラスだ。採用されているテクノロジーは、もともとは宇宙・航空業界向けに開発されたもの。ガラス上の微小な隙間を強固に閉じ込める性質をもつ「二酸化チタンナノ粒子」からできており、これによりどんなガラスをも強化するという。 ・拭いて塗るだけで使用可能 使い方は至って簡単だ。付属のクロスで表面を拭き、Protec
世界史サイトがすごい！紀元前4000年から、1年刻みで各国の国名と指導者が分かる！
ユルリ（太古の夢） @yuluri 素晴らしい世界史サイトを見つけました。こんなのがあればいいな…と妄想していた理想の世界史地図がそこにあった！すごく良い！！私、大歓喜！！すごい！！ありがとうございます！！！ x768.com/w/twha.ja 2017-02-19 14:02:13 ユルリ（太古の夢） @yuluri @yuluri 何がすごいかというとね！！ある時代・ある地域にあった国名・版図・統治者がひと目で分かる！しかも、縮尺を変えるとその頃世界の他の地域はどうなっていたのかがわかる！そしてそして、おどろくべきことにアフリカの西部や南部、コロンブス以前の南北アメリカまで網羅している！ pic.twitter.com/mVOsFZpi9j 2017-02-19 14:04:27
レトロな雰囲気を出せる！ノイズを使った「グリッチエフェクト」のホームページ12選
Apple製品のRetinaディスプレイでWebサイトを閲覧したり、テレビの4K ウルトラハイビジョンテレビで番組を見たりすると、まるでその世界にいるかのような臨場感を楽しむことができます。 一方で、ブラウン管テレビのような効果をあえて活用するシーンもあります。 今では実物のブラウン管テレビを見る機会も減りましたが、ノイズやストライプを入れることで、レトロな雰囲気を醸し出すことができます。 このようにわざとノイズや歪みなどをいれて古風に仕上げる手法を*「グリッチエフェクト」*(gritch effect)と呼びます。 従来は映像編集に使われていた技法で、テレビ番組やミュージックビデオでたびたび使われています。 最近では、Webデザインの一環として採用されることも珍しいくありません。 今回は、ノイズやストライプを表現する「グリッチエフェクト」を取り入れたホームページをご紹介します。 ノイズを
データの可視化に関するツールや知識、リソースをまとめている・「dataviz.tools」
dataviz.toolsはデータの可視化に関するツールやリソース等をまとめているキュレーションサイトです。色や管理画面、ライブラリ、アプリケーションなどに分けられています。かなりよくまとまっていますね。データの可視化は統計学者等のデータを扱う専門家と一般の方との溝を埋める大事な技術であり、そのサポートにと公開しているようです。 dataviz.tools
2017年に期待の最新AI系スタートアップ5選
2016年度はAIが再び注目を集めた一年だと言えるだろう。大企業であるApple、Intel、Twitter、Microsoftは人工知能の技術を自社に取り込むために多くのスタートアップを買収した。そんな中、ここ5年間でAI関連のスタートアップとして買収された最大手4社は、イギリスで設立されていたというのをご存知だろうか？今回はそんなAI産業に強いイギリスのこれから伸びていきそうなAIスタートアップ企業を紹介していく。 関連記事：【2017年】btraxが注目する30のスタートアップ 1. Darktrace Darkfaceはネットワーク内でのウイルスの検知・対策システムの作成の自動化を可能にした唯一のAIシステムである。この人工知能はケンブリッジ大学出身の数学者によって開発された。 この自動学習の取り組みというのは人間の免疫システムの仕組みを参考として始められた。人間の体が今まで出会っ
助成金の利用条件と活用方法まとめ！研修、採用から設備投資まで | LISKUL
「応募していれば使える助成金があったのに応募できなかった。」 「助成金があれば新しい事業や設備投資ができるのにしていない。」 知らないだけでこんな機会損失をしてしまうのは、非常にもったいないです。 そこで今回はそもそも助成金がどういうものか？といった基本から、自社で使える助成金の効率的な調べ方まで網羅的にお伝えします。 ※本記事は株式会社ライトアップ 提供によるスポンサード・コンテンツです。 例えば何ができる？助成金を活用し、社員研修を実質無料で受講できる場合も助成金の使い方の1つに、スキルアップにかかわる研修があります。 例えば、リーダーシップなどの仕事全般に関する研修から、Webマーケティング、WordPress、SEO、会計戦略やPL/BSやキャッシュフローなど。これらを学べば、今まで代理店や外部に頼んでいた業務も部下に任せられる場合もあるでしょう。 具体的にどんな研修ができるか分か
検索順位を簡単に定点観測できる！Gyro-n SEOを使ってSEOを効率化しよう！
「Gyro-n SEO」というツールをご存知でしょうか。 Gyro-n SEOはクラウド型の検索順位チェックツールで、気になるキーワードを登録しておけば、毎日定刻に順位を自動でチェックしてくれるツールです。キーワードと対象ドメインを登録しておくだけという簡単な操作方法で多くのユーザーから支持を得ています。 今回は、Gyro-n SEOの基本的な使い方を解説します。 目次 Gyro-n SEOとは Gyro-n SEOで出来ること Gyro-n SEOを使ってみよう 会員登録のやり方 順位チェックの使い方 競合比較の使い方 流入パフォーマンスの使い方 検索結果プレビューの使い方 メモの使い方 データエクスポート使い方 Gyro-n SEOとは Gyro-n SEO（ジャイロン SEO）は株式会社ユニヴァ・ペイキャストが2015年に提供開始したSEO統合管理ツールです。 Gyro-n SEOは
やっぱりカッコいいのが好き。見た目重視の「OAタップ」
やっぱり見た目って大切。 機能性が高く、コンパクトで持ち運びに便利なモノが求められることの多い現代。タブレットやスマホがあれば、何でもできるようになったからこそ、さらなる便利さやコンパクトさを求める方も増えたのかもしれません。 でも、機能性の高さやコンパクトさよりも、見た目にこだわっているモノが欲しい。という方もいるはず……。今回は、見た目を重視して作られた「電源タップ」をご紹介。シンプルなデザインが好きな方も、少しの遊び心を入れるだけで、もしかしたら日常が楽しくなるかも。 とにかくカッコいい電源 本体の独特な形状は、電子機器を接続し、実際に使用する際もカッコよくなるデザインです。そのため、コンセント口は最低限必要と考えられる3口。その代わりに、スマホやタブレットなどの充電に必要な電流を兼ね備えたUSBポートが2口搭載されています。 機能性もカッコいい
[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar
デスクトップ、タブレット、スマホに対応した、通常のスタティックなヘッダやスクロールしても常に上部・下部に固定表示されるバーとして配置できるナビゲーションを実装するスタイルシートを紹介します。 スクリプトは一切無し、アニメーションも快適な超軽量のスタイルシートです。
![[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac45d35aaf5f1c4fa8e28270b3156a50754ca6ce/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017022201.png)
UXデザインプロセスがプロジェクトに応じて柔軟であるべき理由
Codal社のクリエイティブ・ストラテジスト。 マーケティングおよび戦略の企画・実行、ニュースレターの企画と構成などを手掛ける。 UX業界に身を置く人なら誰もがそれぞれの「UXデザインプロセス」を持っており、その手法はさまざまです。似たようなフローやプロセスであることが多いものの、考え方は大きく異なります。 UXデザインプロセスでは、１つの手法がすべてに当てはまることはありません。デザイナーやUXを担当する人であれば、「UXデザインプロセスとは何ですか？」と何度も問いかけられたことでしょう。より抽象的なレベルでの概論を展開することも可能ですが、プロジェクトの詳細を理解するまでは、プロセスを定義するべきではないでしょう。 UXデザインプロセスの重要性 最終的な製品の品質が、わかりやすく簡潔なUXプロセスによって決まることもあります。つまり、プロセスによって製品の良し悪しが決まってしまうという
フリーフォントとは思えないほどかっこいい！ミニマルにデザインされたPhotoshopとIllustrator用のロゴ素材
フリーフォントとは思えないほどかっこいい！ミニマルにデザインされたPhotoshopとIllustrator用のロゴ素材
【Interview】世界70か国のユーザーから依頼殺到!誰でもウェブサイトをアプリにできるサービス「Joren」の魅力に迫る | Techable(テッカブル)
Marketing 【Interview】世界70か国のユーザーから依頼殺到!誰でもウェブサイトをアプリにできるサービス「Joren」の魅力に迫る 誰でもウェブが作れる時代から、誰でもアプリが作れる時代へ。 「Joren（ジョーレン）」は、ウェブサイトを手軽にアプリに変換する画期的なサービスだ。昨年7月頃より、海外ユーザー向けに提供を開始。これまでに70か国以上から、4,000件を超えるアプリ作成依頼を受注している。 この1月より、満を持して日本国内での法人向けサービスもスタート。なかなかアプリ開発に踏み切れなかった企業のために、活用の支援を図っていくという。 開発を手がけたのは、スマホアプリ分析プラットフォーム「App Ape（アップエイプ）」で知られるフラー。CTOの藤原 敬弘 (ふじわら たかひろ)氏と、グローバルマーケットマネージャーの岡本 友理香(おかもと ゆりか)氏に、話を聞い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
任意の要素にマウスの動きに合わせてパララックス効果を表現出来るスクリプト・「Tilt」
お前らが一番使うアプリってなに？ : 2chコピペ保存道場
商用利用無料！背景に、写真やイラストのオーバーレイに使えるざらっとしたテクスチャ素材
さまざまなフォームのスタイルサンプルとコードを大量にまとめた・「77 CSS Forms」
シンプルで見やすいHTMLリファレンス・「htmlreference.io」
ディープラーニングでHTMLにclassを自動付与してくれる・「CSSRooster」
美しいグラデーションを大量に収集、CSSをコピーできる・「WebGradients」
カフェ等のノイズ音をBGMに出来るWebサービス・「Hipster Sound」
インテリアデザインについて友達に相談できる『Decorator』 | 100SHIKI