はてなブックマーク

久々に大きめのサイト構築をしているんだけど、なんかものすごい初歩的な部分でつまづいたので実験。 縦いっぱいにメニューを配置して、position: fixedにし、Y方向にはみ出た部分はスクロールできるようにする、っていう下記のようなレイアウトのページを作ります。 で、上記のメニュー部分をHTML化したのがこれ。 下層コンテンツを入れ子にすることで、JSとか組まなくてもCSSだけで簡単に実装できる複数階層のメニューです。 ChromeとFirefoxでは想定通り、オンマウスでメニューの右側に「はみだすエリア」が表示されてます。 ところがSafariで見てみたところ、はみだすエリアが表示されてない！ 解決方法 半日ぐらい悩んでたんだけど、解決方法は驚くほど簡単だった。 overflow-x: visible; overflow-y: scroll;としていたものを、 overflow: au

超！久々にGoogle Maps APIを使う案件があったが、V3になってから全く触っていなかったため、公式のドキュメントと睨めっこしながらいじってみた。 APIキーを取得 昔いじってたときは無くても大丈夫だったけど、今は必須？な様子なので、公式のスタートガイドの通りに進めたんだけれど... ↓スタートガイドの文面 API コンソール https://code.google.com/apis/console にアクセスし、Google アカウントでログインします。 左側のメニューから [Services] をクリックします。 Google Maps API v3 サービスをオンにします。 左側のメニューから [API Access] をクリックします。API キーは、[API Access] ページの [Simple API Access] セクションにあります。Maps API アプリケ

似たようなファイルをたくさん作る機会があったんだけど、面倒だし後から更新するのも大変。 そこで、GulpとEJSを使って、JSONファイルの設定を読み込んで、その設定の分だけHTMLファイルを生成する方法はないかと探してみたところ、やっぱりありました。 aircolor.hatenablog.com ただ個人的に、いっぱいタスク作るのってどうなんだろう...と思ったので、1個のタスクにまとめてみることに。 用意するもの gulpは入れてある前提。インストールは割愛。 fs gulp-ejs gulp-rename 下記は新しく作ります。 pages.json（各ページの設定用ファイル） template.ejs（テンプレートEJSファイル） 各ファイルの設定 pages.json それぞれのページの設定を記述。 { "pages": [ { "id": "page1", "title":

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2015.10.21 config.rbが使えるように改良した記事をアップしました。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ gulpの解説サイトを見ていると、そのどれもフォルダ構造が、フォルダ名は違えど root（ここにgulpをインストール） ├ dist（ビルドするとここに出力される。サーバーにアップしたり納品用） └ src（開発用） ├ assets（このフォルダ内にCSSや画像を全部突っ込む） │　├ _sass │　├ css │　├ images │　└ js ├ index.html ・ ・ ・みたいになっていますが、案件によっては root ├ dist └ src ├ assets（このフォルダ以下には共通のCSSやら画像やらのみ格納） │　├ _sass │　├ css │　├ images │　└ js ├ _sass

最近会社で暇。 先月は＼休日に自宅でお仕事上等！／っていう感じだったが、今月は後半から非常に暇である。Rubyの本とか2日で半分読むぐらい暇。 まあいつまでも社内ニートしているわけにもいかないので、この機会に自分の知識と環境のアップグレードを図ってみる。 nodebrewを入れる これまで入れていたnode.jsはhomebrew経由だったんだけど、これだとnode.js自体のバージョン管理はできない模様。そこで、最近流行っている（？）node.jsを管理するツールの「nodebrew」を入れてみることに。 まずはhomebrew版のnode.jsはアンインストール。 $ brew uninstall node 続いてnodebrewをインストール。 $ brew install nodebrew 適当にコマンド打ってバージョンやらヘルプやらが表示されたらインストール完了。 $ nodeb

先日、会社のPCが非常に重たかったため、新しいPCにお引っ越しした。 あーだこーだやってたら結局半日ぐらいかかってしまった。 今後のために、Macを新規にインストールしたときに、取り急ぎコーディング作業が出来る程度までにするときのメモ。 内容はすべてMavericks環境下。 1. App Storeから購入済みアプリをインストール とりあえず必要になるのはForkLiftとXcode。 ForkLift - File Manager and FTP/SFTP/WebDAV/Amazon S3 client BinaryNights仕事効率化¥2,400 Xcode Apple開発ツール無料 XcodeのCommand Line Developer Toolsがほしいので、インストールしたら起動して、 Command Line Developer Toolsのダウンロードをするんだけど、昔