GitHub PagesとJekyllでホームページを作る

その他

GitHub Pagesで簡単なホームページなら作れたような気がすると思い立ったので、その時に行ったことのメモです。

基本的にはこのページの手順に沿ってやっていけばできると思います。

neko-mac.blogspot.com

いくつか異なる点や追加で必要だったことなど、自分のメモ的なものを書いていきます。

この作業をする前提としてGitとVisual Studio Codeは使える状態にしておきます。これのやり方を書いているページはたくさんあると思うので省略します。

「Jekyll」はRubyで動く静的サイトジェネレーターです。読みたかは「ジキル」です。GitHub Pagesで使えるやつです。

Jekyll を使用して GitHub Pages サイトを作成する - GitHub Docs

Rubyのインストール

今回、自分の環境はMacです。参考のサイトだとarchlinuxを使っていて、バージョン3系統のRubyが入っている前提での方法となっています。macOSの場合必要ないと思いましたが、特に何も考えず書いてある通りにRuby Version Manager (RVM)を使っていきます。

RVMでRuby 2.7をインストールして、既定を2.7に設定します。

JekyllとBundlerのインストール

Bundlerはgemの依存関係を解決してくれるツールみたいです。書いてある通りにインストールします。この後の手順で、「myblog」というディレクトリにJekyllのプロジェクトを作成する手順が書かれていますが、今回は使うテンプレートが決まっているので、これは実行しません。

Basically Basic Jekyll Theme

GitHub Pagesで直接サポートしているJekyllのテーマもあります。

Supported themes | GitHub Pages

今回は「Basically Basic」という「Minima」の派生？を使います。

GitHub - mmistakes/jekyll-theme-basically-basic: Your new Jekyll default theme.

テンプレートはたくさんあって、探せるサイトも複数あり、有料のものもあります。私は「Jekyll Theme 2023 free」で検索しました。以下のページにいくつかギャラリーが紹介されています。

テーマ | Jekyll • シンプルで、ブログのような、静的サイト

ローカルでの実行環境の構築

本来別に用意する必要がないと思いますが、今回Jekyllがどんなものかほとんどわかっていなかったので、とりあえず触ってみる環境としてローカル用のフォルダを用意します。そのフォルダにテーマをcloneします。

macOSでどこにフォルダを作るのかとちょっと悩みましたが、ホームの直下に作りました。

ローカルWebサーバーの実行

$ bundle exec jekyll server

で実行します。これでローカルでは「http://127.0.0.1:4000/」でアクセスできるはずですが

Could not find gem 'jekyll-paginate (~> 1.1)'

というエラーが出るので

gem install jekyll-paginate

を実行して解決します。たしか「jekyll-sitemap」でも同じようなエラーが出たと思うのでそれも同様に解決します。

gem install jekyll-sitemap

これで

$ bundle exec jekyll server

を実行するとローカルでは「http://127.0.0.1:4000/」でアクセスできます。一応実機のスマフォでも確認したいので、ファイアウォールのポートを除外設定します。

MacOSのポート開放 | ThunderMiracle's Blog

これでもアクセスできませんでした。localhostのアドレス以外にバインドされていないことが原因のようなので、以下のように実行して利用可能なアドレスすべてにバインドされるようにします。

bundle exec jekyll server --host=0.0.0.0

これでスマホからもアクセスできるようになります。

macOSでipconfig

macOSで普通にipconfigと打ってもIPアドレスは表示されませんでした。ipconfigを使う方法は面倒なので代わりにネットワーク状況を確認するifconfigを使います。

GitHub Pages

GitHubにリポジトリを作成します。リポジトリの名前は、手順の参考サイトに書かれているように「username.github.io」にします。githubのユーザー名が「hogehoge」ならば、「hogehoge.github.io」という名前のリポジトリを作成します。

このリポジトリをクローンしてきて、そこにローカルで作成していたファイルをコピーします。

必要なファイルはここに書かれている以下のやつになります。  

  • _layouts
  • _includes
  • assets
  • _sass
  • _data/theme.yml
  • _config.yml

注意点として「Gemfile」と「Gemfile.lock」は必ず含めないようにします。これを含めてしまうと、GitHub Pagesのビルドでエラーとなります。

あとは、faviconもあったほうがいいので、以下のサイトなどで作成して置いておきましょう。

X-Icon Editor

今回GitHubはSSHにしたので、以下のページなどを参考に設定して、commitしてpushします。

GitHubにSSH接続する方法！(キーの作成からpushまで解説) | コードライク

GitHub Pagesの禁止される用途

GitHub Pages について - GitHub Docs

GitHub Pages は、オンライン ビジネス、eコマース サイト、主に商取引の円滑化またはサービスとしての商用ソフトウェア (SaaS) の提供のどちらかを目的とする、その他の Web サイトを運営するための無料の Web ホスティング サービスとしての使用を意図したものではなく、またそのような使用を許可するものでもありません。

上記の文章だと日本語として少し不自然なので原文を見てみたいと思います。

GitHub Pages is not intended for or allowed to be used as a free web-hosting service to run your online business, e-commerce site, or any other website that is primarily directed at either facilitating commercial transactions or providing commercial software as a service (SaaS).

原文を見ると、「その他の Web サイト」にかかっているのは「主に商取引の円滑化またはサービスとしての商用ソフトウェア (SaaS) の提供のどちらかを目的とする」だということが分かります。なので、「主に商取引の円滑化を目的とするその他のWebサイト」というのが一番曖昧で該当しそうなサイトが多いと思います。「商取引」という言葉をどう解釈するかでかなり変わりそうです。日本語の「商取引」だと「商業上の売買の行為」とあり、売買ではない商用サイトであれば該当しないように読み取れます。商業の取引全般を指す言葉は「商行為」のようです。一方、「transactions」という単語で考えると「a payment, or the process of making one」のほかに、「a business deal」という定義もあります。これが商業の行為全般を意味すると仮定すると、商用サイト全般が該当しそうです。しかし、そうであればこれと並列して「サービスとしての商用ソフトウェア (SaaS) の提供」を書く必要性がないように思います。また、現在GitHub Pagesで存在しているサイトの実態とかなり乖離があることになると思います。いずれにしても、その部分が心配な場合にはサポートに問い合わせたほうがよさそうです。

Company information and contacts via GitHub pages · community · Discussion #59893 · GitHub

Jekyllの構造について

これはドキュメントを見て必要な箇所を変更、追記していくしかないと思いますが、以下の2つのファイルはとにかく重要だと思います。

  • _config.yml
  • _data/theme.yml

そもそものテンプレートに手を入れたいという時は、_includesフォルダ下のファイルを編集します。テンプレートエンジンの構文部分を変えた時はWebサーバーを再実行するのを忘れないようにしましょう。反映されません。

Tohoku ComCamp 2016 powered by MVPs

イベント

　今年もComCampが仙台でも2月20日（土）に開催されます。場所は仙台を知っている方に説明しますと、三越（141ビルの方）の5階です。地下鉄の駅が直結してますので、隣県から来られる方も便利です。


Tohoku ComCamp 2016 powered by MVPs - connpass


　今年のComCampはとにかく内容が凝縮されています。午後からの開始だというのに、セッション数はなんと7つ。多くのセッションが30分という短い時間で行われますが、おそらくより内容の詰まった濃いセッションとなるのではないかと思います。


　スピーカーは、マイクロソフトのIT Pro 向けエバンジェリストをやられている安納さんが来てくださるほか、青森や岩手からもMicrosoft MVPが集結します。この講師陣、このセッション数はかなりスペシャルなものになっていると思いますので、ちょっと無理してでもぜひご参加いただきたいと思っています。途中入場や途中退出も可能です。





セッション スピーカー 時間
開場 - 12:30-13:00
あいさつ 山本 誠樹 13:00-13:10
Active Directory でユーザー中心の IT をデザインする 安納 順一 13:10〜14:00
Windows Server 2016 Essentials TPの全容とPowerShellの使いどころ(仮) 那須 悟 14:10〜14:40
ハイパーブイ・ナノ・コンテナー？ 山内 和朗 14:50-15:20
Windows 10とタブレットとPCを触る必要のなかった世代 新谷 剛史 15:30-16:00
Minecraftで仕事の方法を変えてみる 砂金 よしひろ 16:10-16:40
ハイブリッドクラウド構築ことはじめ 木村 忠宏 16:50-17:20
Introduction to Visual Studio Code 五十嵐 祐貴 17:30〜18:00
ハッピーアワー（立食での軽飲食) & ライトニングトーク(LT)大会 - 18:00〜19:00

これからプレゼンを仕事にする人、もしくはし仕事にし始めたばかりの人へ向けたエントリ

その他

　エバンジェリストとして活動し始めたのはたしか2006年ころだったと思いますが、それよりも前からちょこちょこ人前で話をする機会はいただいていました。これを言うとあまり信じてくれない人もいますが、私の一番最初のプレゼンではPCの前にしゃべる内容が書かれた紙を置き、それをひたすら読むというなかなかひどいものでした。
　そんな当時、私のプレゼンに対する考えを変えてくれるものに出会いました。それが桜庭さんのblogにあった以下のエントリです。


Java in the Box Annex: 今日のプレゼン
Java in the Box Annex: 今日のプレゼン準備
Java in the Box Annex: 今日のプレゼン準備 その 2
Java in the Box Annex: 今日のプレゼン準備 その 3
Java in the Box Annex: 今日のプレゼン準備 その 4
Java in the Box Annex: 今日のプレゼン準備 その 5
Java in the Box Annex: 今日のプレゼン 番外編


　今でも大切にリンクとアーカイブを取ってあるので、すぐ貼り付けられます。私自身は、プレゼンの手法は人それぞれだと思っていますので、ここに書かれていることが必ずしも誰にでも当てはまるとは思いませんし、私自身が実践しているわけでもありません。しかし、衝撃だったのはプレゼンということに対してここまで考えて取り組んでいる人がいるということでした。これをきっかけに、自分なりにいろいろな人のセッションを見て学んだり、いろいろな手法を試してみたりするようになったと思います。


　プレゼンの本は一冊だけ読んだことがあります。


Amazon.co.jp： パブリックスピーカーの告白 ―効果的な講演、プレゼンテーション、講義への心構えと話し方: Scott Berkun, 酒匂 寛: 本


　これは素直に良い本だと思います。プレゼンに魔法はないってことを分からせてくれますが、でも心は楽になると思います。本当のことが書いてあると思います。


　あと、過去に1度だけプレゼンに関するプレゼンをしたことがあります。こちらも時間があればご覧ください。



de:code 2015に参加してきました

イベント

　de:code 2015が26日と27日の2日間で開催されました。昨年はbuildの日本版という感じでしたが、今年はサイトに「TechEd + //build」と表示されているように、「Microsoft Ignite」の内容も盛り込まれており、その意味で本当に凝縮された良いセッションだらけとなっていたのではないかと思います。
　参考までに私は以下のセッションを受講しました。

  • Power BI 最新情報と活用方法
  • Dynamics CRMの開発フレームワークでコーディングレスに作れる業務システム
  • "非" MS 技術でも安心︕Azure 活用によるアプリケーション開発
  • MS版Docker 誕生!Windows Server Containers とは?
  • Webオープンソース時代到来︕企業アーキテクトは何を考えるべきか︖
  • Xamarin.Forms と Web API による実践的クロスデバイス業務アプリケーション開発
  • Azure を利用した IoT データ分析
  • ここまでできる︕Office 365 API を活用したアプリ開発 〜 Office 365 内のデータ活用〜
  • ASP.NET 5 Web 開発〜 ランタイム編 〜
  • ASP.NET 5 Web 開発〜 フレームワーク編 〜

　今年は、あえて普段は聞かないようなセッションを入れてみました。同じマイクロソフトの技術や製品でも分野や立場が異なるとほとんど知らないというのは珍しくないと思います。あえて外したセッションを入れることで、いろいろな気づきがあっておもしろいです。Power BIは本当にすごいですね。これで無償プランが予定されているというのは本当に驚きです。


　buildやde:codeは、ほぼ全部のセッションが後ほど動画として公開されるので、わざわざいかなくてもと考える方もいるかもしれません。私もそう考えたことはありますが、実際に参加をお勧めする理由としては以下の3つがあります。


１．動画を後で見ようと思っても実際は見ない（見れない）
これは経験がある方も多いと思いますが、実際そう思っていてもほとんど見れません。忙しい時期だったりすると全く見れません。その意味で、参加することで強制的に学びの場を作れると思っています。


２．会場の雰囲気を感じる／参加者やマイクロソフト社員との交流
会場の雰囲気は行った人にしかわかりません。たとえば私が見ていて少し驚いたのは、今回は本当にWindows 10やUniversal Windows Appsなど、いわゆるクライアント系のセッションの人気がすごかったことです。私は受講はしていないのですが、立ち見となりますとアナウンスしていたものが少なくなかったです。私が思っている以上にWindows 10にみんなが期待しているんだなということが感じ取れました。参加者との交流は知り合いがいないとなかなか難しいと思いますが、マイクロソフトの社員の方はAsk The Speakerやパーティ会場などで、話しかけると快くいろいろなことを教えてくれますので、ぜひ話しかけた方がいいと思います。


３．動画では見れない／体験できないセッションがある
たとえば毎回高い評価を受けている有名なジニアス平井氏の今回のセッションでは、会場全員が参加型のデモがありました。これは実際に参加している人にしか味わえない体験で、本当に最高のセッションでした。


　以上、de:code 2015参加報告でした。来年もまた参加できるといいなと思っています。

5/30 (土) サトヤ+プロ生勉強会＠マイクロソフト 東北支店

イベント


サトヤ+プロ生勉強会＠マイクロソフト 東北支店 #satoya #pronama : ATND


来週の土曜日に日本マイクロソフト東北支店にてサトヤ+プロ生勉強会が開催されます。
今回の勉強会は、


Windows10で変わるWindowsストアアプリのつくりかた
スピーカー: ゆたかさん (@tmyt) Microsoft MVP for Windows Platform Development


Azure MLを使って何かやる
スピーカー: ぼんぷろさん (@bonprosoft) Microsoft MVP for .NET / Microsoft Student Partners Fellow / サトヤ仙台


のほか、日本マイクロソフトからも舟越美宝さんにお越しいただき、セッションを行っていただきます。
サトヤ勉強会のこのクジラのロゴのシールも初配布しますので、ぜひぜひお越しいただければと思います。


そしてもちろん懇親会もあります。申し込みは準備ができ次第ご案内します。

マイクロソフトMVPアワード再受賞のご報告

その他

　マイクロソフトMVPアワードを再受賞することができました。この場を借りまして、皆様に感謝申し上げます。





　カテゴリは「Windows Platform Development」です。


Microsoft MVP for Development Tools - Visual Basic Jan 2007 - Dec 2008
Microsoft MVP for Development Platforms - Client App Dev Jan 2009 - Dec 2013
Microsoft MVP for Client Development Jan 2014 - Dec 2014
Microsoft MVP for Windows Platform Development Jan 2015 - Dec 2015


　昨年はサトヤ仙台が発足し、Xamarinをかじり始めました。今年は引き続きXamarinも追いかけつつ、Windows 10についても紹介していければと思っています。


　2015年もどうぞよろしくお願いいたします。

Androidの実機デバッグ

Xamarin

　エミュレーターのせいで遅いのか、そもそも本当に遅いのかがよく分からなかったので、実機でデバッグしてみようと思い試してみました。対象のAndroidはNexus 7（2012）です。以下、その覚書。


ドライバのインストール
　"Nexus 7"と"ドライバ"とかで検索すると「Nexus7 Toolkit」というのをインストールしろと出てくるのですが、これがいまいち見つからなかったので、以下のページにある「Unified Android Toolkit v1.3.3」というのをインストールしました。


Unified Android Toolkit v1.3.3 | SkipSoft.net


　インストール後の手順については、以下のページなどを見ればできます。


ASUS Nexus7 2012 （3Gモデル) を 購入して早速いじりまくる - &-'s Blog | 秋田県大館市から更新のブログ


Android側の設定
　Android側の設定も"Android"、"実機"、"デバッグ"とかで検索するとたくさん出てきます。以下のページなどを参考して設定行います。


Android Studioで開発したアプリを実機でテストする方法【初心者向け】 | TechAcademyマガジン


　注意点として、Android 4.2以降では「開発者オプション」が既定では表示されていない状態になっているので、「[設定]-[端末情報]を開き、「ビルド番号」を7回タップすると」という部分が重要です。この操作で「開発者オプション」が表示されます。


ストレージの設定変更
　ここまでの設定でUSBをAndroidとつないで、ADBのデバイスとして認識されるはずなのですが、なぜか認識されません。どうも以下のページに書かれているように、ストレージの設定で「カメラ(PTP)」を選択する必要があるようです。


Google OS実験室 ～Moonlight 明日香～ : Nexus7がadbで認識されない


　これで無事Nexus 7が認識され、実機でデバッグができるようになりました。