みつのーと

頑張ってます・・・

GitHubページでプロフィールページ作った

雑記 HTML / CSS

会社外のアレコレで人と合う機会があったりして、最近個人名刺の必要性を感じてきた。 で、それに合わせて簡単なプロフィールサイトでも作ろうと思った。

GitHub Pages

以前からGitHub Pagesに興味があったので、それを使おうと思った。 ちょっと調べると参考になるサイトが色々ヒットする。

僕は以下のサイトを参考にさせて頂いた。

GitHub Pages テンプレートの使い方

上記のサイトにも書いてあるんだけど、GitHub Pagesのテンプレートを使うには、

  1. GitHub上でリポジトリを作成
  2. リポジトリページからSettingページを開く
  3. GitHub Pages > Automatic page generator から Launch automatic page generator を選択
  4. サイト内容の編集画面に移動するので、いろいろ入力し、Continue to layoutsを選択する。
  5. レイアウト・テンプレートを選ぶ画面に移動するので、そこでレイアウトを選択する。

という手順が必要。

当初はGitHub Pagesのテンプレートを利用しようと考えていたんだけど、個人的にどれもしっくり来なかったので、結局別のHTML/CSSテンプレート（CSSフレームワーク）を使うことにした。

Concise CSS

僕はHTML/CSSを書くのは面倒で嫌いなので、なるべくシンプルに扱えそうな構成のモノを探してみた。 探すに当たって以下のサイトが凄く参考になった。

色々見ていった結果、ConciseCSSが気に入ったので、それを利用させて貰うことにした。

ダウンロードリンクからCSSフレームワークを落としてきて、それを使うようにページを構成すればいいだけ……なんだけど、僕は面倒なので、ConciseCSSのテンプレートをそのまま使った。

Concise CSS テンプレートの使い方
  1. Concise CSSの公式ページのDownloadリンクから、CSSフレームワークをダウンロード。
  2. Get Started > Examples から、テンプレートを選ぶ。
  3. テンプレートサイトを開き、index.htmlとその他必要な追加分のcssを落とす。
    • 特にリンクは無いので、ソースを表示してコピペした。
  4. テンプレートの内容を必要に応じて変えていく

作った

最終的に、GitHub Pages + Concise CSS でプロフィールサイト作った。

テンプレートを利用したお陰で基本的な部分は直ぐ出来たんだけど、どういった内容を書くか、っていうのでかなり時間が掛かった。

おわり(*･ω･)ﾉｼ

Chromeの拡張機能を書いてみた

雑記 Chrome拡張

先週何かブログ書こうと思ってたんだけど、胃腸風邪を患って死んでた。 下痢だけまだ治ってない。

先週くらいにドットインストールでChrome拡張機能の動画を見て勉強させて貰った。

Google Chrome拡張機能入門 (全20回) - プログラミングならドットインストール

結構簡単に出来るんだなーって思って、その日の内に１個作ってみた。

PWGen4ChromeExt

これは、パスワードに使える文字列をスパっと生成するやつ。

何かサービスに登録したりするとき、 いつもパスワード生成サイトのページに行ってランダムなパスワードを生成するんだけど、 毎度そのページ行くのが結構ダルいなーと感じてたので書いた。

結構雑に書いたので、近いうちにちゃんと書き直したい。

ちなみに、名前については、Password Generator for Chrome Extensionの略なんだけど、死ぬほど解りにくいし、今考えるとChromeExtって文字列は名前に含める必要無いし、その分文字削ってPasswordGeneratorとかシンプルな名前にしとけば良かったって、激しく後悔してる。

で、もう一個、東京アメッシュを確認するやつも書いた。

SimpleAmeshViewer

実はこれと同じ機能を提供する拡張機能は、既に何個かChromeウェブストアに出てて、 僕も同僚の方に教えて貰ったやつを使ってた。便利。

Amesh Extension

コレ↑を使わせて貰ってたんだけど、表示がちょっと小さいのが気になった。 そこで、自分でも書けそうだなーって思えたので、勉強も兼ねて自分でも書いてみた。

作りは至極単純で、アメッシュの画像をそのまま表示してるだけ。 オプション画面を作ってみたくてビューサイズを調整出来るようにしたけど、自分は使ってない（常に１倍）。

基本機能は１時間くらいでザザッと作れた。 でもその後、割りと時間掛けて綺麗に書き直してみたので、そこまで酷いコードじゃない……と自分では思ってる。

一点、アメッシュの画像を勝手に使っていいのか気になったけど、よく分からなかった。 どうなんだろう？と思ったけど、個人でちょっと使うだけだからいいかな？って感じで作ってしまった。 ダメそうなら削除しないとなぁ。

最初はChromeの拡張機能作るときの簡単なまとめを書こうと思ったんだけど、うまく纏まる気がしない上に、ドットインストール見たほうが１０００倍タメになる感じだったので、ただの日記になった。

Chrome拡張は手軽に作れて、それなりに実用的な感じに仕上がるので、初心者の教材とかにも良さそう。

おわり(*･ω･)ﾉｼ