アウトプットの量にも拘ってみたい〜

大体いつも、自分が「ちゃんとできること増えてるかな〜」とか「強くなっているかな〜」みたいなのを振り返ると絶望的な気持ちになるのだけど、「いやいや・・もっと色々とやってません・・でしたっけ・・・」みたいな。
そのため、「こういうコトしました!」みたいなのを纏めておきたいな〜と思った。

daisuki.nichiyoubi.land

ずっとやろうやろうと思っていて、えいっ!ってやった次第。
そうか、もっとcakeにはPR送っていると思ったぜ・・・と感じる。
昨年中、ふとしたタイミングで「外部から見たときに自分がどんなことしているかって、可視化する気概が無いと何も語られないものだなぁ〜」と気づいた事があり。それからずっと、「やったほうが良いな」と思っていたこと。
もっと強いエンジニアなら、「github.comを見てみな!全部おいてあるぜ!!」だと思うのだけど。そこまで行っていないので・・

自分の owned なものは、さほど言及しなくてもいいと思い、

  • 他者のOSSへのPRやらContribution
  • 会社のブログやOSS

あたりかな?という感じ。
逆に、前のエントリーで触れているpet project系の話だったり、qiitaへの投稿だったりは、それはそれで良いか〜、と思う。

もっと社会貢献できると良いですね。

個人的なお勉強プロジェクトを作ってサイトを公開!してみる

サイトを作る

daisuki.nichiyoubi.land

「色々といんたーねっとに発信していきたいな〜」と思っている流れがずっとあるので、 pet project を作るぞ!!という流れで、
とりあえず「CakePHPについては、仕事で色々とググっているので、思ったこととかメモっておく場があるとスッキリしそう〜」という流れです。

ところで #phpgenba の「自分のサービスを作る」は良かった。

php-genba.shin1x1.com

とりあえず作ってみ!!って自分に言い聞かせる事は必要に思う・・・

作ってみるぞ

手軽にサイトを、ってことで。
github pages使ったことなかったからそれで〜〜っていうとこまでは思った、というよりも
github pages使ったことないから何かしたいな」「Cakeなら定常的にインプットあるからそれ絡めるか」です。

作るぞ〜、作らねぇとな〜って思っていた矢先にmoongiftからこんな記事が流れてきて

www.moongift.jp

よっしゃ使ってみよ!という流れ。

こうなるといいな

  • 見た目的なところは、最低限整っていればOK
  • 「気軽に更新できること」に重きを置きたい
    • ページ(リンク)の追加は勝手にできたら嬉しい
    • ディレクトリ構造がそのままサイト上のページ構造になって、ディレクトリ配下のページが勝手に一覧される〜とかなれば最高に素敵なんだけど
  • サイトの更新も自動でやってほしい
    • CI回してmaster にマージされたら自動でデプロイされてほしい

ここまで出来ると最高。

作業メモ

調べたら qiita.com を見つけたので、元々「お勉強サイト」用に作ってあったレポジトリをクローンしてきて

f:id:o0h:20180210215042p:plain

私のローカルホストが2分でこんな姿に・・・ まだ「Docusaurusuってどんなことができるの?」て話しすら、してないのに・・・いわば自己紹介すらまだ住んでない状態なのに・・・

めっちゃすごいですね。良い時代だ。
ヘッダー 出来上がったディレクトリとかファイルとか見てみると、ページが入ってるのが docs blogの2箇所かな。 でsiteConfig.js` を見てみると、

headerLinks: [
  {doc: 'doc1', label: 'Docs'},
  {doc: 'doc4', label: 'API'},
  {page: 'help', label: 'Help'},
  {blog: true, label: 'Blog'},
],

となっていて、 docs ディレクトリと website/blog ディレクトリがあるので、この辺りが関係してそう

$ ls -l blog
total 40
-rwxr-xr-x  1 hkinjyo  staff  3293  2 10 21:40 2016-03-11-blog-post.md
-rw-r--r--  1 hkinjyo  staff  3296  2 10 21:40 2017-04-10-blog-post-two.md
-rw-r--r--  1 hkinjyo  staff   475  2 10 21:40 2017-09-25-testing-rss.md
-rw-r--r--  1 hkinjyo  staff   180  2 10 21:40 2017-09-26-adding-rss.md
-rw-r--r--  1 hkinjyo  staff   197  2 10 21:40 2017-10-24-new-version-1.0.0.md

とのことで、

f:id:o0h:20180210223724p:plain

とのことなので、 blog:true になっていると、そのディレクトリの下に追加されたページがサイドバーに出るのかな。 良さそう〜。
これを使えば「ページの自動追加」もできるかな。
ディレクトリ構造もそのまま反映してくれないだろうか、と思って website/blog/hoge/test.md みたいなの作ったらエラー出たw

そろそろリファレンス見てみる

「どういう機能があるの」をまともに見ていなかったので、そろそろ見てみる。
「siteConfigの内容を掘れば良さそうかな〜」と思ったので。

docusaurus.io

f:id:o0h:20180210225243p:plain

  • doc: .md ファイルの表示
  • page: (jsで)任意のページ
  • blog: /blog 以下に置かれた .md ファイルでの「ブログ」機能

みたいな感じかなぁ。

customDocsPath っていう設定項目もあるから、 /docs の位置については変更できるみたい。
ん〜、「カテゴリごとに自動追加」は難しいのかもなぁ。

Create Your Basic Site を見ると、各docに id という概念を持たせられるみたい。
docs ディレクトリも、そのままだと複階層にするのは無理かな?

実ファイルの配置ってよりもリンクの見え方どうなるかなーていう方が関心事として大きく、サイドバーがだいぶ大事になってくると思うので見てみる。

docusaurus.io

ホワイトリスト式でdoc-idを列挙して、「自分が属するサイドバーがあればそれを表示する」ってか感じかー。

{
     "category-name": {
        "sub-category-name": ["doc-id1", "doc-id2"]
    }
     "category2-name": {
        "sub-category-name": ["other-doc-id1", "other-doc-id2"],
        "sub-category-2-name": ["other-doc-id3"],
    }
}

そうすると、 doc/doc-id1.html を開いたときにはサイドバーには doc-id1 doc-id2 が表示されるし、 other-doc-id3 の時は other-doc-id1 other-doc-id2 other-doc-id3 が表示されるし・・みたいな塩梅っぽい。

  • 命名規則を持たせたファイル名/doc-idを配置する
  • sidebarからのリンクを更新していく
    • カテゴリのdocへのリンク一覧を表示

っていう感じになるかな。

- hoge_index.md
- hoge_1.md
- hoge_sub_1.md
- fuga_index.md
- fuga_1.md
- fuga_2.md

とかしていけば、一覧性もそんな悪くないでしょっていう気がする。

sidebars.json

公開の自動化を・・

Publishing your site · Docusaurus です。

  1. Circle CIのアカウントを作ってPJを作成
  2. https://github.com/settings/tokens/newrepo スコープのトークンを作成
  3. CI側、レポジトリのeditを開いてサイドバーからEnvironment variablesを探して
    • GITHUB_TOKEN を追加
  4. circle.yml のセット
    • あとでversionかえよう・・
  5. github-pagesに対応するようにsiteConfigをいじる必要がある
    • clone元のレポジトリを編集
    • /test-site/ ではなくルートディレクトリになると思うので、baseUrlの編集
circleci.yml

https://github.com/o0h/cakephp3-with-me/commit/6525b47b72fc92bb51ecf6067a98a43ad001cc84

machine:
  node:
    version: 6.11.2
    npm:
      version: 3.10.10
deployment:
  website:
    branch: master
    commands:
      - git config --global user.email "o0h@users.noreply.github.com"
      - git config --global user.name "Hideki Kinjyo"
      - echo "machine github.com login o0h password $GITHUB_TOKEN" > ~/.netrc
      - cd website && npm install && GIT_USER=o0h npm run publish-gh-pages
website/siteConfig.js

https://github.com/o0h/cakephp3-with-me/commit/e1421fd85ec9ae9113e8c61cbe5786dc2d6fb543

diff --git a/website/siteConfig.js b/website/siteConfig.js
index 5c29ab9..76262d8 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -9,7 +9,7 @@
 const users = [
   {
     caption: 'User1',
-    image: '/test-site/img/docusaurus.svg',
+    image: '/img/docusaurus.svg',
     infoLink: 'https://www.facebook.com',
     pinned: true,
   },
@@ -18,9 +18,9 @@ const users = [
 const siteConfig = {
   title: 'Test Site' /* title for your website */,
   tagline: 'A website for testing',
-  url: 'https://facebook.github.io' /* your website url */,
-  baseUrl: '/test-site/' /* base url for your project */,
-  projectName: 'test-site',
+  url: 'https://cake.nichiyoubi.land' /* your website url */,
+  baseUrl: '/' /* base url for your project */,
+  projectName: 'cakephp3-with-me',
   headerLinks: [
     {doc: 'doc1', label: 'Docs'},
     {doc: 'doc4', label: 'API'},
@@ -50,7 +50,7 @@ const siteConfig = {
   },
   scripts: ['https://buttons.github.io/buttons.js'],
   // You may provide arbitrary config keys to be used as needed by your template.
-  repoUrl: 'https://github.com/facebook/test-site',
+  repoUrl: 'https://github.com/o0h/cakephp3-with-me',
 };

 module.exports = siteConfig;

GitHubの設定も

  1. github pagesの有効化
  2. (defaultのまま)gh-pagesを使うようにする
  3. (サブドメインもあてました)
    • nichiyoubi.land ドメインcakeo0h.githun.io. へのCNAME

f:id:o0h:20180211014422p:plain

基盤と基礎的な構想だけはこれで出来た!

リンクの自動化・・・までは叶わなかったけど、サイドバーを最低限更新すればOKって事なので許容範囲かな〜って感じで。
すげー更新が大変だ!!ってなったら、自分でスクリプト書く〜とかでどうにかなりそうだし。
Docusaurus + Circle CI、とりあえずの選択肢としては手軽に使えそうで良いのじゃないかな〜

UbuntuにUpsourceをインストールした際のメモ

EC2を借りてUpsoruceを立てたので、その時のメモ。

参考記事

ココらへんが元ネタ

構成は

  • インスタンスはt4.large / m4.largeをスポットリクエストで借りてる
  • ubuntu
  • HTTPとSSHできるようにポート開けておく
  • Uposourceをport8080で立てて
  • 表側にnginxを起き、 80 -> 8080でリバプロ

install

Install nginx

sudo apt-get install -y nginx

リバースプロキシとか

参考: nginx(1.3.13) のリバースプロキシでNode.jsとSocket.IO for Android(weberknecht)をつないでみる - Qiita

server {
    listen 80 default_server;
    listen [::]:80 default_server;

        access_log /var/log/nginx/access_log combined;
        error_log  /var/log/nginx/error_log  error;

    location / {
           proxy_set_header Host $http_host;
           proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
                proxy_pass http://localhost:8080;
        }
}

web socket使っているので、 ヘッダー周り注意

instal Upsource

download upsrouce

https://www.jetbrains.com/upsource/download/

ここからLinux用のページ開くと「direct link」あるので、それをコピって

wget https://download.jetbrains.com/upsource/upsource-version.zip
sudo su
mkdir /usr/local/upsource 
apt-get install unzip

### 初期化

bin/upsource.sh configure --listen-port 8080 --base-url http://<FQDN>

/etc/hostname の値を /etc/hosts127.0.0.1に当てる これをやっておかないと

command [hostname]: hostname: Name or service not known

と言われたり、一部操作でコケる

bin/upsource.sh start

起動するのでブラウザで開く

<URL>:8080

Use build-in hub して進む。 Hubって何?はこちら → Hub: Integration Across Team Collaboration Tools by JetBrains

「コード管理/プロジェクト管理」であるUpsourceに対して、「リソース管理/メンバー管理」のHub。

初期設定

Github設定

右上の「Log in」でログインしてから http://<URL>:8080/hub にアクセス

設定アイコンから「Auth modules」 「New module > Github」 create

Github側にOAuth用のアプリケーションを作る

  • register an application in GitHub. クリック
  • 諸々設定する。
    • Authorization callback URL は、さっきのHubの設定画面に表示されてる Authorization callback URL を使う
  • Registar Application

    作成したアプリケーション情報をHubに登録

  • ↑のアプリのClient ID / Client Secret をコピー
  • Auto-join groupsを適宜設定(問題なければRegistered Users)
  • save
  • 右上「Enable module」

プロジェクト設定

  • グローバルメニュー「Projects」
  • 「New Project」
  • name, keyを設定
  • Create Project

Upsource設定

  • \<URL>に戻る
  • connect to a GitHub project クリック
  • Repository URLを入力(gitのSSHじゃなくて普通のレポジトリURL
  • OAuth Tokenを選択して 「Acquire token」
  • Import pull requests as branches, Synchronize comments and pull requests をチェック
    • use the authentication token で問題ないはず
  • create project

暫く待つ

管理ユーザーにGithubログイン

初期ログインした時のアカウントでGithubログインできるようにする。
GitHubログインのユーザーを作って」「元々のユーザーにマージする」という流れ

  1. logout
  2. login with github
  3. switch userで管理者アカウントでHubにアクセス
  4. hubのUsers で対象アカウントを選択
  5. mergeボタンのクリック

PHPStorm設定

  • Preference > Tools > Upsource > Connection
  • Server URLにを入力
  • Test Connecitonをして接続できたらOK

— お疲れ様でした `

自分がよく使いそうなDockerの構成をgithubで管理していくことにした

以前にこういう記事を書いた。 daisuki.nichiyoubi.land

やってよかったな!と思う反面、gistだと手元に持ってくるときに「まだちょっとなんか不便・・」みたいな気持ちになる。わがままだけども。
結局「前に書いた○○」をコピペしたりもするんだけど、ただそれだと「どのPJが最新だったっけ」とか「どこがドメイン固有の事情だっけ」とかを忘れる。

ってことで、githubで管理していくことにした。 github.com

時間があるときに色々と調べたり調子してコミット〜〜〜ってしていく事で、いい感じにできればな〜と・・
解決したかった問題は3つで、

  1. どこにおいたか忘れる問題
  2. メンテしづらい問題
  3. 手元に持ってきづらい問題

といった辺り。

これで、色々と解消されるといいな〜って気持ちでとりあえず作ってみた系。
もうちょっとちゃんとした or 手が混んできたらDockerhubに入れてもよさそうなのだけど、とはいえdokcer-composeは「秘伝のタレ」部分として管理する必要があるだろうからなぁ。

やったこと・書いたもの{2017}

2017年に投げたPRとか(ここやqiita以外で)書いたブログのまとめ

12月

cakephp/cakephp

cakephp関連プラグイン

会社のブログ

10月

9月

6月


番外