The most high-fives in one minute is 290 and was achieved by Kaiser Permanente San Diego (USA), in San Diego, California, USA, on 21 April 2016. The attempt was a part of Kaiser Permanente's "High Thrive" campaign.

THETA Sで撮影した360度画像。これをSNSに投稿するなら別アプリ「THETA+」がオススメです。 THETA Sの360度画像は面白いですが、基本的にはアプリ内でぐりぐり回しながら楽しむもの。SNSへ静止画を投稿するには適していない形式です。 これをSNSに投稿するための形に加工できるのが「THETA+」というアプリになっています。

RICOH THETA Sのシャッター音が消せるようになりました。 THETA Sの「ピチュン」ってシャッター音、独特ですよね。意外と音量も大きいという。 ひっそりと楽しみたかったのに街中で思わぬ注目を集めてしまい、ちょっと恥ずかしい思いをしたのは私だけではないはず。 しかし喜ばしいことに最近のアップデートでシャッター音の音量調整機能が実装されたのです。これによりシャッター音を消すことができるようになりました。 RICOH THETA Sのシャッター音を消す方法 1RICOH THETA SとiPhoneをWi-Fiで繋いでいる状態で、iPhoneのTHETA Sアプリを開きます。

MacBookのような小さなデバイスに付いているスピーカーで音楽を聴くと、スピーカーがショボくて貧弱なサウンドしか楽しめない時がありますが、「Boom 2」を使えばMac内蔵のスピーカーの音量や音質が飛躍的に向上させることができます。 ▼使い方は簡単です。まずあらかじめMacに接続されている外部スピーカーやヘッドフォンなどのアクセサリーを全て外した状態で、「Boom 2」を起動します。 ▼次に「補正」ボタンをクリックします。 ▼自動的にシステム内部のサウンド設定がカスタマイズされます。 ▼補正が完了したら「Boom を開始」ボタンをクリックするだけでOK！ ▲あとは任意のプリセットを選択し、音楽を再生するだけ！Mac標準のサウンド設定では楽しめない大迫力でクリアなサウンドを楽しむことができます（イコライザは手動で調整することも可能）。 ▼ちなみに無料でリリースされているiOSアプリ「Boo

PCとAndroidのGoogle Chromeにプッシュ通知が送れるPush7を導入してみました。って言ってもプラグインを入れてコードをコピペしただけですが…。 ブログの更新をプッシュ通知してくれるPush7 Push7 | Webサイト運営者のための、Webプッシュ通知サービス Push7は株式会社GNEXさんが作成したPCとAndroidのGoogle Chromeにプッシュ通知が送れるウェブサービスです。通常プッシュ通知を設置するにはSSLに対応したサーバーやAPIなどを駆使して対応するものですが、この面倒な作業をPush7が代わりにやってくれます。 以前ご紹介したbpushというサービスを利用してきましたが、購読ボタンのカスタマイズが難しそうだので乗り換えてみました。 現在はbpushとPush7どちらからも配信している状態ですが、購読者数を見て徐々にPush7へ移行するつもりで

今回はMacでInstagram（インスタグラム）の写真を一括ダウンロードできるアプリ「InstaBro」をご紹介！ インスタグラムに投稿した写真をパソコン内にバックアップしたい時やお気に入りのユーザーの写真を一気にチェック時に役立つアプリです。 指定したユーザーの写真を一括ダウンロードできる！ ▼使い方は簡単です。「InstaBro」を起動したら「Add Account」ボタンをクリックします。 ▼次に「Username」に任意のユーザーネームを入力します。 ▲自分のユーザーネームを入力することもできますが、お気に入りのユーザーネームを入力することも可能。 ▼入力したユーザーがInstagram（インスタグラム）に投稿した写真が表示されます。 ▲1枚ずつダウンロードするのであれば「Download」ボタンを、全ての写真を一括でダウンロードしたいときは「Download All」ボタンをク

フックが使える！WordPressのAMPプラグインを使ってAMPページをGoogleアナリティクスで計測する方法 少し前からこのブログをAMP対応させているのですが、有効化するとすぐにAMP対応できるWordPressプラグイン(以下、AMPプラグイン)が最近のバージョンアップ（0.3.2）でより便利になったことを知りました。 いい機会なので、さきほどテストを兼ねてAMPプラグインを使って実装する方法に変更しました。 便利なフックを使ってみようところで、AMPプラグインの何が便利かというと「フックがいくつか用意されていること」です。フックを使うと以下のようなことができます。 フックを使えばこんなことができる（一部だけ紹介）Schema.orgの構造化データをお好みにできるオリジナルのデザインにできる（オリジナルテンプレート、CSSが適用できる）エンドポイントを変更できる（AMPページのU

最近のWebのUIデザインで採用されているさまざまなナビゲーションの名称とその役割、使う時のポイントを「Web UI Design Patterns 2016」から紹介します。 検索のナビゲーションは、ユーザーが特定の何かを探していて、それがどこにあるか分からない時に直接その何かにアクセスすることができます。 最も基本的なパターンはメインのナビゲーションに検索のオプションとして含めることで、右上に配置するのが人気です。虫眼鏡アイコンを添えたり、ドロップダウンで拡張した検索機能にしてもよいでしょう。 Notifications: 通知 ユーザーが何らかの操作をした時、もしくは新しい内容を伝える時に知らせることができます。 通知が普及したのは、ソーシャルメディアサイトにおけるプッシュコンテンツの影響が大きく、他のサイトでも通知を利用して新しいコンテンツやプロダクトやコメントを知らせるようになり

Bubble Layout Bubble Layout -GitHub まずはアニメーションを使った斬新なUI、バブルレイアウト。 ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。

PSDファイルでできるんだ！要素がぷるるんとアニメーションでくっついたり離れたりするエフェクト -Photoshop Gooey Effect

Instant Logo Search サイトにアクセスしたら、検索してもよし、スクロールして一覧を見てもよし、です。 ロゴはさまざまなものが揃っており、SVGとPNGでダウンロードできます。 はてなのSVGアイコンはなかったので、以前の記事からどうぞ。 「はてな」「LINE（ライン）」など、SVGのフリーアイコンを作っていただいたのでシェアします どんなアイコンがあるかは、数ページ分スクリーンショットを撮ってみました。 並びは、人気順です。

WordPressで作られているWebサイトをAMP対応するプラグイン（以下 AMPプラグイン）を入れると、特に設定することなくAMPページを作ることができます。AMPページは下の画像のような見た目です。 AMPプラグインを入れると、AMPページの見た目はこうなる プラグインを有効化するだけでAMP対応できましたね。 AMPページをどう作ればいいか？一度考えてみよう「AMPページはシンプルでいい」という考え方もできます。ただ、もしシンプルにするならするで「どうシンプルにするか」を考える必要はあると思っています。 ちなみに私個人的には、シンプルであっても何もしなくてもいいという意味ではなく、大枠で以下の3つの視点が必要だと考えます。（AMPページに限った視点ではないですね） 1.統一感を持たせるAMPではないページ(以下 通常ページ)で使われている色やフォントに合わせなくてもいいのか。 2.

JavaScript library to animate elements as they scroll into view.

作成：2016/03/14 更新：2016/06/29 Webサービス > 世界的に有名なダミーテキストといえばlorem ipsum（ロレム イプサム）ですが、その他、サイト制作に使えるテストデータやファイル系のダミー系ツールなどをご紹介します。 エンジニア速報は Twitter の@commteで配信しています。 WordPressテーマユニットテストデータ WordPress開発を行うときや公開前など、記事に流せるダミーデータが欲しい。そんなときはWPユニットテストデータ。長めのタイトル・マークアップ（見出し・引用・テーブル）タグ、画像の配置サイズのテストなど、レイアウトや機能に悪影響が出ないようにするために役に立つデータです。 GitHub - jawordpressorg/theme-test-data-ja: Japanese test data for WordPress 適

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Attendizeは音楽ライブやイベントなどの管理とチケットの販売を可能にするOSSです。PHPフレームワークのLaravelが使用されています。モバイル、タブレットフレンドリー、embed機能、イベントの主催者、出席者管理、データをXLS、CSVファイルでエクスポート、データ統計などが主な特徴のようです。出席者リストはプリント最適化されている等、細かい部分も考えて設計されているのは好印象でした。 今後はWPのプラグイン化、クーポンのサポート等を予定しているとの事。ライブ会場や主催企業等に需要がありそうですね。なかなか見かけないソフトウェアだと思いますので覚えておいて損は無さそうです。ライセンスはAttribution Assuranceというもの。あまり見かけませんがBSDの派生？っぽいですね。 Attendize

AppealingはスマフォアプリのUIを動画で紹介しているWebデザインギャラリーです。Tumblrで更新、その場で動画の閲覧が可能です。一応タグで分けられていますが、そこまでしっかりカテゴライズされている訳では有りません。書いてる方が気になったUIを集めてるだけっぽいです。基本的には有名所を中心に集めてるみたいですね。ブラウザの戻るボタンで前ページに戻ると表示おかしくなる以外はシンプルで割と良いです。 Appealing

open-foundry.comはOSSとして公開されているフォントをプロの目で厳選、収集しているWebサイトです。ノイズの無いオープンソースのフォントプラットフォームを目指しているそうで、選ばれたフォントは本サイト内で任意のテキストやフォントサイズ、フォントカラー等でテストすることが出来ます。フォントは30種厳選のようです。フォントの個別ページではライセンスはタイポグラフィの実践例、プロジェクトページへのリンク等が掲載されています。英字フォントなので日本国内では大きな需要は無いかもですが、覚えておいても損は無さそうです。 open-foundry.com

Products Comparison Tableはよくある製品情報の比較tableにフィルタ機能を付与するためのコードです。上記のようなUI。比較対象が沢山ある場合、ユーザーが任意の製品を選択してFilterボタンを押せば表示を選択項目のみに出来る、というもの。それだけでなく、縦長になる場合、製品画像がfixedされる仕組みも素敵でした。結構良かったのでメモ的に書いてます。コードはcodyhouseなので商用でも利用可能で帰属のリンクも不要です。 Products Comparison Table動作サンプル

ViziCitiesは都市の地図を3D化するオープンソースのプロジェクトです。OpenStreetMapを地図ベースに3D化を進めているそうです。単純な3D化ではなく、リアルタイムなデータを付与した3Dマップを目指しているそう。 例えば電車などの公共交通機関が今現在どこを通っているか、犯罪率の高い場所の可視化、洪水がどこで起きているか、どこで誰がSNSに投稿しているかなどをマップに組み込むといった、可視化されたリアルタイムデータ融合型の3Dマッププラットフォームを目指すプロジェクトのようです。データは国勢調査データ等の利用を考えているみたい。 壮大な計画ですが完成を想像すると、便利なような怖いような複雑な気分になります。本プロジェクトのソースコードはOSSとして公開されており、ライセンスはMITとなっています。 ViziCities

List.jsは既存のHTMLリストやテーブルに検索やソート、フィルタリング機能を付与するスクリプトです。他スクリプトを追加する事になりますが、ページネーションにも対応しているみたいです。他ライブラリに依存せず、シンプルながらパワフルな性能のスクリプトと言えそう。冗長化したリストは不便だったり視認性を欠いたりしがちなので本スクリプトなら利便性の向上に繋げられるかもしれませんね。ライセンスはMIT。 List.js

Chatjsはシンプルなチャットシステムです。Facebookライクに右下に小さく表示されるシンプルなもので、プラットフォームにも依存しないそうです。ソーシャル要素を持ったWebアプリにあると便利かもしれませんね。Facebookのような完全なSNSに必要かと聞かれたらちょっと分かりませんが。ライセンスはMIT. Chatjs

2016年3月10日 CSS, Webデザイン 要素に加えれば、画面に立体感をもたらすシャドウ。なんだか最近シャドウを取り入れたデザインをよく見かけるので、今回はシャドウを使う時の注意点やコツをまとめてみようと思います。 ↑私が10年以上利用している会計ソフト！ If you took a 3 year break from UI design, now you're all caught up: pic.twitter.com/4pdL17dXaF — Dylan Jones (@tDJ) March 2, 2016 このTweetにも描かれているとおり、1年周期でシャドウの扱いが変わっていますね。2014年は影なしの完全フラットデザイン。2015年はロングシャドウ。そして2016年はこれから紹介するぼんやりふんわりシャドウ。 CSSで実装するシャドウの基礎 通常のシャドウ 要素にシャド

Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にアニメーションエフェクトを加えやすくする、みたいなの。この手のはあまり使いませんけど楽といえば楽かもしれませんね。ライセンスはMITとの事です。 Hamburgers

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.

長い期間、同じ行動を行うと習慣になります。ユーザーが、ログインするためにパスワードを入力することを続けると、習慣ができあがります。ところが、ユーザーがパスワードを変えると、予期しなかったログインエラーとなります。 ユーザーは、古いパスワードを入力することに慣れてしまっているため、パスワードを変えたことを忘れてしまうのです。エラーメッセージが出ると、ユーザーはパスワードの入力ミスだと思ってしまいます。これは不満と混乱を招きます。 新しいパスワードを入力することが、まだ習慣になっていないのです。ユーザーが必要としているのは、最近自分がパスワードを変えたことを思い出させるリマインダーです。ユーザーにエラーメッセージを見せるよりも、どのくらい前にパスワードを変えたか教えてあげましょう。これにより、ユーザーはなぜ古いパスワードでのログインがうまくいかないのか、気づくでしょう。 このリマインダーは、ユ

昨年（2015年）5月の次のエントリーで「適切なファイル名を付けることをやめた」と書きました。 スクリーンショットの保存先とその処理 2015 - DTP Transit これが発展して、現在、フォルダー監視アプリ「Hazel」とドロップレットを使った半自動のワークフローになっています。 スクリプトなどを使うと、さらに省力化できそうですが、私には難しく、とはいっても、外注して制作をお願いするほどのものでもありません。同様の方に、少しでも参考になればと思い、共有します。 使うもの Photoshop A Better Finder Rename（リネーマー）通称「ABFR」 Captur Transmit（FTP） Hazel（フォルダー監視） MacDown（Markdownエディター） Excel 手間がかかっていたこと Webで使う場合、画像サイズの半分をimg要素のwidth属性に設

WordPressはデフォルトだとログイン後にダッシュボードに移動しますが、それをログイン画面のセレクトボックスで選択したページに移動させる方法です。 イメージはここで紹介してるカスタマイズ後のログイン画面で、このようにパスワード入力フィールド下に「ログイン後の移動ページ」としてセレクトボックスを追加されるようになります。 イメージではセレクトボックスの中身が「ダッシュボード」となっていますが、例えばこれを「プロフィール」を選択した状態でログインすると管理画面ログイン後にプロフィールページに移動するという動きになります。 実装にはfunctions.phpに下記のように記述します。 // ログイン画面にセレクトボックスを追加 function add_login_redirect_select_field() { ?> <p> <label for="rd">ログイン後の移動ページ</la

TOP  >  javascript , WebDesign  >  divもタブもチェックボックスも回転のエフェクトを与えることができる「TURNBOX.js」 IEのサポートも縮小され、少しづつではありますが、制作の現場もアニメーションやエフェクトに対して積極的になってきました。本日紹介するのはdivもタブもチェックボックスも回転のエフェクトを与えることができる「TURNBOX.js」です。 こちらは様々な要素に対して、回転のエフェクトを与えることが可能となっております。例えばON/OFFのトグルだったり、アップロードだったりダイアログだったり、div自身にも与えることができるため、ページ全体を切り替えるようにした使い方も可能です。 詳しくは以下 様々な要素に対して簡単にアニメーションを割り当てられ、さらにパラメータで挙動の制御もある程度可能になっています。 あまりにも頻繁に利用し過ぎ

Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa

How to watch Polaris Dawn astronauts attempt the first commercial spacewalk

By Divya Thakur Twitterのようなひとりのユーザーが複数アカウントを運用するのがごくごく当たり前になっているサービスや、海外の目新しいサービスを試しに使ってみるという場合、使い捨てできるメールアドレスが欲しくなるものです。無料でメールアカウントが作成できるサービスは多数ありますが、電話番号を入力したりパスワードを入力したりと作成するのは意外に面倒なもので、「もっと簡単に捨てメアドが作れたら……」と思ったことのある人も多いはず。そんな時に役立ちそうなのが、たった2クリックで使い捨てのメールアドレスが作成できる「EmailOnDeck」です。 Free Temp Email - EmailOnDeck.com http://www.emailondeck.com/ 使い方は超絶シンプルで、まずはトップページにある「Step 1」の「私はロボットではありません」をクリック。

Pythonistaの作者Ole Zorn氏が開発中の新機能デバッガーをチラ見せ 全世界で絶賛を受けているiOS用のPython IDE、Pythonista。 iPhone、iPadでどこでもプログラミングが可能！　自由度が高く、実用的なプログラムが組める開発環境です。 Pythonista 3 カテゴリ: Productivity 販売元: Ole Zorn（サイズ: 244.4 MB） 全てのバージョンの評価: （0 件の評価） 参考: iOS用Python2.7であるところのPythonistaは楽しく、実用的で素晴らしい！ 参考: 「Pythonista」iOS上で動作するPython統合開発環境がv2.0にアップデート！その物凄い内容とは 参考: Python 3.5.1ベースのiOS用Python IDE「Pythonista 3.x」がβプログラムの登録受付開始 自由度の高