レスポンシブ対応したモーダルウィンドウのプラグインのまとめ
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） DEMO GitHub（Boxer） GitHub（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよいかと思います。 『Boxer』の方が設置は簡単です。 このプラグインのいいところはレスポンシブに対応している、かつスマートフォンで見た場合には最適化して表示してくれるところです。 こんな感じにきれいに表示してくれるので重宝しています。 動画やイン
Chromeのヘッドレスブラウザがやってくる。というわけで試してみた。 - Qiita
注意：この記事は古いです。2016年06月06日に書いた記事です。 2017/04/14 追記： Chrome59から正式にヘッドレスモードが搭載されます。 ヘッドレスモードではPhantomJSなどのようにJavaScriptでヘッドレスブラウザを制御することも可能です。 https://chromium.googlesource.com/chromium/src/+/master/headless/ 2017/06/07 追記： NightmareJS風に操作できるライブラリをリリースしています。 ヘッドレスChromeをもっとも簡単に操作できると思われるNightmareJS風ライブラリ http://qiita.com/devneko/items/3689b46fc2bcdb8121a8 先日、Googleの人が「Headless Chrome is coming so soon」
ミクさんをリアルに召喚！ 現実の机の上で踊りまくる3Dモデルに未来を見た
これまでもAR（拡張現実）技術を使い、舞台などで活躍してきたミクさんこと初音ミク。そのミクさんがまるで机の上で踊りを披露しているかのような動画が投稿され、話題になっています。 え、これフィギュアじゃないの？ 見てください、このリアル感を！ 3DモデルのモデリングにはBlenderというソフトを使っていますが、服の皺やランプによる影のでき方など、どう見ても現実のフィギュアとしか思えません。これが実際に動き出すなんて、信じられますか？ 立ち姿も美しいミクさん ミクさんが机の上でノリノリです 決め姿もカッコいい ChromeブラウザのCMソングにも採用された「Tell Your World」にあわせて踊りまくるミクさん。小さな体と切れの良いダンスが相まって、とってもカワイイですね！ こんな風に実際に踊るミクさんがいたら、ぜひお持ち帰りしたい……。 今回の動画はAR技術の一種「マッチムーブ」を利用
Dockerでホストを乗っ取られた - Qiita
注意 本件記事ですが、私の不適切な行動（拾ったスクリプトを検証なく走らせる）が原因です。「dockerは（特に何もしなくとも）危険」との誤解を皆様に与えた点、ご迷惑をおかけいたしました。申し訳ございません。 拡散されている記事を削除するのはさらなる誤解を招きかねないと思いましたので、冒頭に注意を付記しております。以下の記事は、「自分が何してるかをきちんと検証できないとセキュリティホールを生み出す」という意味で参考にして頂ければ幸いです。 追記 Twitterやはてブで言及いただきました皆様、ありがとうございます。 本件はpullしてきたイメージが悪意ある開発者によるものかどうかにかぎらず、不適切な設定をしていると起こり得ます。 ※コメント欄に質問への回答という形で、私がそのときに走らせていたイメージの一覧を挙げておりますが、どのイメージも評判あるものだと思います。 皆様におかれましては「あ
UCDAフォント みんなの文字 | UDフォントに科学的基準
私たちの周りにはたくさんの重要な情報があふれています。しかし、情報を伝える文字が不明瞭だと受け取ることができません。例えば小さく印刷された注意書き、遠くから見る案内サイン…。情報の見やすさ、わかりやすさが問われる時代です。 「みんなの文字」は、「劣化した状況でも見やすく」をテーマに、人間中心設計のプロセスと科学的基準により開発された、第三者認証であるUCDA認証を取得している唯一のUDフォントです。
文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン
研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演（アウトリーチ活動）の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者（研究仲間や審査員、一般市民）へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく
テストコードの期待値はDRYを捨ててベタ書きする ～テストコードの重要な役割とは？～ - Qiita
はじめに みなさん、DRY原則はご存知でしょうか？ DRY = Don't repeat yourselfの略で「繰り返しを避けること」という意味ですよね。 良いコードを書くための重要かつ基本的な原則なので、みなさんよくご存知だと思います。 ですが、DRY原則はテストコードを書く場合は必ずしも最善にはならない場合があります。 他の人が書いたテストコードを見ていると、テストコードにDRY原則を適用したために、かえって悪いコードになっているケースをときどき見かけます。 この記事ではなぜテストコードをDRYにすると良くないのか、ということを説明します。 追記：タイトルを変更しました @t_wada さんのコメントを受けて、タイトルを見直しました。 「テストコードはDRYを捨ててベタ書きする」 => 「テストコードの期待値はDRYを捨ててベタ書きする」 【注意】この記事は画一的なテストコードの書き
モックアップを画像をアップロードするだけで制作してくれる「Smartmockups」
WEBデザインを生業として行う上で、単純にデザインしたものを見せるだけでは無く、時には実際にスマートフォンやPCに表示されている画像を見せてイメージを膨らませていただく作業をしたということもあると思います。今日紹介するのはそんなモックアップを画像をアップロードするだけで制作してくれる「Smartmockups」です。 デスクトップからスマートフォン、タブレットなど様々なモック写真が公開されており、それらを簡単に利用することが可能です。 試しにDesigndevelopのスクリーンショットで試してみましたので以下からご覧ください。 詳しくは以下 アップロード後に写真範囲が選択でき、生成後はサイズを指定してダウンロードすることができます。手慣れた人であればモックアップ制作もほんのすこしの手間ですが、画像を探して合成してというのは熟練者でも時間がないときには面倒なもの。 プレゼンテーションや制作
Webデザインの見せ方やアイデアが素晴らしい、最近気になったチェックしておきたいWebサイトのまとめ
Webデザインのセンスを磨く方法の一つは、他人の作ったものを数多く見ること。 コンテンツの見せ方やレイアウト、繊細なアニメーションを使ったインタラクションなど、デザインのアイデアが素晴らしい、最近気になったチェックしておきたいWebサイトを紹介します。 Wrk フランスのWeb制作会社のサイト。ぱっと見、普通の矩形パネルに見えますが、CanvasとSVGを使った弾力性に富んだレイアウトやグラフィックは非常に楽しめます。 縦長ページの構成は新感覚で、ナビゲーションのスマホ時にフッタのコンテンツと合体するのはいいアイデアですね。 Booounce! ショートムービーやアニメーションGIFをコレクションしているサイトで、バウンスの名のようにバウンドを伴うエフェクトが気持ちいいです。ナビゲーションの細かいアニメーションをはじめ、一覧表示、進むと戻る、作品の見せ方、なにもかもがインタラクション性に優
Yaku Han JP - 約物半角専用のフォント
ゴシック体 明朝体 丸ゴシック すべて カッコのみ Hiragino Noto 横書き 縦書き w100 w200 w300 w400 w500 w600 w700 w800 w900 0.625rem 0.75rem 0.875rem 1rem 1.125rem 1.25rem 1.5rem 2rem Before 「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは9種類。Noto Sans JPに沿っています。 <!-- HTML：CDNリンクを貼り付け --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist
HTML 5.1 が今年 9月の勧告に向けて勧告候補への移行検討段階へ、HTML 5.2 の策定も開始
今年 4月6日に 「Working on HTML5.1 - W3C Blog」 というエントリーが W3C 公式 Blog に投稿され、2016年 9月には HTML 5.1 を勧告として公開する計画がアナウンスされましたが、これに関連して先週末、下記の通り、現在最新の HTML 5.1 Working Draft を勧告候補（CR - Candidate Recommendation） に移行する提案（CFC - Call For Consensus）がされた旨、公式 Blog にてアナウンスされました。 Finishing HTML5.1 ... and starting HTML 5.2 ： W3C Blog 元々、HTML5 の勧告スケジュールとして公開されていた 「Plan 2014」 内で、HTML 5.1 については 2016年第4四半期 （2016 Q4） に勧告というス
ユーザー解析機能が無料になったFirebaseの使い方超入門
2016年5月18～20日、グーグルの年次カンファレンスGoogle I/Oが開催されました。今年も多くのサービスが発表されて盛り上がりを見せていました。 今回のGoogle I/Oでは、Firebaseの機能の1つであるモバイルアクセス解析ツール「Firebase Analytics」の無償化が発表され大きな話題となりました。しかしFirebaseはアクセス解析だけではなくデータベース機能、プッシュ通知機能、ユーザー管理機能など非常に多くの機能を備えています。 本稿では、Firebaseのデータベース機能を使って下図のようなチャットアプリを作ることで、FirebaseやFirebase Analyticsの使い方について解説します。
人工知能がWebをデザイン - AIが自動的にサイトを生成/改善する”The Grid”
最近ではAIや人工知能に関するニュースが毎日のように伝えられるが、サンフランシスコではその最先端のテクノロジーをサイト制作に活用したサービスを提供するスタートアップが話題になっている。 今回紹介する、The Gridと呼ばれるこのサービスはユーザーが管理画面から文字や写真をアップし、カラースキームを決めるだけでそれらのスペックに最適なサイトを”人工知能”で生成する仕組み。 人工知能で最適なページを生成/更新The Gridが提供するのは、今までWebデザイナーやグロースハッカーがその知識と経験を元に作成して来たサイトやページを、AIを活用することでサイトの目的とユーザーに求めるアクションを獲得に対して最適なデザインやレイアウトを生成してくれる仕組み。これが本当なら今後Webデザイナーの仕事は一変する可能性がある。 AIが画像を分析し最適なデザインを生成アップした写真は、システムが最適なサイ
【自動彩色！】色塗り人工知能のインストール方法【Ubuntu】 – 回れ右の内輪差
一見の価値あり！ サンプル 色付けソフトが公開されたよ！ 2016年5月27日に、早稲田大学理工学術院の石川博教授、飯塚里志研究院助教、シモセラ・エドガー研究院助教らの研究グループは、ディープラーニングを応用して白黒写真を自然に彩色する手法を確立したことを発表した。そしてその成果はGitHubでソースコードが公開されていて、誰でも自由に（クリエイティブ・コモンズの表示-非営利-継承4.0国際のライセンスで）利用することができる。 白黒の写真に色付けができる！しかも自動で！これはすごい、試してみたい。Ubuntuからこの成果を試すのはとても簡単！以下の数個のコマンドを端末に入力するだけで始められる！Gitを今までに使ったことをない人を対象に説明するよ！ まずTorchを用意 これから端末にコマンドをいくつか入力して、Ubuntuに写真色付けソフトを準備する。コマンドの中には「あれ、何か間違っ
本のしおりになる読書用ライトが極薄で画期的
テクノロジーを活かした読書スタイルは、電子書籍だけじゃありません。 Kyouei Designによるブックマークは、一見シンプルにして読書用ライトとしても使える優れもの。通常の本のしおり同様に極薄で、すでに読み終えたページの目印になるほか、トップ画像のように折り畳むと明るく文字を照らしてくれます。 特別なフィルムに施されているのは、薄型のLEDと、電気回路となるナノ粒子インク。腕時計に用いられるサイズのリチウム電池CR2032（別売り）のプラス面とマイナス面が組み合わさることから、折り畳むと点灯する仕組み。 お買い求めは、Designboomのオンラインストアにて、16ドルで販売中です。 source: Designboom Shop Andrew Liszewski - Gizmodo US ［原文］ （Rina Fukazu）
マイクロソフトがWindows Holographicを発表。VRとMRが繋がった未来を描いた動画も公開
Home » マイクロソフトがWindows Holographicを発表。VRとMRが繋がった未来を描いた動画も公開 マイクロソフトがWindows Holographicを発表。VRとMRが繋がった未来を描いた動画も公開 マイクロソフトは台湾で行われた「COMPUTEX TAIPEI 2016」内の基調講演にて、HoloLensに使われているMR技術のプラットフォーム「Windows Holographic」を、サードパーティとなる企業に公開することを発表しました。 これを踏まえてマイクロソフトは、今後あらゆるデバイスがWindows Holographicを通して連携をし、物理世界とバーチャル世界とを簡単に（かつ他人と一緒に）行ったり来たりできる未来の実現を目指しています。 Windows Holographicのプロモーションビデオとして公開された動画。MRデバイスとされるHolo
最近Webデザイン界で流行っている「Duotone」をうまく使えば超イケてるサイトに様変わりするに違いない - Brian'z Imagination
その昔アンディ・ウォーホルという巨匠が描いたマリリン・モンローのポップアートのレプリカが4年くらい前にマンションに飾ってあったのを思い出すけれど、最近Webデザイン界では海外を中心に「Duotoneデュオトーン」と呼ばれるデザインが流行りだしている。 シンプルでありながら、ポップでビビッドで非常に印象に残るデザインなので、「Duotone」を極めれば超イケてるサイトになりそうな予感。 最近流行っている「Duotone」って何ぞ？ 「Duotoneデュオトーン」は「Duo(2つの)」＋「tone(色)」をあわせた言葉で、ベースとなるミドルトーンとハイライトカラーの2色を中心に描き出されるハーフトーン作品のこと。Duotone作品自体は昔から存在するのだけれど、昔のアーティストが一生懸命に写真をつなぎあわせていた時代から時が経ち、Photoshopのアップデートで簡単に写真を加工してDuoto
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
絵描きさんが自分の絵をそっくりに３Ｄ化したいときの下絵の作り方について 榊正宗
「Yahoo!ツールバー」がマルウェア判定される事例が発生中
みんな大好き「学校アセット」を Unity5でライティング
画像認識に関する 機械学習技術 / kivantium さん - ニコナレ
カードをテーブルに並べて斜めからみた風の3DのグリッドUI実装:phpspot開発日誌