[Git] Gitで利用するsshキーペアの作成、ssh接続、複数ID接続

しょっちゅう作っては、作り方を忘れ、また検索で調べる…ということをしているので、sshキーの生成&接続について、忘れないようにメモしておきます

GitサーバへSSHキーを使って接続したい

Gitサーバに接続するには、

この2種類の接続方法があるみたいです

Git接続用のクライアントアプリは、どっちで接続するか選択できるものもあるので
Sourcetreeなどを使っていると、あまり認識してない人もいるかもしれません

今回、こんなクライアント環境で試しました

これを試そうと思ったモチベーションは、push のたびに IDとパスワードを毎回聞かれるのがやだ、だからキーペアを利用して ssh アクセスにするんだー
というところから始まってます

GitHub のIDとパスワードをスキップして、セキュアアクセスするのだ！という方の参考になればと思います！

あと、番外編として、 非推奨ですが https アクセスでIDとパスワードを毎回聞かれないようにする方法も最後にメモしておきます

キーの生成方法 ssh-keygen

ここは普通に
公開鍵と秘密鍵を作ればいいだけなので、知ってる人に取ったら何をいまさら…になりますが、一応メモ

Gitがインストールされているなら ssh-keygen が使えますので、コマンドを打つだけ
(コマンドを打たなくても、Gitのクライアントアプリが勝手にやってくれる場合もあります)

GitBash などを起動します

コマンドはこちら

$ ssh-keygen -t rsa

基本的には、何か聞かれてもエンターで進めばOKです

デフォルトでは c:\Users\[ユーザ名]\.ssh\** 以下に秘密鍵（id_rsa）と公開鍵（id_rsa.pub）**のキーペアが作成されます

Windowsだとキーの保存位置は c:\Users\[ユーザ名]\.ssh\ にしないといけません

わたしは、Github用のキーだと判るように、名前を github_rsa として作成しました
（既に別の用途で id_rsa を使っているからです、つまり複数アカウントを利用しています）

実行結果はこれ↓↓↓

(SHA256以下の箇所は、適当に x で書き換えています)

haruka.sao@MyPC MINGW64 ~
$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/haruka.sao/.ssh/id_rsa): /c/Users/haruka.sao/.ssh/github_rsa
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/haruka.sao/.ssh/github_rsa.
Your public key has been saved in /c/Users/haruka.sao/.ssh/github_rsa.pub.
The key fingerprint is:
SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx haruka.sao@MyPC
The key's randomart image is:
+---[RSA 2048]----+
|      x          |
|      x          |
|      x          |
|      x          |
|      x          |
|      x          |
|      x          |
|      x          |
|      x          |
+----[SHA256]-----+

haruka.sao@MyPC MINGW64 ~
$

キーペアができたできた

SSHキーをGitHubに登録

c:\Users\[ユーザ名]\.ssh\ に保存された id_rsa.pub （わたしの場合はgithub_rsa.pub）を GitHubに登録します

自分のアカウントの Settings > SSH and GPG keys > New SSH key をクリックすると、先ほど作った公開鍵を登録することができます

先ほど作った id_rsa.pub 公開鍵を登録しましょう！
くれぐれも id_rsa の秘密鍵の方ではないので、お間違え無く！

id_rsa.pub の中身を見ればわかりますが、「ssh-rsa ……」 から始まっているファイルになります

登録すると、こんな感じの記載になります

最後に、自分の秘密鍵が c:\Users\[ユーザ名]\.ssh\ に設置されていることを再確認！

OpenSSH モード

GitExtensions で ssh 接続したい場合、
私的にはお勧めなのは、OpenSSHモードにすることです

※ PuTTYアクセスは、PuTTYの独自フォーマットのキーを登録するなどが必要ですので、わたしは利用をやめました

これで下準備はOK！

PCから ssh で接続テスト

Git bash で接続テストしてみましょう

さっきの Git bash で、リポジトリの下まで移動します
もしくは、GitExtensions から起動すると、初期ディレクトリはそのリポジトリの下になります

確認パターンは２パターンあります

(パターン1) id_rsa で登録している ssh キーを利用する場合

このコマンドで確認します

1

$ ssh -T git@github.com

id_rsa というファイル名を、ssh 接続では自動的に認識するようです

初回は、known_hosts に GitHub サーバを登録するよ？と聞いてくるので、 yes を入力します

Hi [GitHubユーザ名]! You’ve successfully authenticated, but GitHub does not provide shell access.

が表示されればOKです

わたしの実行結果はこちら↓↓↓


$ ssh -T git@github.com
The authenticity of host 'github.com (192.30.252.122)' can't be established.
RSA key fingerprint is xx:xx:xx:xx:xx:xx:
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'github.com,192.30.252.122' (RSA) to the list of known hosts.
Hi h-sao! You've successfully authenticated, but GitHub does not provide shell access.

known_hosts ファイルがこんな感じで作られました

(パターン2) 独自の名前で作った ssh キーを利用する場合

わたしの場合は、先ほど github_rsa という名前でキーを生成したので、こちらのパターンになりました

まず、 github_rsa という独自名称を ssh アクセス時に認識させる必要があります

c:\Users\[ユーザ名]\.ssh\ 直下に config という名前のファイルを作成します

※この部分は、Gitうんぬんは関係のない、ssh 接続の話です
　Windows の ssh 接続では c:\Users\[ユーザ名]\.ssh\config はすべてのSSH接続で共有されます

c:\Users\[ユーザ名]\.ssh\config の内容はこんな感じです


Host my.github.server
  HostName  github.com
  Port      22
  User      h-sao
  IdentityFile  ~/.ssh/github_rsa
  TCPKeepAlive yes
  IdentitiesOnly yes

＜参考リンク＞

ここまで準備したら、接続テストしましょう
config に設定した名前で　Host の名称アクセスすることが出来ます！

1

$ ssh -T my.github.server

うまくいくと、パターン1と同じように、known hostに登録するかどうかを聞かれて、ファイルが作成されます

また、

Hi [GitHubユーザ名]! You’ve successfully authenticated, but GitHub does not provide shell access.

こんな感じで、自分のGitHub名でアクセス出来たことが判ります
いちおキャプチャ置いときます

これで、クライアントPCから GitHub に IDとパスワードを利用せずに接続することが出来ました！

まだGitExtensions から ssh アクセスは出来ない

さて、この状態で、GitExtensions のプッシュボタンを押して Pushしようとしても、IDとパスワードを聞かれます

Pushボタンを押すと…

GitHub のアカウントとパスワードを聞かれます…
どうやら https アクセスがデフォルトみたいです

ちゃんと自身の Git リポジトリに ssh 接続するんだよー

を認識させてあげないといけません

Git リポジトリに ssh 接続設定を教える

Git リポジトリの設定を Git bash のコマンドで見ることが出来ます

$ git config -l

これらの設定は、Git リポジトリ直下にある .\.git\ 以下にあります

この下の config ファイルなどを直接編集しても反映されますが、コマンドを使った方が良いでしょう

わたしの場合の実行結果はこちら


haruk@MACBOOKPROAKIKO ~/xxx (master)
$ git config -l
core.symlinks=false
core.autocrlf=true
color.diff=auto
color.status=auto
color.branch=auto
color.interactive=true
pack.packsizelimit=2g
help.format=html
http.sslcainfo=/bin/curl-ca-bundle.crt
sendemail.smtpserver=/bin/msmtp.exe
diff.astextplain.textconv=astextplain
rebase.autosquash=true
user.name=Sao Haruka
user.email=xxx@yyy.tmp.com
core.autocrlf=True
core.excludesfile=C:\Users\haruk\Documents\gitignore_global.txt
core.editor="C:/utils/GitExtensions/GitExtensions.exe" fileeditor
merge.tool=kdiff3
diff.guitool=kdiff3
difftool.kdiff3.path=C:/utils/KDiff3/kdiff3.exe
mergetool.kdiff3.path=C:/utils/KDiff3/kdiff3.exe
core.repositoryformatversion=0
core.filemode=false
core.bare=false
core.logallrefupdates=true
core.symlinks=false
core.ignorecase=true
core.hidedotfiles=dotGitOnly
remote.origin.url=https://github.com/h-sao/xxx.git
remote.origin.fetch=+refs/heads/*:refs/remotes/origin/*
branch.master.remote=origin
branch.master.merge=refs/heads/master

上記の「remote.origin.url」が Git サーバにアクセスするときの URL になるので、これを ssh でアクセスするように変更します

デフォルトの id_rsa を利用するときは

git@github.com:[ユーザID]/[リポジトリ].git

を設定します

1

$ git remote set-url origin git@github.com:h-sao/xxx.git

id_rsa じゃない、別名の ssh キーファイルを利用するときの設定は

[Host名]:[ユーザID]/[リポジトリ].git

になります

1

$ git remote set-url origin my.github.server:h-sao/xxx.git

GitExtensions で Push してみましょう

URL の表記がちょっと変わりましたね
無事、IDとパスワードを聞かれることなく、プッシュが成功しているはずです＼(^o^)／

やったー

＜参考リンク＞

(番外編) httpsアクセスでIDとパスワードを聞かれないようにする

ええ、今回、本当に色々と試しましたとも…

ssh ではなく https アクセスで、毎回アカウント情報を入力しない方法も調べました

あまりセキュアじゃないので、お勧めできませんが
一応記載しておきます

$ git config -l

で調べた 「remote.origin.url」 の初期の記載はこれでした


remote.origin.url=https://github.com/h-sao/xxx.git

この https アクセスの URL 中に、IDとパスワードを埋め込めばOKです

https://[ユーザID]:[パスワード]github.com/h-sao/xxx.git

やってみたけど、パスワードが丸々画面に表示されるので、よくないです…
確かに、ssh キーファイルなど用意しなくてもいいので、便利ではありますが…＞＜；

利用は自己責任でお願いします

＜参考リンク＞

追記記事書きました(2016/5/9)

[勉強会] ebisu_effective_modern.cpp vol.3やりますよ

ebisu_effective_modern.cppって？

東京の恵比寿でC++について、みんなの意見を聞きながら本を読み進める勉強会を開いています

昔、大阪でC++の読書会を開催していたのですが、それが結構役に立って面白かったので、東京でも開催してみよう！と思い、始めてみました

ネタが無いと勉強や会話もしずらいので、
「Effective Modern C ーC11/14プログラムを進化させる42項目」 を元に進めています

今回は、５章 右辺値参照、ムーブセマンティックス、完全転送 について…
前回の vol.2 では、基本的なムーブの動きを簡単に抑えた程度になったので、あまり深いところまでは進めませんでした
書籍の内容にぐいぐい追いつけるように頑張りますよ～

興味ある方はどうぞ、お気軽にお越しください(^^)/

[Mac] Windows Bootcamp 時の PrintScreen

· mac

Windows on Mac の時の PrintScreen キーは？

Macの上で、BootCamp で Windows を動作させているときにはにゃんと！「Print Screen」キーがありません（そらそうだ）
当然なんですけど、いつもいつも検索しては忘れて…を繰り返すので、いい加減、覚える

画面全体コピー アクティブウィンドウコピー
Windows Print Screen Alt + Print Screen
Windows on Mac Fn + Shift + F11 Fn + Shift + Option + F11
Mac Shft + Command + 3 Shft + Command + 4

（Mac の Shft + Command + 4　は、画面の範囲選択です）

[Unity] 2D Spriteにシェーダーをかける

今年の初めに、「Game a Week」という開発手法がすごい！っと書きました
とりあえず、週に一度は成果物を公開する、の部分を真似してみようかなと
（やってみて気が付きましたが、実は1週間って、結構長いです）

今をトキメクGame Engine: Unity について、去年から触る機会があり、ポチポチとやっております

そしてこれは既知の情報ですが、先週は2Dスプライトにシンプルなグラデーションのシェーダーを適用してみました

やってみると判るのですが、Unity ではスプライトにシンプルシェーダーだけを適用しようと思っても出来なくて、
先に結論を書いておくと、スプライトとして扱う場合は必ず何かしらのテクスチャアセットが必要でした
そのメモと感想文になります

2016年1月11日現在、Unityのバージョンは 5.3.1 です

Unity のシェーダー言語：ShaderLab

Unity のシェーダーは 「ShaderLab」 という Unity オリジナルのシェーダー言語で記載することになります
といっても HLSL のラッパーのような言語なので、Unity で使うときのお作法であり、Unity と シェーダーの仲介役の言語、と思って良いみたい

最小限の ShaderLab

最小限の ShaderLab の枠組みはこんな感じ
（これより削ると、エラーが出た）

// BG_shader.shader
// 最小限の ShaderLab
Shader "Custom/BG_shader" {
    SubShader
    {
        Pass {}
    }
}

実際に、このカスタムシェーダーをマテリアルに適用するとこんな感じ

何もしないマテリアルを作ることが出来ました

シンプルなグラデーション

今回、ゲーム背景を単純なカラーグラデーションにしようと思ったので、そういうシンプルシェーダーを書いていきます

// BG_shader.shader
// 黄色くグラデーションする
Shader "Custom/BG_shader" {
    SubShader
    {
        Pass{
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            // VS2015のグラフィックデバックON
            #pragma enable_d3d11_debug_symbols

            struct VertexInput {
                float4 pos:  POSITION;    // 3D空間座標
                float2 uv:   TEXCOORD0;   // テクスチャ座標
            };

            struct VertexOutput {
                float4 v:    SV_POSITION; // 2D座標
                float2 uv:   TEXCOORD0;   // テクスチャ座標
            };

            // 頂点 shader
            VertexOutput vert(VertexInput input)
            {
                VertexOutput output;
                output.v = mul(UNITY_MATRIX_MVP, input.pos);
                output.uv = input.uv;

                return output;
            }

            // ピクセル shader
            fixed4 frag( VertexOutput output) : SV_Target
            {
                float2 tex = output.uv;
                // 黄色→白色のグラデーション
                return fixed4( 1.0, 1.0, 1.0 - tex.y, 1.0);
            }

            ENDCG
        }
    }
}

ちょっとマテリアルではわかりにくいですけど、一応、線形にグラデーションされています

2D Sprite に適用する方法

シンプルなシェーダーとマテリアルが出来たので、実際に、Sprite に登録します

Sprite と Material だけでは足りない

ただし、ちょっとここでクセがあって、このマテリアルを Sprite にアタッチしても、何も起こりません
それどころか、ワーニングメッセージが…

Material does not have a _MainTex texture property. It is required for SpriteRenderer.

あら…
Sprite Renderer に登録するマテリアルには、テクスチャが必要ということみたいです
シェーダーに戻って、言われているとおり、 _MainTex にテクスチャを登録します

// BG_shader.shader の Properties を追加
    Properties
    {
        _MainTex( "2D Texture", 2D ) = "white" {}
    }

テクスチャを登録できるし、デフォルトでは white テクスチャを使いますよ。という意味になります
ちなみに、_MainTex() の内蔵テクスチャには

の4種類が用意されています
* ShaderLab: Properties - Unity Documentation
http://docs.unity3d.com/Manual/SL-Properties.html

マテリアルにテクスチャを持つ設定にしました

Sprite には、ベースとしてリアルな Texture が必要

Sprite のワーニングも消えたのですが、やはりシーンに Sprite object が表示されません

どうやら、Sprite はあくまで、テクスチャ画像を表示させるための機能に特化しており、マテリアルだけでは動作しない様です

仕方がないので、Sprite 用のテクスチャを用意します
サイズ感がよくわからなかったのですが、 white.jpg という 8*8 のテクスチャを Assets の下に入れました

Sprite の Inspector にて、Sprite Rendere > Sprite にて white テクスチャを選択します

あぁ…これ、デフォルトで白いテクスチャくらい、システムで用意してほしいなかと思いましたが、まぁしょーがないです

でたー

まとめ

シンプルな 3D model では

という構造なので、

2D Sprite では

なのかなーと思っていたのですが、実際には

という構造が必要でした

これを受けて、

「え、シンプルなシェーダーのみを適用したいなら、
Sprite でなくて 3D Plane Model にしたらいいんでない？」

という疑問が出てきましたが、
実際のゲーム制作においては、シチュエーション依存ですかね…
今回のわたしの場合は、Sprite を採用しました

この記事の Unity プロジェクト（ソース、アセット）を Github に置いておきます
https://github.com/h-sao/UnitySampleCode/tree/master/SpriteGradationalShader

何かの参考になれば幸いです

[Utility] ISOファイルからBoot用USBを作成するアプリRufus

Windows10 の isoファイルからUBSインストールメディアを作りたいと思ったときに、便利なソフトを見つけました

実際は、「USB ブート 作成」などなどで検索すれば、やり方はいくらでも載ってるんですけど
省コストで、ぱぱっとやりたいことを実現してくれたので、紹介しておきます

このソフトを使ったら、簡単にUBSインストールメディアを作成出来ます

配布されているアプリはEXE単体のみ！
2016年1月6日現在、バージョンは　Rufus2.6 で、”rufus-2.6.exe” のみで動作します
シンプルで良いですね

利用した感じは以下のような雰囲気でした

ISOイメージを選択

USBの元データ消しちゃうよーの警告

UBSインストールメディア作成中

日本語にも対応しているし、お手軽でおススメです

[Diary] 2016年もよろしくお願いします

遥佐保（はるか・さお）です
今年もよろしくお願いしますと共に、去年から気になっていることも踏まえて、記載しています

MSMVP 2016年1月度受賞

今年もマイクロソフトさまより MVP を再受賞させて頂きました

カテゴリー名称は Windows Development となります 昨年と変わらず、クライアントサイドの技術カテゴリーでの受賞となります

自分ひとりだけでは、とても活動は続けられませんでした
気さくに相談できる相手が、周りにたくさん居てくださるおかげです

プラス思考でこれからも色々な情報発信を行っていきたいと思います

コミュニティ活動

ブログ移転を機会に、自分の歴史ページを作りました

http://h-sao.com/about/

いやーよくわかりますね、自分の活動履歴が…ヽ(｀▽´)/
リンクなどまだ未記載のものがほどんどですけど、頃を見て更新していきます

去年はセッション6回、勉強会主催8回/スタッフ3回でした
環境が変わったこともあり、例年よりはちょっと少なかったかも

東京生活

あまり自身のことはこれまで書いてこなかったのですが、今年は活動場所を大阪から東京に移しました
慣れたような慣れないような？まぁそれでも元気にやっています

完全に私見ですが、文化の違いを一番痛感したのは食事でしょうか…
東京はどのお店も蕎麦と寿司が美味しい気がします
逆に他の和食系は、関西とちょっと料理法が違うようで、最初はかなり衝撃的でした(^^;)
あぁ、お好み焼き定食が懐かしい限りです(^^) 東京にはありません

年越しそば、美味しかった(^ω^)

仕事が変わったので、出社時間が遅い環境になりました、朝弱いので、本当にアリガタイ…

グラフィック技術

元々コンシューマーゲームでエフェクトシステム全般（パーティクル、スプライト、フィルター系など）を担当していたので、そこでの知識が多少生かせるような形になりました

一番の衝撃は、Vulkanの低レイヤAPIを見て、まじ時代錯誤？いややわーこれ管理するのんーと(笑)

今まだ正式に情報は出ていませんが、このNVIDIAが出しているムービーはすごく判りやすくて、いい内容です

Metalにしろ、これにしろ
ひとつのゲームチームで対応できる範囲を超えてる感じはあります(^^;)

インディゲーム開発者

去年はインディゲーマーの方々と知り合えたのは本当に自分にとってラッキーでした

彼らと話をしていたら、やりたいことは何なのか？→ゲーム作りに専念したい
といった、物事の真の部分（みたいなもの）を、純粋に考えられるようになりました

そこには、製品も開発言語もただの道具で、本当にやりたいことがあるなら能力は後から付いてくる
という、ごく自然で純粋な情熱が溢れていました

中でも、「Game a Week」という開発手法は衝撃的です
知ってましたか？1週間に1本、ゲームを作るのです
どんなにクソゲーでも、作る期間は1週間
そしてそれを公開すべしと

言い出したのは Rami Ismailさんらしいです、カッコいいよ…

彼に触発されて作り始めたという、もっぴんさんの Downwell は本当に尊敬すべき実践ですね

社内インディ

言葉の通り、社内インディゲームを作っていました
2つチャレンジし、1つはまぁ遊べる程度になり、もう1つはモックで終了してしまいました

プログラマ（自分）と、デザイナーの人と二人でやったのは、実は初めての体験です
わたしは大人数で作った経験しかなかったのでかなり不安でしたが、意外とやれるもんやなー、と思いました

一番大事なのは、「操作デモ」と「デモゲーム」は違うということ

デモゲームは、あくまでゲームなんで、未完成でもいいからとにかく面白い要素がないとダメなんですよね…
それに比べて、単に操作できるだけのアプリは、ただのデモです
その違いを理解できる人、できない人がこの世の中にいることを痛感し、喧嘩もした年でした

この活動は、今年はもう少しピッチ上げて、一番下に書いた個人活動と共に、これからも続けていきたいです

英語

去年から職場で英会話が必要になりました
はじめは戸惑いましたが、
最近はそんなに困らなくなりました

というのは、わたしの英語力が上がったのではなく
技術的なベースをお互い持っているから、話し方のコツが判った、というオチなんですけど…

つまりカジュアルな日常会話はダメです、これ、とても難しいですね～
あと、交渉前提のディスカッションも難しい
とはいえ物おじせずにしゃべれるようになれたのは、良かったかなと思っています

引き続き、英会話の勉強しないとなーを実感しているところです
もうちょっと長い文章がしゃべれるようにならないと、これ以上は一生上達しない気がします

エレキギター

大阪で教えていただいていた先生に、帰省の際にレッスンしてもらっています
さすがに触る機会はちょっと減っちゃったけど、期間が開いてもできる練習法を教えてもらって、楽しくやってます

これもこれで続けていくぞー(^o^)

もろもろ踏まえた今年の私的キーワード

仕事では大きな案件が決まったので、今年は佳境な年になりそうです

去年は仕事で、C#ばかり触っていたので、C++のプロジェクトを作成する機会が激減しました
少し離れて思うのは、C++脳はC#では使わない能力が必要とされるので、筋トレみたいに続けとかないと辛いなぁというところでしょうか
C++の勉強会や集まりなど、筋トレは続けたいです…

あと、これは相当難しいのですが、Game a Week はチャレンジしたい…せめて4回くらいは回したいですね（低い目標のくせに、宣言してすみません
月曜0:00～日曜23:59ということなので、今日は一つ、プロジェクトを作りました
口だけの結果が伴わない最低な奴にならないように（独自ルールに変えるかもしれませんが！）チャレンジしていきます

最後に、コミュニティ活動は、メインはもちろん「オープンソース」関係
ただ、自分はサーバーサイドの人ではないので、フロントエンド系の技術がメインになると思います
今年は自分のかかわる範囲を広げて、世の中の技術を幅広く知って発信する活動を行っていきます //ビシッ

ではでは、2016年も、どうぞ、よろしくお願いします！

[Hugo] ブログ構築メモ(2)-テンプレートの更新方法（CSSはメインではない）

· hugo

前回、スタティックジェネレーターのHugoを使って、GitHub Pages にブログを展開する方法を記載しました

このとき、「デザインと機能を諦めた」と書きましたが
その続きをひそかにポチポチとやっておりました…
しかし、ポチポチやる日々が辛くなり、ついにはブログ更新そのものが怠ることに…

一向に進まない理由

一人ではWebのフロントエンドのノウハウもなく、もう無理かもーと思っていたことを
@mayuki さんに相談したところ、こんなアドバイスを頂きました

CSSってイマドキ、モバイル対応などで複雑なので、デザインを一から自分で書き起こすのは辞めた方がいい
いつまでたっても、モノが出来上がらない

“CSSデザイン” を触るのは最後
先に “テンプレート” を駆使して、自分なりの配置にするのがおススメ

つまり
機能のテンプレートは他から持ってこれるがデザインはあらかじめ好みのものを選ぶ方が良い
というアドバイスでした

あれ？前回わたしが書いた時には、

結局はデザインよりも機能が一番多いのがいいんでない？という発想で選びました

おお、まったく逆ですね…
デザインさておき、機能重視してたので、うまくいかなかったのか…！！！

好みっぽく、かつシンプルなテンプレート

とまぁ、素人くさい話で本当に恐縮ですが、気持ち改め、シンプルで改変しやすそうなデザインのテンプレートを引っ張ってきました

これは相談したその場で@mayuki さんが、ちゃちゃっとテストするために触ってくれたテンプレートです

彼はものの10分程度で、わたしのやりたいことを目の前でやってくれたので、とても参考になりました
ありがとうございます～（涙目）

最初に見る場所はHTMLテンプレート

やったことはまず、themes > minimalist > layouts の下を見るようにしました
わたしの環境だと C:\Users\haruk\Dropbox\sites\Blog\themes\minimalist\layouts になります

ここから必要そうな機能の、HTMLテンプレートを作っていきます
わたしの場合、以下の機能（テンプレートとなるブロックと名付けます）が不足していました

こんな感じです

ヘッダーに直接何か書いてみる

themes > minimalist > layouts > partials > header.html がヘッダーに相当します

素人のわたしが混乱する原因として

こんな感じでしょうか(+_+)

まぁHTMLタグの直書きであれば、なんとかなるだろうの勢いで、まずは、提供されている minimalist テンプレート（HTML）の中身を更新しちゃうことにします

Hugo的作法としては、管理ディレクトリ直下の layouts を更新すべきらしいのですが、色々やっているうちに訳が分からなくなるので、やめました…
もしかしたらHugoはファイル管理とか命名規則が、えいやっっっなのかもしれない？
とにかく（わたしの能力不足なんでしょうけど）思うように管理できなかった

オレオレ topbar-layer classの追加

1
2
3
4
5
6
7
8
9

<header class="site-header">
  <div class="transparent-layer">
    <h2>{{ .Site.Params.header_title }}</h2>
  </div>
</header>
  <div class="topbar-layer">
    <a href="{{ .Site.BaseURL }}about">About me</a>&nbsp;&nbsp;&nbsp;
    <a href="{{ .Site.BaseURL }}tags">Tags</a>
 </div>

出力結果

ヘッダーと本文の間に、バーを入れることが出来ました

ちなみに Hugo は、デフォルトで [サイトURL]/tags/ というタグ一覧のHTMLを生成してくれます

ブロックとして設置出来た後に、CSSを触る

勘所のある人には、こいつはなんというツマラナイことを書いてるんだ！？と思われるかもしれませんが、これも経験なんで許してください…書いててつらい…

気を取り直して、いよいよCSSを触ります

自分の追加した “topbar-layer” を追加します
といっても、同じヘッダの “transparent-layer” をコピペする気まんまんです

幸いなことに、この minimalist のテンプレートはとてもシンプルで、触るファイルは１つのみ！ themes > minimalist > static > css > styles.css に、”transparent-layer” のパクリ設定を追加します

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.topbar-layer {
  width: 100%;
  height: 100%;
  background-color: #252a2c;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #e0e0e0;
  text-align: center;
  position: relative;
  line-height: 50px;
  height: 50px;
  transition: all 0.3s ease;
}

.topbar-layer a{
    color: #a2a2a2;
}
.topbar-layer a:hover {
    color: #fff;
}

出力結果

高さなど一部、自分で調整
これくらいならできた…

(私的作業コスト比)デザイン調整＞テンプレート調整

わたしがプログラム目線だからかもしれませんが、実際このブログでは、出来てなかった機能（タグと最新ポスト表示）を難なく実装することは出来ました

Hugoが高機能ということ、公式ドキュメントがそこそこ充実してることなど、調べればなんとかなるもんです

まぁ実は、最新投稿表示の際には、表示させたくない静的なサイト（About me ページなど) をはじいたりするために
ちょっと工夫が必要だったのですが、その話はまた今度…

とにかく、デザインをいじるのは難しい…！
テンプレートを触ることに特化し、デザインは最後の最後にちょっとだけ手を入れる
という方針が吉でした

@mayuki さん、アドバイスほんとにありがとーヽ(｀▽´)/

引き続きがんばります…！

また、RSSフィードが乱れるかもしれませんが、ご容赦くださいませ…

（次回へ続く）

[勉強会] meetup app@1 でオープンソースについて発表しました

2015/11/21 Sat meetup app@1 という勉強会を開催しました

https://meetupapp.doorkeeper.jp/events/33820

仰々しいタイトルが付いていますが、完全に私見まとめを発表させて頂きました

オープンソースだけというよりは、最後の方は、普通に製品やサービスのロードマップ、ビジネスモデル的な観点になりました
もちろんこれが全てではないと思うし、わたしはマーケティングのプロでもないので間違っているかもしれないですけど

[Android]Xiaomi Redmi Note2にGooglePlayをインストールする

クロスプラットフォームで開発していると、やはり最新の端末が欲しくなりますよね～

１年以内発売の iPhone と Windows Phone は持っているのですが
そろそろ新しい Android が欲しい～と思っていたので、買ってしまいました

シンガポール旅行に行った際に、ブギスの電気屋街、Sim Lim Square（シムリム スクウェア）で、今をトキメク Xiaomi（しゃおみ）デバイスを購入しました

全部で6Fまでありましたが、結局1Fのお店の品ぞろえが一番まとまってる印象でした
Xiaomi正規店も1Fに入っていました

Xiaomi Redmi Note 2

購入したのは、Xiaomi Redmi Note 2

画像のように、デフォルトでは中国語のアプリがたくさん入っています
そして、Google Play Store は入っていません！

デフォルトのIMEが Buidu なので、まぁこのままでは、日本語が打てません(><;)

なので Google Play Store をインストールする方法をメモしておきます

GooglePlay installer APKが最適解

検索すると色々な方法が出てくるのですが、おそらく、Google installer のAPKを直接インストールするのが、手っ取り早いです
（チャイナストアやMIストアからGooglePlayらしきものをインストールしても、わたしの場合は、動作しませんでした）

情報元はこちらの Xiaomi公式コミュニティ掲示板です

Xiaomiはすごくコミュニティも発達してるんですよね～ちゃんと英語の掲示板なので、読めました(^_^)

上記サイトにある、GooglePlayを入れるための Google installer をAPKからインストールします

Google installer谷歌应用下载器.apk
(1009.36 KB, Downloads: 237400)

PCから落とすなどするよりも、直接 Xiaomi デバイスからダウンロードした方が、早いと思います
もしかしたら、MIアカウントを作らないとダウンロード出来ないかもしれません（わたしは作りました）

Androidがセキュア過ぎて、思った順番にインストール出来ない

installer を入れると、以下の４つがインストール可能になります

  1. Google Services Framework
  2. Google Account Manager
  3. Google Play services
  4. Google Play Store

そのままインストールしたら良いので、おそらく、この順番でインストールが走ると思います
（ここ、画面キャプチャを取り忘れたので申し訳ない）

ところが、1番目をインストールしようとすると、本当にインストールしていいかどうかの許可画面が出ますよね、こんな感じに…
（イメージ画像です↓↓↓）

この画面で 「1番のアプリに対して」ユーザが許可を押そうとするときに、すでに「2番目のインストール」が動いてしまうのです

結果的に、 「1番のアプリの許可画面」は裏にまわってしまい
「2番目のアプリの許可画面」が一番手前に来ることになります
つまり最終的には、「4番目のアプリの許可画面」が最前面になります

入れたいアプリは Google Play Store なので、それでも良いかなと思って
４→３→２→１の順にインストールするんですけど、
お察しの通り、Google Play Store は起動しません
おそらく、Google Services Framework とかが、Google Play Store のインストールに必要なんじゃないかなーと思います

なので、いったん、Google Play services、Google Play Store をアンインストールし、再度、Google Play services、Google Play Store をインストールします

いやー(~0~)　これで、わたしの端末で、Google Play が動くようになりました！

その他、Xiaomi デバイスで気づいたところ

日本語モードはない

日本語モードは入っていません
ROMとか焼き直すと良いらしいですけど、まだやってないです

Permissions アプリがうれしい

デフォルトで入っている Permittions アプリが最高に便利

各アプリ毎の許可 どのアプリが使ってるか

SIMは２枚ささる

両方LTEをつかめます
ただし、片方がLTEをつかんでいるときは、もう一方はつかめない仕様です

なので、日本で、１番目にDocomoを刺して、２番目にauを刺す、とかして
１番目はLTEでデータ通信、２番目はauで電話とメールのみ
とかにしたくても、ちょっと難しいかも
日本は今現在、ほぼLTEになってしまってるので、そういう活用は出来なさそうかも…？

どちらにしても、技適通ってない端末なので、日本では使っちゃダメ

まとめ

もろもろ満足しています
同じようにシンガポールや中国で購入した方の参考になれば～

[Hugo]ブログ構築メモ(1)-Hugoとテンプレート

· hugo

Windows10のノートPCに Hugo というスタティックジェネレーターをインストールして、このブログを構築しています
作ったブログは、GitHub Pages にアップして運用しています

今のところ気に入っているのは

  1. ブログの管理が GitHubで行えること
  2. ブログ用の運用サーバーが不要なこと (ありがとう！GitHub)
  3. GitHubにPushしたら、werckerの自動ビルドでGitHubPagesにアップすること

この3点かなー
今日は上から2番目までのブログ構築部分（つまりHugoの部分）をメモしておきます

インストール (というか単なるexeファイル設置)

わたしが 2015/9/9 現在ダウンロードしたバージョンは v0.14 です
Hugoはexeだけで動くので、適当なディレクトリに置きます
わたしは

C:\Library\Hugo\bin\hugo.exe

に設置することにしました

ブログ新規作成

Windows標準のコマンドプロンプトで作業します
このとき既に、ブログを作ろうとするディレクトリが存在していたら、ブログ作成は失敗するので、気を付けてください

FATAL: 2015/09/09 C:\Users\haruk\Dropbox\sites\Blog already exists and is not empty

リネームなどして、再チャレンジ
うまくいくと、何の反応もなく終わります

C:\Users\haruk\Dropbox\sites>c:\Library\Hugo\bin\hugo.exe new site Blog

C:\Users\haruk\Dropbox\sites>

ディレクトリ構造の確認

C:\Users\haruk\Dropbox\sites>cd Blog
C:\Users\haruk\Dropbox\sites\Blog>dir
 ドライブ C のボリューム ラベルは MyWindows です
 ボリューム シリアル番号は xxxx-xxxx です

 C:\Users\haruk\Dropbox\sites\Blog のディレクトリ

 2015/09/09  20:29<DIR>  .
 2015/09/09  20:29<DIR>  ..
 2015/09/09  20:28   270 .gitignore
 2015/09/09  20:28<DIR>  archetypes
 2015/09/09  20:28   107 config.toml
 2015/09/09  20:28<DIR>  content
 2015/09/09  20:28<DIR>  data
 2015/09/09  20:28<DIR>  layouts
 2015/09/09  20:2836 README.md
 2015/09/09  20:28<DIR>  static
   3 個のファイル 413 バイト
   7 個のディレクトリ  80,351,985,664 バイトの空き領域

C:\Users\haruk\Dropbox\sites\Blog>

あっという間に自作ブログのベースは完了です
次はテンプレートを落としてきます

テンプレート適用

GitHubから有志の人たちのテンプレートを拝借してきます

たくさんテーマがあるけど、まじでうざいテーマしかない
おっと失礼しました
自己主張が激しいテーマが多いです

とりあえず、GitHubのスター数が多いテンプレートをチェックしてみました
中でも一番自分が気に入ったものが、hyde-x

テンプレートは自分のサイトの顔になるので、色々悩みましたが
結局はデザインよりも機能が一番多いのがいいんでない？という発想で選びました

コンフィグファイルに

が揃っていたので、自分であれこれする手間も省けるかなーという印象

GooglePlusはもう今ではダサいんじゃね？
というアドバイスを受けたので有効にしていません＼(^o^)／
同様、Gravatarもいらんやろ…と思いましたが、アイコン代わりに仕方なく使いました

Gravaterは自分でハッシュ作成をしないといけなかった
とゆーか、こんな変換くらいサイトで提供してよ… イマドキプログラマに変なところで手間かけさすなよなーいやまじで(‘ε’)
https://ja.gravatar.com/site/implement/hash/

話が多少逸れましたが、この hyde-x をテーマとして、Gitコマンドを使って適用します

わたしは、SourceTree内蔵のGitを使ってみました
%USERPROFILE%\AppData\Local\Atlassian\SourceTree\git_local\bin
(参考)https://answers.atlassian.com/questions/245850/how-to-run-a-git-command-as-a-custom-action

“c:\Program Files (x86)\Git\bin\git.exe　とか持っているなら、それでも可

themes ディレクトリの下で作業します

C:\Users\haruk\Dropbox\sites\Blog\themes>C:\Users\haruk\AppData\Local\Atlassian\SourceTree\git_local\bin\git.exe clone https://github.com/zyro/hyde-x
Cloning into 'hyde-x'...
remote: Counting objects: 358, done.
remote: Total 358 (delta 0), reused 0 (delta 0), pack-reused 358
Receiving objects: 100% (358/358), 253.37 KiB | 175.00 KiB/s, done.
Resolving deltas: 100% (153/153), done.
Checking connectivity... done.

C:\Users\haruk\Dropbox\sites\Blog\themes>

C:\Users\haruk\Dropbox\sites\Blog\config.toml をhyde-x用に修正しましょう
hyde-xテーマのサイトに解説が書いてあるので、それをそのままコピペします
タイトルやTwitterアカウントなど、自分に必要な情報を更新します

他のジェネレータも同様ですが、
コンフィグは結構、個別テーマに依存した項目になっているので（元のHugoの機能が少ない）別テーマでは使えないかもしれない点は注意です

ブログ投稿

contentの 下に postディレクトリを作り、ブログ更新するMDファイルを置きます

C:\Users\haruk\Dropbox\sites\Blog\content\post

わたしの場合、hyde-x が post の下、という仕様だったからであって
他のテンプレでは違うかもしれません
とにかく、ここの post の下に、以下のマークダウンファイルを用意します

<20150909-HugoInstallAndTheme.md>

+++
date = "2015-09-09T01:11:00+09:00"
draft = false
title = "[Hugo]Hugoブログ構築メモ-WindowsインストールとHugoテンプレート"
categories = ["Hugo"]

+++

Windows10のノートPCに [Hugo](http://gohugo.io/) というスタティックジェネレーターをインストールして、このブログを構築しています  
...（以下略）

ルート C:\Users\haruk\Dropbox\sites\Blog\　に移動し、Hugoコマンドを実行します

C:\Users\haruk\Dropbox\sites\Blog\themes>cd ..

C:\Users\haruk\Dropbox\sites\Blog>c:\Library\Hugo\bin\hugo.exe server -w
0 draft content
0 future content
5 pages created
1 paginator pages created
5 categories created
in 201 ms
Watching for changes in C:\Users\haruk\Dropbox\sites\Blog/{data,content,layouts,static,themes\hyde-x}
Serving pages from C:\Users\haruk\Dropbox\sites\Blog\public
Web Server is available at http://127.0.0.1:1313/
Press Ctrl+C to stop

ブラウザで http://127.0.0.1:1313/ にアクセスすると、サイトが出来ています
実際には、public 以下にHTMLがジェネレートされているので、public以下を自分の GitHub の gh-pages ブランチにアップすると、自前ブログの完成(^^)

これも余談ですが、CNAMEファイルを置くと、独自ドメインが使えますね　　 （これ、ファイル名が大文字じゃないとダメでした）

簡単に構築は出来たが…

ここまでだと結構簡単にできますが、ここから先は、自分で頑張るしかない部分です…

何がって？
結局最初に諦めた、デザインのことと
CMSに当たり前にあって、Hugoには無い機能を、実装していく必要があります

今のこのブログは、先ほどの hyde-x テンプレートを改変しまくっています
とはいえ、トライ＆エラーの繰り返しだったので、解説まではできないかも…
テンプレートやHugo本体の解説は、また気が向いたときにするということで許してください

それよりは次回は、CIツールである wercker の設定をメモします
（次へ続く）