スタイルガイドジェネレーターの hologram を試してみた

スタイルガイドを作成するジェネレーターもいろいろとあるのですが、 CodeGrid@Takazudo 先生が Hologram について紹介をしていたので、良さそうな感じもあったので、ひとまず試してみることにしました。

Hologram — Style Documentation Build System

hologramでカスタムスタイルガイド – 機能概要 | CodeGrid

続きを読む

SlideShare の埋め込み表示をレスポンシブ対応させ

先日 WordCmap に参加して 『WordCamp Tokyo 2014 北海道・札幌からの参加レポート』 というのを書きましたが、気づけばスマホでサイズのはみ出しが起こっていてページ右側に余白ができていました。

SlideShare の埋め込みをレスポンシブの対応を指定なかったためですが、以前、Youtube の埋め込みをレスポンシブ対応したように(参照:Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法) SlideShare もレスポンシブ対応で入れられるようにしてみようと思います。

Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法

続きを読む

Chromeの「新しいタブ」を Apps のページにする拡張機能「Show Apps in new tab」を導入! ~ セミナーのブラウザデモで恥ずかしい思いをしないために ~

Google Chrome で新規タブを開くと、デフォルトだと Google の検索のページが表示されるようになっているのですが、その検索の下に、よく表示するページの一覧がサムネイル付きで表示されてしまいます。

SaCSS などの勉強会やセミナーで Google Chrome を利用してデモページをスクリーンに写すということをよくやるのですが、その際にサムネイルで制作している見せては行けないページなどが時折出てしまうことがありました。

これを回避するため、以前はデフォルトの状態を Apps 一覧が表示されるようにしていたのですが、 Chrome のアップデートとともに、 Apps の一覧を新規ページにしたくてもできないように変わってしまいました。

そこで、今回、あらためて何か良い方法はないかと探したところ、Chromeの拡張機能「Show Apps in new tab」というのを見つけたので、早速導入してみました。

続きを読む

Web Starter Kit で JavaScript のライブラリを利用しようとしたらエラーで gulp のサーバーが止まってしまう場合の対応

Google が提供している、ウェブサイトを構築するためのツール、 Web Starter Kit

Web Starter Kit

レスポンシ対応のマルチデバイスボイラープレートなので、サイト構築のための準備部分の設定とか楽だろうなと思い、テストがてら触ってみた。

gulp の設定ファイルが入っているので、利用するとローカルサーバーでライブリロードもついてて、便利!なのはいいのですが、 JavaScript の コードを書いていると何やらエラーがでて、gulp のストリームも止まってしまうため、ローカルサーバー落ちてしまう状態に。

今回はそのエラーが出てもサーバーが止まらないようにする対応などをメモ。

続きを読む