ドットインストール代表のライフハックブログ
![IDEA * IDEA](https://cdn-ak-scissors.b.st-hatena.com/image/square/3f6b8e413f7381be659cea6e3cfc30e048a5d884/height=288;version=1;width=512/http%3A%2F%2Fwww.ideaxidea.com%2Fwp-content%2Fuploads%2F2013%2F06%2Fmagic-css3-animations.png)
仕事で必要になったので作ってみました。実装方法は意外と簡単だったのでまとめてみます。これを作るにあたって下記サイトの記事が参考になったので張らせていただきます。[ CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ 今回用いたのは参考にしたサイトで紹介されていた第3 の方法、box-shadow を使用した方法です。参考サイトでは二重ボーダーを作っていますが、要はこれを角丸指定で円にしつつ真ん中のボーダーを背景と同色で作れば実現できるってわけですね。 margin: auto; background-color: #00b1f4; border: solid 6px #fff; width: 70px; height: 70px; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius:
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記:最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。 解除して散っていくのも! 実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。 デモページ これをベースにいろいろなアイデアが膨らんできますね。 参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。 <!-- start header --> <header id="head"> <div class="container"> <
「どれぐらいフォロー解除されているか」「自分のツイートのリンクは何回クリックされたのか」「自分のフォロワーは何に興味を持っている人が多いのか」「自分のサイトに埋め込んだツイートボタンは何回クリックされたのか」「自分のサイトのページでたくさんリツイートされたのはどれか」といったアクセス解析ができる「アナリティクス」機能が日本のTwitterの一部アカウントで利用可能になっています。これは2011年9月に「Twitter Web Analytics」として発表されていたもので、2011年7月にTwitterが買収した「BackType」というTwitterのアクセス解析サービスを改良したものになっており、GIGAZINEの公式Twitterアカウントでも利用可能になっていたので早速使ってみました。 ログインして右上にある設定アイコンから「アナリティクス」と書いてあるメニューが見えれば利用可能な
このところ海外(おもに米国)のスタートアップで、「full stack engineer」の求人広告を以前より多く見かけるようになりました。フルスタックエンジニア、つまりインフラからミドルウェア、モバイル、デザインまで、あるいは設計からプログラミング、デプロイまで、何でもこなせるエンジニアを募集している、ということのようです。 例えば、このPublickeyでも導入しているコメントシステムの開発元であるDisqusは現在、「Full-stack Web Engineer」を募集しています。 「What We're Looking For」の項目では、5年以上のエンジニア経験とチームリーダーの経験などを求めた上で、技術的には次のような要件を並べています。 Very experienced with web application deployment and software design
先日勉強会で@kotarok先生が見せてくれたjQuery.zip2addrを元に車輪の再々発明(kotarokさんのが再発明と言っていたので)してみました。 jQuery.zip2addrはGoogle日本語入力APIを利用して郵便番号から住所を検索するという画期的アイデアのスクリプトなんですが、これのjQueryとかHTMLに依存してない版です。 DEMO hokaccha’s js-zip2address at master - GitHub zip2address('150-0001', function(address) { address.all; //=> 東京都渋谷区神宮前 address.pref; //=> 東京都 address.city; //=> 渋谷区神宮前 }); ハイフンはあってもなくてもいいです。郵便番号が間違ってたりするとaddressにはundefin
modern.IEというIEの検証のために色々できるサイトができて、ここでIEのVMのイメージを落とすことができる。Virtual Box、VMWare Fusion、Parallelsとメジャーなものは全部対応してる。すごい。 とりあえずMacのVirtual BoxにIE10 Win8をいれてみた。まず以下からからMacとVirtual Boxを選んで「IE10 - Win8」の.sfxとかの.rarのファイルを全部ダウンロードする。 http://www.modern.ie/ja/virtualization-tools 「.sfx」というのがよくわからんかったけどなんか圧縮形式らしくて実行権限つけて実行すれば解凍されるらしい。 $ chmod +x IE10.Win8.For.MacVirtualBox.part1.sfx $ ./IE10.Win8.For.MacVirtualB
Chrome CanaryDevToolsも進化してるのでStableではなくCanaryを Local ProxyPCのみならDevToolsだけでもいいけど、スマホのWebView内解析とか考えるとLocal Proxyは必須 Windowsなら Fiddler (無料) Macなら Charles (有料) Macでお金払うのが嫌な場合 CocProxy for nginx (無料。CUI。Ruby版使うくらいならこちらを) JS製が良くてソース読みたいなら Klepto (無料。GUI。不安定) ソースの文字コード変更ChromeでJS、CSS開くと日本語が化けるので、初期文字コードをUTF-8に変更 (フォント設定( chrome://settings/fonts )の一番下を「Unicode (UTF-8)」に) “This Frame” Context Menuiframeの
こんにちは。食欲の秋、おっしーです。 きのこの山やきいも味は尋常ではない美味しさなので、是非一度ご賞味下さいませ。 上品な甘さ、香ばしさに秋を感じます。マロン味っぽいです。私には最近、悩んでいた事があります。 WordPressのindex.phpとhome.phpの違いって何なの? ということです。気になって夜も眠れない。 調べてみました。 私の脳内では index.php = home.php という検討違いな認識をしておりました。 何となく名前が似てる気がするのは私だけではない筈。 しかし違う。 index.php (全てのテンプレートが読み込まれた最後に出力される。階層的に一番最後) home.php (存在しないが作成するとindex.phpより階層が先なので優先的に表示されるようになる) ほうほう。で、結局処理してるのは何処なの?となりますね。 wp-includes/temp
WordPressのプロになるなら最低限知っておきたい10+1個の知識、挙げてみますね! 2013.06.12 | WordPress | 初心者向け WordPressのプロとしてやっていきたいなら知ってないと困っちゃう知識を、10個挙げてみました! これを知っていればプロになれるというわけでもないと思いますが、知らないとマズイ、自分が困る、あるいはお客さんが困る、というものだと思いますので、チェックしてみましょう! 色んな切り口あると思うんですが、今回は、html/css/jsだけを使ってサイトが作れるようになったデザイナーさんがぶつかることになる壁というか課題、という視点でやっていければと思いまーす! 今回はチェック&勉強のきっかけのためというコンセプトでやらせていただきますので、各知識については自分で勉強するなり、教えてもらえるところに行く(Webデザイナー・HTMLコーダーのスキ
業務が軌道に乗っていない、あるいは失速しているのであれば、システムや習慣に巣くっている可能性のある非効率性に目を向ける時がやって来たと言えるだろう。 業務が最高の効率で遂行されていなければ、あなたは責任を全うしていないと言えるはずだ。現代のように、ネットワークへの常時接続により何にでもすぐアクセスできるのが当たり前であり、ソーシャルネットワークが主流となっている社会では、効率の悪いシステムやソフトウェアはすぐに会社の足を引っ張る存在となる。最初のうちは気付かないかもしれないが、どこかの時点で問題が首をもたげてくるのだ。 こういった事態を避けるために、会社は業務効率を最大限に高めておく必要がある。しかし、システムやソフトウェア、管理上のプラクティスが業務運営に深く織り込まれてしまっている場合、どのようにしてそれらを改善し、より効率の高い環境を築き上げられるのだろうか?以下ではそういったことを
つい先日、クライアントから、「株式会社WEB企画」と検索をすると、サジェスト機能で「株式会社WEB企画 詐欺」と出るが、大丈夫なのか?という質問をいただきました。 もちろん全くの事実無根です。なぜサジェストで出てしまっているのかについては、 「株式会社WEB企画 詐欺」と検索予測キーワードが出現する件について 上記記事で以前にご説明させていただいた通りです。 しかし、やはりマイナスイメージをお客様に与えてしまう可能性は否定しきれませんでしたので、どうにかして消すことはできないかと考えていた矢先、 Google検索の「サジェスト機能」を巡る訴訟でGoogle敗訴 こんなニュースが飛び込んできました。 これはもしかしたら、弊社もGoogleに申請することで消してもらえるのはないかと思い、ダメ元で挑戦してみたところ・・・ ●●様 Googleへご連絡いただきありがとうございました。 お客様よりい
政府は安倍政権の経済政策「アベノミクス」の「3本目の矢」として成長戦略の素案を発表しました。この成長戦略では【プログラミング教育】についても盛り込まれています。本記事では、プログラミング教育の内容とその背景についてまとめました。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査 2013年6月5日に、政府は安倍政権の経済政策「アベノミクス」の「3本目の矢」として成長戦略の素案を発表しました。 この成長戦略では、賃金上昇や減税措置、規制緩和など
対角線 Divine Proportions Toolkitのインストールと使い方 Toolkitの対応バージョンはPhotoshop CS5, 6です。 インストール 下記ページのDownloadから「divine_proportions_toolkit_1_0_4.zip」をダウンロードし、解凍します。 Divine Proportions Toolkit 解凍したフォルダ内にCS5, CS6のフォルダがあるので、利用する環境に合わせて選択してください。 フォルダ内の「Divine Proportions Toolkit.zxp」をダブルクリックすると、Adobe Extension Managerが開きます。 指示にしたがって、インストールします。 インストールが完了したら、Photoshopを再起動します。 使い方 使い方は簡単です。 メニューバーの[ウインドウ]-[エクステンショ
今回はGoogle Chromeのショートカットキーの紹介です。ここでは、アドレスバーに文字列を入力するだけで「Amazon.co.jp」や「Flickr.com」のサイト内検索ができるようになる方法など、アドレスバーのショートカットキーを設定する方法も扱います。どれも便利なワザですので、ぜひマスターしてください。■Windows編 1. 「Ctrl+H」...履歴ページを開く。 2. 「Ctrl+D」...現在のウェブページをブックマークとして保存。 3. 「Ctrl+Shift+D」...開いているすべてのページを新しい1つのフォルダにブックマークとして保存する。 4. 「Ctrl+J」...ダウンロードページを開く。 5. 「Shift+Esc」...タスクマネージャを開く。 6. 「Ctrl+Shift+Del」...「閲覧履歴の消去」(履歴やキャッシュを消去できるページ)を開く。
Reuse, recycle, but don’t reinvent the wheel unless necessary. by Brian Christiansen at UI Engineering. Via. This collection captures findings of consistent, unique or interesting interfaces and design flows from across the web. Please note that the content of these sets is not representative of all of the patterns I've captured. I tend to use tags more religiously and recommend that you look ther
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
競合に負けないWebサービスをつくるため、UI(User Interface)、UX(UserExperience、ユーザー体験)にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです! 目次 基礎知識 1.UXのためのUIデザイン 2.UX is not UI 3.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:前編 応用編(Webサイト) 4.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:後編 5.コンテンツで改善する UI デザインの極意 応用編(スマホアプリ) 6.UI&UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編(タブレットアプリ) 7.ニコニコ超デザイン-
iOS7のフラットデザインは賛否両論だが、動画でみると全然印象が違う。 実に素晴らしい。Retinaと同じで一度触ったら戻れなくなりそうだ。 Apple iOS 7 - WWDC Video Demo (with John Ive ... WWDC Keynoteでこのビデオが流れた後のティム・クック氏のドヤ顔(81分14秒あたり)もうなずける。 こちらの記事ではiOS7のアイコンをリデザインしなおした例が掲載されている。オリジナルに比べてボックスの内側に配置されたアイコンが小さく、コントラストがはっきりしている。 ▼iOS 7のアイコンがさっそくリデザインされて超クールに! こっちの方がいい | NANOKAMO BLOG 静的なキャプチャだけみるとリデザインされたものの方がマッチしているように見えるが、恐らく実機でみた場合はオリジナルのほうがしっくりくると思う。 フラットデザインはデザ
1991年、投資家のWarren Buffett氏はマイクロソフトのBill Gates氏に会いました。最初はどちらも乗り気ではなかったのですが、結果その出会いはすばらしいものになりました。 会話の間、Buffett氏はポケットに忍ばせている小さな黒い手帳を取り出しました。ページをめくると、ほとんどが白紙。スケジュールは空っぽだったそうです。 「自分の時間は自分で管理しなければなりません。ただし、きちんと誘いを断れない限りそれはできません。誰か他人に自分の人生を管理されるなんて間違っています」と彼は言っています。 クリエイティブでいるには「いいえ」と言える必要がある 断る能力を磨くことは大事です。ブログメディア「Medium」のKevin Ashton氏が書いた最近のエッセイに、自分の時間を出し惜しみすることが、クリエイティブで生産的な人生に導くひとつの道とありました。 Ashton氏はマ
ビジネスの成功者が、成功のポイントとしてよく語るのが「人脈」です。そのため、異業種交流会やパーティーなどには、人脈を広げようとするビジネスマンが多く集まっている様子が見られます。 しかし、最近ではリアルの世界だけでなく、ソーシャルメディア上でも人づきあいをするケースが増えており、何だか人づきあい過多になっている…と感じている人も多いのではないでしょうか? 『3年で7億稼いだ僕がメールを返信しない理由』(小玉歩/著・幻冬舎/刊)は、こうした雑多な人づきあいに対して「切る」ことを推奨している一冊です。 サラリーマンの副業で1億円を稼ぎ出し、現在までに3年で7億円稼いだという小玉さんは、「不要な人づきあいを切ることによって自分の時間が生まれるし、何より本当の仲間が見つかる」と言います。 そこで「自由」と「お金」と「本当に大事な仲間」を手にした著者が本書の中で説いている「破天荒な人づきあいの極意」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く