Slackで複数チームに入ってる人のためのiOSアプリ作った - Qiita
TL;DR SlackのチームをまたいだChannelの切り替えが簡単にできるiOSアプリを作りました。 AppStore: MultiTeam for Slack なんで作ったん？ Slackで7つのチームに入ってて、うち4つは今もアクティブ 基本家でも会社でもPCでSlack使ってるから、iPhoneアプリは出先でぱっと見てぱっと返す用途にしか使ってない 本家のアプリやと、ぱっと見ようと思った時にチーム切り替えんのがめんどい 昔: 右上の ... ボタンをタップ Switch Teams タップ 目的のチームをタップ 左上のSlackアイコンをタップ 目的のChannelをタップ 最近(昔から？): 目的のチームまで3本指スワイプ（スワイプした先がどのチームかわかりにくい・・・） 左上のSlackアイコンをタップ 目的のChannelをタップ そうじゃなくて、Facebook Mess
xterm.js - JavaScriptで作られたWebベースのコンソール風UI MOONGIFT
クラウドサービスの中には、Webブラウザからサーバにログインして操作できるような機能を提供しているものがあります。エンジニアであればWeb上で設定するのではなく、コンソールで操作した方が手軽と言うことは多いかと思います。 そんな機能を実現してくれるソフトウェアがxterm.jsです。JavaScriptで作られたターミナル風ソフトウェアです。 xterm.jsの使い方 デモの画面です。文字を打ったりすることができます。何かが実行できるという訳ではありません。 xterm.jsはSourceLairによって開発されていて、ユーザがアプリケーションの操作を行うのに使われています。xterm.jsをベースにすることで、クラウドサービスをCLIから使えるようにするのは面白いかも知れません。入力内容を読み取れるので、入力された文字列によってコマンドを実行すれば良いでしょう。 xterm.jsはJav
コンバージョン率を劇的にアップさせるための30の心理作戦
By Tim Franklin Photography マーケットリサーチアナリストとして働き、SEOやPPCのスペシャリストであり、かつ心理学をたしなんでいるというニック・コレンダさんが、心理学の視点から導き出した「コンバージョン率を劇的にアップさせるための30の心理作戦」を公開しています。「フムフム、なるほど」というものから、「恐ろしあ……」となる戦略まであり、広告運用やSEOの知識がない人もサービスを使うユーザーとして知っておくべき内容になっています。 Conversion Optimization: An Enormous List of Psychological Tactics http://www.nickkolenda.com/conversion-optimization-psychology/ 30の戦略を見る準備として、運営しているサービスをCTA別に分けてじょうご状
ブックマークしておきたい！UIデザインのアイデアに困った時、参考になるサイトのまとめ | コリス
WebサイトやアプリなどのUIデザインのアイデアに困った時の参考に、そして勉強になるサイトを紹介します。 ページのレイアウト、UIのさまざまなコンポーネント、動きが気持ちいいアニメーション、実装のテクニックなど、定期的にチェックしておきたいサイトばかりです。 UI Patterns ページのレイアウト、ナビゲーション、データコンテンツ、フォーム、ユーザスクリーンなど、インタラクティブ性の高いUIデザインのさまざまな事例から、UIの問題を解決するデザインのパターンが紹介されています。 ローンチして間もないサイトですが、内容は非常に充実しています。 Collect UI DribbbleでUIデザインを探す人には、かなり便利です。日々アップロードされるDribbleのアートワークのUIデザインに関するもののみをコレクションしているサイトです。 このサイトもローンチしたばかり、登録数は2,000
あなたは今も犯している！？モバイルUXの7つの失敗 - ふろしき Blog
ここ最近、モバイルWebコミュニティにて、Apptimize社のトップであるLynn Wang氏がポストした「7 Mobile UX Mistakes You’re Probably Making Right Now」が話題になっています。 www.sitepoint.com その内容とは、彼女自身が、A/Bテストを使い様々なモバイルアプリの改善を行い、その中で得られた知見をまとめたものです。若干、煽り気味なタイトルに見えますが、中身はしっかりしていて、多くの人がなんとなく感じていることをキレイに言語化しています。個人的にも、参考になると感じています。 本人の許可が頂けたので、日本語らしく読めるようざっくりと意訳し共有します。 1. 不必要にサインインをさせようとする 多くの人々は、ユーザのサインインが価値を持つものだと考えています。しかし、時にサインインは、ユーザに苦痛を与えます。たとえ
メニューのデザイン： ユーザーを手助けする、15のUXガイドライン
アプリケーションでもWebサイトでも、ユーザーはメニューによってコンテンツを見つけ、機能を利用する。このチェックリストを利用して、メニューがきちんとその役目を果たせるようにしよう。 Menu Design: Checklist of 15 UX Guidelines to Help Users by Kathryn Whitenton on November 29, 2015 日本語版2016年2月16日公開 ユーザーの移動の手助けは、ほとんどすべてのWebサイトやアプリケーションにとっての最優先事項である。つまるところ、この上なくかっこいい機能も強力なコンテンツも、ユーザーが見つけることができないなら無意味だからだ。また、検索機能を提供しているとしても、移動の手段として、検索だけに依存すべきでないことも多い。たいていのデザイナーはこのことを理解している。そこで、自分たちのデザインに何らか
UIセンスが壊滅的なエンジニアがそれっぽいwebアプリを作るために使った無料UIライブラリをまとめておく - Qiita
仕事の傍ら、暇つぶしとかでwebアプリを構築したりするわけですが、どうにもUIセンスがなさすぎて、カッコイイサイトとかを参考に真似したりしても、なぜか自分でアレンジするととてつもなくダサくなる、ということを繰り返してきました。 で、もうこうなったら自分で考えずに、すべてライブラリに頼ろう！と思ってwebサイトを構築した時に使ったcssやjsのフレームワーク、ライブラリなんかを、簡単なコメント添えてまとめておこうと思います。 css自分で一切書かなくても、このぐらいのUIまではいけそうです。 フレームワーク Bootstrap ベースはtwitter bootstrapの恩恵に授かります。 GoogleMaterialDesignLiteも見た目はかっこいいんですが、色々コンポーネントがたりなかったりして、結局いくらか自分でデザインしないとどうにもならなくなる印象です。 jQuery 今更書
CSSで組んだドロップダウンメニューとスライドメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
以前、メニューバーをトグルメニューと両立してレスポンシブスタイルにするカスタムを書きました。 www.yukihy.com トグルメニューは、ボタンを押すと上下にスライドするようなものでしたが、 現在このブログでやっているみたいに、横からのスライドにして、なおかつPC版では子メニューも設定できるようにしてみたいと思います！ カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとっておくようにしてください。 実装図 注意点 カスタマイズ CSS HTML&jQuery HTMLにリンクを入れる その他のカスタマイズ 色を変える グローバルメニューの横幅を変えたい グローバルメニューとトグルメニューの変えるタイミングを変えたい まとめ 実装図 完成図はこんな感じです。ブラウザのサイズが広いときには、子メニューまで出せれる一般的なグローバルメニューで、 ブラウザサイズが狭くなると
「AM」の元編集長が手がける、女性が男性を「お気に入り」することで始まる恋愛応援アプリ「Poiboy」 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
女性だけで集まって飲んだり食事をしたりしているとき、場の盛り上がりがピークに達する話題のひとつが、「異性の好みやタイプ」ではないでしょうか。きっとこれは女性に限らないはず。最近流行りのドラマに出ている俳優から最近出会った男性まで、お互いの好みが似ていることがわかると、「じゃあ、◯◯も好きでしょ？」など会話が尽きません。 多くの女性がリアルに体験したことがあるこのやり取りを、オンラインに持ち込んで提供するのが、恋愛応援アプリ「Poiboy（ポイボーイ）」です。女性は、男性の顔写真を左右にフリックすることで、好みの男性を簡単にお気に入り登録。また、男性をタイプでグループ分け（「コレクション」）して、女性ユーザー同士でオススメし合う機能も。自分で好みの男性を見つけるだけでなく、好みが似た女性のコレクションから男性を見つけることもできるそう。 もうひとつ、ポイボーイならではの特徴が、恋愛の始まりの
IE8まで頑張るwebサービス開発で使えるCSS, HTMLに関するTIPS 10個 - Qiita
普段業務で、レガシーブラウザ IE8対応のWebサービスを開発＆運用しています。 開発に関わっておよそ１年半ですが、 2014年11月現在 運用中のWebサービスで使っている IE8でも使えるCSSに関わるTIPSを、備忘録がてら記録しておこうと思います。 （IE7以下はサポートを切ってしまったので、先輩方の更なる苦労は存じ上げません。ごめんなさい。） 対応ブラウザ（動作確認環境） この記事の前提として、動作確認環境です。 IETesterで IE8, IE9, IE10 / Windows（IETesterとか信じられない方はすみません） IE11 / Windows Firefox（ほぼ最新） / Windows, Mac Google Chrome（ほぼ最新） / Windows, Mac Safari（ほぼ最新） / Mac IE以外をお使いの方はほぼアップデートかかる＆できるだろ
キャンセルのキャンセル - くらげだらけ
photo by wootam! キャンセルのキャンセルについて社内ブログに書いたので、こっちにも書いておこうと思います。 confirm, dialogのdesignは案外と難しいものです。 どのタイミングで表示すべきか？ どのようなメッセージを書くべきか？ どのようなアクションをユーザーに提示すべきか？ そもそも本当に必要なのか？ いろいろと考えることは多いですが、「そもそも本当に必要なのか？」という問からスタートして、ではなぜ必要なのか？と考えていけば最適な解決方法にたどり着けるように思います。基本的にDialogは邪魔なものだと思うので、表示しないのが一番です。 confirm, dialogのdesignはどうあるべきなのかというのは、基本的にはiOSやAndroidのDesign Guidelineにも書かれているのでまずはそれを読んでおけば多くの場合、最適な解を見つける指針に
Webページ内の任意のテキストをハイライト、タグ付け、共有出来るようにするスクリプト・「Annotator」
AnnotatorはWebページ内の任意のテキストをハイライト、タグ付け、メモと共有可能にするスクリプトです。動作にはjQueryを、オプションとして自動補完にawesomplete.jsを必要としています。テキストをドラッグするとツールバーが表示されるので、ハイライトカラーとタグ、メモが出来るようになっています。Evernoteのようなメモアプリのソーシャル機能の一つとしてあると面白いかもしれませんね。 Annotator
Photon kitを使ってネイティブっぽい綺麗なUIを試した - Qiita
Electronを使って簡単にデスクトップアプリを作成できるようになったのはいいんですが デスクトップアプリのUIが劣化してしまうのはユーザーとしてはきっと辛いはず そこでPhotonKit(以降はPhoton)ならOSXのネイティブっぽいUIを提供してくれます。 OSXユーザーなら親しみやすくWindowsユーザーも「あっiTunesっぽい」と思ってくれるのではないかなと思います。 ダウンロード PhotonのGetting startedの右側にあるDownloadからzipをダウンロードします ダウンロードしたPhotonのフォルダー構成は以下のようになっています。(v0.1.2の時点では) photon/ ├── css/ │ ├── photon.css │ ├── photon.min.css ├── fonts/ │ ├── photon-entypo.eot │ ├── p
jQueryでスライドメニュー（横から出てくるやつ）を実装する - Qiita
スライドメニューを実装できるjQueryプラグインを書いたので、使い方をメモします。 ダウンロード https://github.com/kami30k/jquery.sidemenu.js https://github.com/kami30k/jquery.sidemenu.js/archive/master.zip デモ 使い方 まず、必要なファイルをインクルードします： <link rel="stylesheet" href="jquery.sidemenu.css"> <script src="jquery.js"></script> <script src="jquery.sidemenu.js"></script> 次に、サイドメニューにdata-role="sidemenu"、表示用リンクにdata-role="sidemenu-toggle"を付与します。 あとは、サイドメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
非依存型のシンプルな通知ライブラリ・「notie.js」
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ログイン - はてな
