だからみんな、Vimになれば良いのに… - はてな村定点観測所
2016 - 03 - 20 だからみんな、Vimになれば良いのに… シェアする Twitter Google+ Pocket 春分の日 は.vimrcを編集する日 皆さんは テキストエディタ は何を使っていますか。メモ帳？ 秀丸 ？ GNU Emacs ？私は Vim です。 鬱が開けて 春分の日 で季節の変わり目なので、.vimrcを装い新たに編集することにしました。 Vim の プラグイン 管理にはneobundleを使っていたのですが、neobundleが オワコン になることがアナウンスされていたので Vim -Plugに乗り換えました（dein. vim にはしませんでした）。 ついでに Gmail とか Twitter とかも Vim で読めた方がいんじゃね？と思って.vimrcの全面的な書き換えに着手。.vimrcが680行くらいになりました。 はてなブログ や WordP
さいつよのターミナル環境を構築しよう - Qiita
昔に書いたものなので余り参考になさらずに 僕はターミナルに引きこもっています。たまに外出しても最寄りのブラウザ程度です。そんな僕は Mac を使っています。綺麗な UNIX だからです。ターミナルアプリとしてターミナル.app を使っています。iTerm2 含めいろいろ試しましたがコレがさいつよでした。そして、僕は 2 年半かけてさいつよ環境を築き上げました。 tl;dr 最強のターミナル開発環境の構築する 最強の開発環境を目指して タイトルで豪語しすぎた感はありますが、本気で構築中です。僕がターミナル環境の整備に目覚めたのは学生の時でした。特に何かのプロジェクトに携わるといったこともなく、たまに講義の課題を解いたり趣味のアプリを作成したりといった程度での開発だったので、環境構築や整備に割く時間がありました。 まずは現状 普段のターミナル環境は次のとおりです。 ターミナル.app（全画面）
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
サイバーエージェントとDeNA、「広告配信プラットフォーム」共同開発--2月中旬提供
サイバーエージェントとディー・エヌ・エー（DeNA）は2月4日、合弁会社のAMoAdと、サイバーエージェントのアドテクスタジオで共同開発した広告配信プラットフォーム「DeNA Ad Platform」を2月中旬から提供する予定であることを発表した。 AMoAdが培ってきた、クリエイティブ最適化配信や広告効果に応じた自動入札などのアドテクノロジーと、DeNAが運営するバーティカルメディア（特定分野に特化したメディア）を活用した広告配信プラットフォーム。 サービス開始時には、DeNAグループが運営するマンガアプリ「マンガボックス」と、住まいやインテリアに特化したキュレーションプラットフォーム「iemo（イエモ）」でネイティブ広告を配信する予定。 なおネイティブ広告には、米国オンライン広告業界団体IABが2013年12月に発表した「ネイティブアド・プレイブック」（PDF）に沿って、閲覧者に対して
HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S
Googleドライブで第三者にデータ流出のセキュリティホールが発覚、対処法も
必要なデータをインターネット上に保存し、いつでもネット経由で参照することが可能なオンラインストレージサービスの普及が進んで活用するユーザーも増加しているわけですが、先日保存容量無制限・最大ファイル容量5TBの「Google Drive for Work」のサービスを発表していたGoogleドライブでは、予期せぬ第三者にプライベートなデータが流出するセキュリティホールが発見され、改修が行われていたことが明らかになりました。 Google Online Security Blog: Google Drive update to protect to shared links http://googleonlinesecurity.blogspot.co.uk/2014/06/google-drive-update-to-protect-to.html Google Drive Found Le
ISIS戦闘員のおはなし
لا إله إلا الله @lsisbaha 我々に慈悲は必要ない, 我々はあなたを許さない Allahの裁きを受けるであろう, あなたの政府は馬鹿@kelog21 @muhammadTIMEZ 2015-01-25 03:32:37
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
Webサイトの作り方のまとめ！ブラウザチェック。
サンプルサイト制作を通して「Webサイト制作」についてまとめてます。 前回の記事で、トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。 以下は目次です。クリックすると各項目へ移動します。 対象ブラウザ。 ブラウザの種類 ブラウザのバージョン ブラウザの進化 チェックすべきブラウザ ブラウザチェック。 ブラウザチェックツール BrowserStackを使ったブラウザチェック VMware＋IETesterでブラウザチェック Internet Explorerでバージョン別チェック チェック結果 表示の崩れを整える。 IE8での表示を整える IE7での表示を整える IE6での表示を整える モダンブラウザと同じくらいまで整える。 transitionの動きをjsで実装する IE8以下でも:last-childとか使
今こそ！SEOに強いサテライトサイトの作り方
今回の記事はこれからのSEOに欠かせない「サテライトサイト」の作り方です。 「お金」によるSEOが全く効果が無くなっていく中、 「コンテンツ」至上主義が声高に叫ばれ始めています。（僕も言ったけど） でも、勘違いしてはいけないのは 「リンクの効果が無くなる」訳では無い。 ていうか、今までもこれからも「被リンク」の重要性というのは変わらないわけで 「コンテンツ」とは別に考える必要があるわけです。 「検索エンジンが順位を決定する要因ランキング2013年版」 を見ても、如何に被リンクが重要かがわかります。 ただ、今までのように「お金」でなんとかなった被リンクの効果が無くなってたせいで今後はより「正当な被リンク」を持ったサイトがより優位性を持つ事は目に見えています。 そりゃ、権威のあるサイトからリンクが貰えれば何も言う事はありませんが、 そんな甘い期待をしている暇があるならすぐにでもサテライトサイト
【SEO】Google対策 パート51その5⇒「NAVERまとめはどうして手動ペナを受けない？」「マットカッツは休み延長」 : SEO（対策）まとめ
SEO（対策）まとめ SEO（SEO対策）中心にWEB、IT関連の話題をまとめます。WEB集客、アクセスアップ、ブログ作成、アフィリエイトの情報など。 447 ：Name_Not_Found：2014/11/02(日) 02:04:31.44 ID:???.net 結局ペンギンも俺のサイトにはあまり影響なかった 無事で何よりだ 448 ：Name_Not_Found：2014/11/02(日) 04:46:59.59 ID:???.net 人手でやるとしたら全部のサイトなんて無理だから 検索数の多いキーワードとかから優先してやってくんじゃないの マイナーなキーワードは見逃される可能性が高いとか 449 ：Name_Not_Found：2014/11/02(日) 05:23:44.96 ID:???.net >>448 いや違うな もうすでに、かなりのキーワードでNeverまとめの侵食が進ん
gitリポジトリを軽くしよう！｜TechRacho by BPS株式会社
gitリポジトリの使い方を間違えると、非常に重くなってしまうことがあります。 巨大なファイルをコミットしてしまった 関連プロジェクトを1個のリポジトリにまとめすぎた まずは犯人を捜す 以下のコマンドで、コミットログをサイズと一緒に見ることができます。 git log --stat 眺めながら、怪しいコミットがいないか探してみましょう。 また、.git/objectsの中から重たいファイルを探して、バイナリエディタで眺めることでも、怪しいファイルの見当を付けられます。 巨大なファイルをコミットしてしまった gitはソースコード管理システムなので、巨大なファイルを管理するのには向きません。 ちょっとしたwordのドキュメントファイルや画像などは問題ありませんが、100MB以上もあるPSDファイルや動画ファイルなどを入れると、git statusなどの基本的な操作も含めて急激に遅くなってしまいま
iPhone、Android position:fixed 対応状況と対応方法 – LIQUID BLOG
iPhone、Androidなどのスマートフォンは、これまで position:fixed に対応していませんでした。 固定メニューの実装などに困っていたのですが、iOS 5で対応していました！ iOS 5 iPhoneやiPad、iPod TouchのMobile Safariは、iOS 5から position:fixed に対応しました！ 他にも、overflow:scroll などに対応しています。 via New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 Android 2.3 viewport で、content=”user-scalable=no” にすると対応できます。 Android 4.1
レスポンシブにも対応したドロップダウン FlexNav
「FlexNav」は、クロスブラウザー（IEは7以降）対応のドロップダウンメニューを簡単に実装できるjQueryプラグインです。レスポンシブに対応しているほか、ネスト（入れ子構造）のメニューも作れるので、非常に使い勝手のいいプラグインですね。 Android 2.2以降に対応しているので、古いスマートフォンへの対応を求められる案件で特に重宝します。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、FlexNav を配布ページからダウンロードしましょう。FlexNav は github で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と「jquery.flexnav.min.js」を、利用するWebページの body の閉じタグ直前に読み込みます。 //(中略) <script src="
ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
外部サイトで使ってるJSの解析方法
kyo_ago @kyo_ago サーバAPIのレスポンスはlocal proxyで確認する。ブラウザの開発ツールだとFlashの通信は見えないし、画像の読み込みに偽装した通信もパッと見わからない。local proxyで「APIっぽいURL」を見てれば大抵通信内容は分かる #js_read 2011-09-07 17:19:10 kyo_ago @kyo_ago 難しそうなことをやってる部分は大抵そこまで気にしなくていい。それよりライブラリのAPIを呼んでる部分、ブラウザのAPIを呼んでる部分、サーバのAPIを呼んでる部分を中心に確認する #js_read 2011-09-07 17:17:55
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/
jQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと. net
