UXデザイン、UI設計の観点から「JR東日本アプリ」を勝手にRedesignしてみました。 今回、私たちはアプリを勝手にデザインする新企画、APP Redesignの対象として、「JR東日本アプリ」を選定しました。 この「JR東日本アプリ」は非常に便利で、使いこなすとユーザにたくさんのメリットがあるように感じました。 しかし、アップルストアのレビューは星２つでした…。 そのうちの多くの批判的な意見が、アプリケーションの重さとクラッシュでしたが、 デザイン的な側面から、ちょっとした調べ物に使いづらいという意見がありました。 ワークショップをやってみました。 上記のレビューを踏まえ現状を把握するため、私たち自身で、社内外のメンバー8名（20代前半〜50代後半（男女））に対し 非構造化インタビューを行った結果、「ごちゃごちゃして見える、わかりづらい…」 という年齢、性別に依存しない共通の意見を得

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Eコマースで必須の機能と言えば決済です。その決済手段も昔であればクレジットカード、銀行振り込み、代引きくらいだったかも知れませんが、今では場合によってはBitCoinを使う場合もあるかも知れません。 そんな多彩になっている決済に関する各種アイコンをWeb Font化したのがPaymentFontです。PaymentFontさえあれば決済周りのデザインが簡単になりそうです。 PaymentFontの使い方 PaymentFontの一覧は次のようになります。BitCoinにApple Pay、Amazonもあります。 通貨の単位もあります。 円もありますし、PayPalも用意されています。 日本だとなじみのない決済アイコンもありますが、海外対応する中では大事になるかも知れません。 Pa

Squareがメモリリークを検出するライブラリ square/leakcanary を公開したので、さっそく使ってみたらすごく便利だった話です。 A small leak will sink a great ship Piwaiが書いたLeakCanaryの記事がこちらです。 LeakCanary: Detect all memory leaks! 要約すると、 Squareではビットマップキャッシュに顧客の署名を書いていたが、端末の画面のサイズ分のメモリを確保するので、署名をするときにクラッシュすることがあり、それがOOMの大半を占めていた。 Bitmap.Configを変更したり、OOMをキャッチしてGCを走らせたりしたが、問題の解決には至らなかった。 我々は間違ったアプローチを取っていたことに気が付いた。ビットマップの大きさではなくメモリリークが根本的な原因だったのだ。 通常であれば

(2015/5/12更新)管理用インスタンスをbeanstalkで作成すると逆にデプロイの手間が増える、AutoScaling Groupに自動的に入れられてしまう（停止した場合、元のAMIの状態に戻る）というご意見を頂きました。 管理用インスタンスについては手動でEC2にて作成するという方法に変更しました。 森永です。 今回は、サクッとWebサイトを立ち上げたいとお考えの人向けに、AWS Elastic Beanstalkを利用して、WordPressでWebサイトを立ち上げてみたいと思います。テクニカルなことは、当ブログでも過去に記事がありますので、そちらも参照してもらい、今回はこんな流れで簡単に作れますよ、というところをお見せできればと思います。 AWS Elastic BeanstalkでWordPressを始める AWSにWordPress3.8をインストールしてみた – その1

はじめに ジョブスケジューリングを簡易的な仕組みで構築する場合、まず候補に上がるのはEC2上のLinuxでcronを利用したものだと思います。特別なミドルウェアの追加インストールはいらないし、使い慣れているし、スクリプトと組み合わせればだいたい何でも出来ちゃいますし。しかし単体のEC2上でcronを動かすだけでは、可用性が確保出来ません。AWSにおいてAZ障害まで考慮するのであれば、Multi-AZに冗長化されたシステムを構成し、可用性を確保する必要があります。 で、単純に複数のAZに分散してEC2を構築し、crontabを共有するだけでは、ジョブが二重に実行されてしまいます。アクティブ/スタンバイに動作するような仕組みを考慮しなくてはいけません。 そこで今回は、クラスタ構成がサポートされている最新のcrond(cronie)を使って、Multi-AZに対応した高可用Cronサーバを構築し

rochefort/php-switcher.sh 最近仕事でPHPを使うようになり、カジュアルにPHPのversionを切り替えたいなぁ と思い phpbrewやらphpenvというのを入れてみたのですが どうも動かなかったので、切り替え用のスクリプトを作成してみました。 homebrewで複数Installするのが前提です。 最近は、shellもbpkg/bpkg っていうパッケージツールがあり jsonを用意してgithubに上げておくと簡単にinstallできるようになっているようなので 試しに使ってみました。

連載「Webサイト・アプリ高速化テクニック徹底解説」の第5回は、前回の「DOM操作の最適化によるJavaScriptチューニング（前編）」に続く後編です。後編では、createElement()などのDOM操作メソッドを使ったさまざまなテクニックや、パフォーマンスを劣化させるよくあるパターンについて詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ 前回は、DOM操作が遅い原因と仕組みについて簡単に説明し、チューニングのサンプルをいくつか解説しました。その中で、innerHTMLを利用したコードをサンプルにあげていますが、innerHTMLを利用する場合、いくつかの

概要 Object.assignはオブジェクト同士をマージするJSerの誰もが長年追い求めた夢のメソッドである。 使い方 Object.assign( target, ...sources ) 第一引数で渡したオブジェクトに、第二引数以降のオブジェクトが直接持つ、 全ての列挙可能なStringまたはSymbolプロパティを加え、結果として返す。 例： var sym = Symbol() var obj1 = { "str": 1, } var obj2 = { "str": 2, [sym]: 2 } var obj3 = Object.assign( obj1, obj2 ) console.log( obj1 == obj3 ) // true console.log( obj1["str"] == 2 ) // true console.log( obj1[ sym ] == 2

春のJavaScript祭り https://javascript-fes.doorkeeper.jp/events/22834 のLT資料です。Read less

前回は、クリックで開閉するスライドメニューを作成しましたが、今回はメイングラフィックスペースをグラフィカルにするスライダーを作成します。 ページ上部のメイングラフィックスペースに複数の情報を表示させるようにするスライドショーを作成する。今回は、メインの画像が中央に、その両側には前後のグラフィック画像に黒い半透明の画像が被さった状態で表示されるスライダーを作成します。 前後の画像が両側に表示されるため、ウィンドウサイズが変わっても横幅いっぱいに画像が表示され、よりグラフィカルなイメージを与えることができます。 今回作成したサンプル 【サンプル】ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する http://www.html5-memo.com/sample/jq-books/08 スライドショーのHTML ヘッダーエリアの上にスライドショーを設置するが、レイアウトによ

連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという

データ件数が大量に(レコード数100万以上とか)ある場合、ALTER TABLE時にテーブルの書き込みロックが無視できないレベル(時間)で発生します。 テーブルの書き込みロックについて MySQL5.5以前: ALTER TABLE時に発生 MySQL5.6以降: ALTER TABLEでカラムのデータ型変更、全文検索用インデックスの追加、プライマリキーの削除、文字コードの変換/指定 を行った時に発生 参考: http://takatoshiono.hatenablog.com/entry/2015/03/11/013316 pt-online-schema-changeを使用することで、テーブルロックなしでのALTER TABLEができます。 pt-online-schema-changeのインストール方法(Mac homebrew) $ brew install percona-too

「Webサイトやアプリのナビゲーションに ハンバーガーメニュー を使うべきかどうか」というテーマに関して、UI/UXデザイナーの間で交わされる、すばらしい議論や記事を目にする機会があります。 もし、ハンバーガーメニューの始まりや歴史が気になる場合は こちらの記事 をご覧いただくといいでしょう。 しかし、今回はハンバーガーメニューについて語る気はありません。この記事ではハンバーガーメニューの代わりとなり得る他のナビゲーションを模索し、その説明をしたいと考えています。 なぜこの記事でハンバーガーメニューを扱わないのでしょうか？　それは、ハンバーガーメニューは簡単で便利なソリューションであると同時に、以下に列記するような数多くの欠点を併せ持っていると、私が個人的に確信しているからです。 * 効率性の低下（インタラクションが遅くなる） * 視認性の低下（メニューが隠れる） * 不要アイテムの増加

マイクロソフトが提供しているプレゼンやアプリなどに使えるアイコンを、知っている範囲で最近のものをまとめました。 Cloud and Enterprise Symbol/Icon set Cloud and Enterprise Symbol/Icon set は、UX グループが Azure 向けに作成した200個以上のアイコンセットです。PNG 画像と Visio ステンシルがダウンロードできます。 新サービスのリリース時と四半期ごとに更新が予定されているようです（現在は、4月に更新された Ver. 2.22）。アンケートやメールでのフィードバックも受け付けています。 基本は、Azure 関連のアイコンですが、一般的なアイコンも含まれています。資料作成などの用途に広く使えます。 You can use them in architecture diagrams, training mat

Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before,

トップページ > ノウハウ > エンジニアとして錆びないために読む本 > クックパッド舘野祐一氏がマネジメントに目覚めた3冊とは？【連載:エンジニアとして錆びないために読む本】 業界内で名の通ったCTO（最高技術責任者）や、CTOに就任したばかりのエンジニアに、仕事に役立つ書籍や読書体験を紹介してもらうこの連載。第2回目の今回は、日本最大の料理レシピサイトを運営するクックパッドの執行役CTO・舘野祐一氏に登場してもらう。 国内外でのM＆Aや海外進出を積極的に推し進め、成長への道を走り続けているクックパッド。その躍進を技術面から支える舘野氏が選んだのは、「襟を正してマネジメントに向き合うために読む3冊」だと言う。 これらの本を選んだ理由について、舘野氏に聞いていく。 技術部長就任を機に、経営やマネジメント本を読むように 20代は技術書をよく読んでいたという舘野氏が、経営やマネジメントに関する