[Google cloud shell x Hexo] 環境構築&記事編集

Google Cloud Shell上にHexo環境を構築した際のメモ

前提

git連携 & リポジトリのclone

  • git configでユーザの情報を登録してから、cloneでデータを持ってくる
    • cloud shellにはgit cliが元から入っているので楽
      1
      2
      3
      git config --global user.name "user-name"
      git config --global user.email "e-mail"
      git clone your repository
  • hexoをinstall
    • cloud shellにはNode.jsが元から入っているのでHexoを入れるだけ
      1
      2
      3
      cd your-repository/your-blog
      npm install -g hexo
      npm install hexo --save

記事のプレビュー表示における注意点

  • Hexo serverでlocalhostを起動する際に、-pでポートを8080に指定する必要があります

    • デフォの4000はcloud shellでは見れないため
      1
      hexo server -p 8080
  • previewは右上のアイコンから開けます
    cloud shell open preview

  • 以上でブラウザでWEBページの画面を確認可能です

Githuにpush時にログイン

  • 以下のようにユーザ名とパスワードの入力求められます
    1
    2
    Username for 'https://github.com': 
    Password for 'https://user-name@github.com':

関連記事

Google Cloud Shell

Hexo

Github

Github Pages x Hexo運用をGithub Actionsで自動化

Github Actionsを用いると、Gitにpushしたタイミングなどで、任意のコマンドを自動で実行させることができます。その機能を活用してGithub Pages x Hexoで生成されたWEBサイトの運用フローを自動化します。

今回自動化したい手順

  • 前提とするWEBサイトを生成するまでは以下の記事を参照して下さい

  • Hexoサイトの更新フロー

    • 記事を生成
      1
      hexo new '記事名'
    • 生成されたmdファイルを編集
    • hexo generateを実行
      • mdファイルからWEB公開用のHTML/JSを自動生成
    • ディレクトリ名を変更
      • Github Pagesはリポジトリ直下に置かれたファイルを読み込みます。そこでHexoディレクトリを読み込むとエラーが出るため、Hexoディレクトリの頭に_を付与して読み込めない状態にします
        1
        mv your-blog _your-blog
    • add/commitしてGitにpush
  • 以下の単純作業は人間がやる必要が無さそうなので自動化を試みます

    • hexo generateの実行
    • ディレクトリ名の変更

実装手順

ディレクトリ名の変更を自動化

まずは練習として、ディレクトリ名の変更だけGithub Actionsで実行させます。

  • Point

    • まずはGitのリポジトリからソースをGithub Actionsの仮想サーバーに持ってくる必要がある
    • Github Actions上でコマンドを実行して編集したソースは、リポジトリにpushで返す必要がある
  • Github PagesのActionsタブを選択

    • set up a workflow yourselfを押下

Github Actions

  • エディターが立ち上がります

Github ACtions Editor

  • 記載例

    • uses: actions/checkout@vでリポジトリの中身にアクセス可能になります
    • 次にgitコマンドを使う為にgit configを実行
    • git mvでHexoディレクトリの名称を変更
    • git add/commit後にpushでリポジトリに変換
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      # workflow name
      name: Hexo x Github Pages CI

      # masterへのpush時に発火する様に定義
      on:
      push:
      branches: [ master ]

      jobs:
      # This workflow contains a single job called "build"
      changeName:
      # The type of runner that the job will run on
      runs-on: ubuntu-latest

      # 1. GitのリポジトリからソースをGithub Actionsに環境に持ってくる
      # Steps represent a sequence of tasks that will be executed as part of the job
      steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      # 2. git mvでディレクトリ名を変更 ⇒ 変更したソースをGitに返す
      # Runs a single command using the runners shell
      - name: change directory name & return for git
      run: |
      git config user.name "<git-user-name>"
      git config user.email "<git-user-e-mail>"
      git remote set-url origin https://:${{ secrets.GITHUB_PASS }}@github.com/<organization-name>/<your-repository-name>
      git mv your-blog _your-blog
      git add *
      git commit -m "Change directory name!"
      git push origin master
  • 記載後に”start commit”を押下

    • workflowを定義したymlファイルが生成されます
  • 一旦ローカルに反映

    1
    git pull
  • 以後masterにpushする度にworkflowが自動で実行されます

  • Actionsタブから確認出来る実行結果にチェックマークがついていれば成功です

actions result

  • 今回は分かり易く、Github Actionsタブから編集しましたが、ローカルリポジトリでymlファイルを生成してリモートにpushしてもOK

Github Actionsでworkflowを開発する際のデバッグ

  • Actionsタブのjob名から実行結果を確認出来ます

    • ここに出ているのは、Github Actionsで立ち上がった仮想サーバーの中のできごとです
      • GithubをMicrosoftが買収したこともあって、裏はAzureの仮想サーバー(Linux)です
    • Github Actionsの中でgitコマンドを実行させようとしていますが、アカウント名などを設定できていないために失敗しており、git configも実行させないとダメそうだ、と分かります

Debug workflow

hexo generateを自動化

次に、先ほどのテンプレートに、Generateを実行するくだりも追加します。Hexoコマンドを

  • Point

    • Hexoコマンドを実行するためには、先にNode.jsの環境構築が必要
      • Github Actionsで立ち上がる仮想サーバーは、毎回まっさらな何も入っていないLinuxです
  • 公開アクションの検討

    • Github actions marketplace hexo
    • こちらの公開アクションも使ってみたのですが、バージョンの問題か失敗しました。今回は簡単なので自前で作ります。
  • 以下のworkflowでhexo generateも自動化できました

    • remote set-url以降で自分のリポジトリを指定する箇所だけ読み替えて利用してください
  • hexo_cicd.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    # workflow name
    name: Hexo x Github Pages CI

    # master push時に発火
    on:
    push:
    branches: [ master ]

    jobs:
    # This workflow contains a single job called "build"
    changeName:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # 1. GitのリポジトリからソースをGithub Actionsに環境に持ってくる
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
    - uses: actions/checkout@v2

    # 2. 公開アクションでNode.js動作環境を構築
    - name: Setup Node.js environment
    uses: actions/setup-node@v1.4.2

    # 3. Hexoディレクトリでhexo gを実行
    - name: use hexo
    run: |
    cd your-blog
    npm install
    npm install -g hexo
    hexo g
    cd ..

    # 4. git mvでディレクトリ名を変更 ⇒ 変更したソースをGitに返す
    # Runs a single command using the runners
    - name: change directory name & return for git
    run: |
    git config user.name "<git-user-name>"
    git config user.email "<git-user-e-mail>"
    git remote set-url origin https://:${{ secrets.GITHUB_PASS }}@github.com/XXXXXXXX/XXXXXXXX.github.io
    git mv your-blog _your-blog
    git add *
    git commit -m "Generate & Change directory name!"
    git push origin master

リポジトリにパスワードを埋め込む

私の環境では不要でした。

  • リポジトリのセキュリティ制約が厳しい場合
    • Github Actionsの仮想サーバー上からリポジトリと通信するには、gitのパスワードが必要になります。workflowに直接書き込んでしまうと、Public Repositoryなら誰でも見れてしまうので、Settingsに登録して参照させます

image

  • 参照方法
    • github actionsのworkflowに以下のように書けば値を引っ張れます
      1
      ${{ secrets.GITHUB_PASS }}

関連記事

参考

Hexo 共有機能のPlugin Add Thisで動的なシェアボタンを追加

Hexoで生成したWEBサイトに共有機能を追加する手法を解説します。今回はAdd ThisというPluginで動的なシェアボタンを追加します。WEBアプリにも適用できるので覚えておくと便利です。HexoとGithub PagesでWEBサイトを作る方法はこちら

Add This

  • Add This
    • WEBページにコンテンツを追加するフリーのサービス
      • ex. シェアボタン,
    • サイトでポチポチ押しながらデザインを決めると、自動でソースを作ってくれるNo Codeっぽいサービスです

Add This

  • 注意点
    • 上記のサービスで生成した共有ボタンは、Adブロックサービスでブロックされる可能性があります

手順

Account設定

  • AddThisにアクセス

  • Make it Shareableより”Get Started”を押下
    image

  • Sign In

    • 今回はGoogleアカウントを利用します

Sign In

  • Create Account
    • Email AddressとCountryを設定
    • Registerを押下

Create Account

  • アカウントの設定画面が開きます
    image

シェアボタンを作成

  • 上部タブのTools⇒ADD NEW TOOLを選択
    • Share Buttonsを押下

Select a Tool

  • 用意されたデザインから追加したいシェアボタンをタイプを選択

    • PCとMobileでそれぞれどのように表示されるか確認可能です
  • Inline
    Inline

  • Floating
    Floating

  • Expanding

    • カーソルを合わせるとにゅっと出てくる

Expanding

今回はExpandingを使ってみます

  • Continueを押下

  • カスタマイズを行いActivateToolを押下

  • TutorialとCodeが表示されます
    Get The Code

  • 各記事のHTMLに以下を貼れば反映されるとのこと

    • Hexoの場合は設定ファイルに以下のsrc=以降のURLを規定するだけで全ページに反映してくれました
      1
      2
      <!-- Go to www.addthis.com/dashboard to customize your tools -->
      <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5ee8d1fc16b460fb"></script>
  • 設定ファイルを変更

    • Hexoディレクトリ直下の_config.ymlではなく、テーマディレクトリの_config.ymlに設定します
      1
      \your-blog\themes\your-theme\_config.yml
  • _config.ymlのshare欄に設定

    1
    2
    3
    4
    5
    6
    # Share plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
    share:
    # Share plugin name
    type: addthis
    install_url: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-XXXXXXXXXXXXXX

以上で設定は完了

関連記事

参考

[Hexo] URLのリダイレクト (hexo-generator-alias/hexo-generator-redirect])

Hexoで生成したWEBページのURLリダイレクトの設定方法とプラグインについて解説します。

リダイレクトが必要となる理由

Hexoで生成したWEBページのURLはファイル名や設定を弄るだけで簡単に変更できますが、以下の問題が発生します

  • Googleから重複記事とみなされる
    • 以前のURLでSEO一位でもそのままでは引き継げません
  • 古いURLのリンク元から辿ると404 Not Foundになってしまう
    Github pages Not Found

上記の対策として、Google等の検索エンジンにURLの変更を伝え、ページへ誘導する仕組みを作る(リダイレクト設定をする)必要があります

リダイレクト設定方法

手動で頑張るのもありですが、Hexoの場合は以下のプラグインを入れれば解決できます

両方試したので、それぞれ解説します。

リダイレクト設定手順 hexo-generator-alias

プラグインをinstall

1
npm install hexo-generator-alias --save-dev

リダイレクトの設定方法

  • 各記事のymlファイルに宣言
  • 設定ファイル(_config.yml)に宣言

各記事のファイルでリダイレクトを宣言

  • Hexoの各記事のymlファイルの頭についている—で囲まれた設定欄(Front-matter)に alias: を足します
    1
    2
    3
    ---
    alias: 旧url/
    ---

設定例

  • 以下の記事が前URLでSEO一位になっていたので、リダイレクトしてみます
1
2
3
4
5
6
7
8
9
10
11
12
---
title: '[オンライン飲み会向け] Netflix Partyでリモート鑑賞会をする方法'
date: 2020-04-08 22:36:09
category:
- Tool Tips
- Chrome 拡張機能
tag:
- Google Chrome
- Netflix Party
toc: true
alias: /2020/04/08/オンライン飲み向け-Netflix-Partyでリモート鑑賞会をする方法/
---
  • 本番環境にデプロイして、実際に検索欄から見てみます
    • 以下のように前のURL(日付入り)が出てきますが、開くと新しいURLにリダイレクトされました
    • 一瞬、リダイレクト用のページで”移動しました”と表示してからリダイレクトされる仕様はちょっと微妙な気もします

image

  • 新しいURLにRedirectされました

image

リダイレクト設定手順 hexo-generator-redirect

プラグインをinstall

  • hexo-generator-redirectをinstall
    1
    your-blog> npm install hexo-generator-redirect --save-dev

各記事のファイルで宣言

  • Hexoの各記事のymlファイルの頭についている—で囲まれたFront-matter(設定欄)にredirect_fromを足すだけです
1
2
3
4
5
---
redirect_from:
- /old-url1
- /old-url2
---

  • 以下の記事が前URLでSEO一位になっていたので、リダイレクトしてみます
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ---
    title: '[オンライン飲み会向け] Netflix Partyでリモート鑑賞会をする方法'
    date: 2020-04-08 22:36:09
    category:
    - Tool Tips
    - Chrome 拡張機能
    tag:
    - Google Chrome
    - Netflix Party
    toc: true
    redirect_from:
    - /2020/04/08/オンライン飲み向け-Netflix-Partyでリモート鑑賞会をする方法
    ---

テンプレートの作成

  • テーマのlayoutの中に redirect.ejs を作成します

    • パス
      1
      your-blog\themes\icarus\layout>
  • redirect.ejsを編集

    • 公式の説明に合った例
      1
      2
      3
      4
      5
      6
      7
      8
      <% const newUrl = full_url_for(page.target.path) %>

      <h1>Page address was changed</h1>
      <p>The new page address is <a href="<%= newUrl %>"><%= newUrl %></a></p>

      <script type="text/javascript">
      setTimeout(function(){ document.location.href = '<%= newUrl %>'; }, 5000);
      </script>
  • Hexo gの実行時にリダイレクト様のHTMLが生成されていることを確認可能

1
2
3
4
hexo g

(略)
INFO Generated: 2020/04/08/オンライン飲み向け-Netflix-Partyでリモート鑑賞会をする方法/index.html
  • 本番環境にデプロイして、実際に検索欄から見てみます
    • 以下のように前のURL(日付入り)が出てきますが、開くと新しいURLにリダイレクトされました
    • 一瞬、リダイレクト用のページで”移動しました”と表示してからリダイレクトされる仕様はちょっと微妙な気もします

image

  • 新しいURLにRedirectされました

image

参考

[Hexo] 記事のURLを変更

  • 変更方法

    • Hexoディレクトリ直下の設定ファイル(_config.yml)のpermalinkを変更するだけです
  • デフォルト

    • 年月日が入って長ったらしい
      1
      permalink: :year/:month/:day/:title/
  • ここを変更します

    • site-url/:title
      1
      permalink: :title/
    • site-url/:category/:title/
      1
      permalink: :category/:title/
  • URLの変化を確認

    1
    hexo server
    • 本番環境ではlocalhostがsite-urlに変わります
  • URLはWEBページのSEOに影響するので短めにしましょう

  • URLを変更したらリダイレクトの設定も一緒に行いましょう。Google検索でも古い方のURLが出てしまうためです。

[Hexo x Github Pages] 5分以内にブログを自動生成して無料で公開するまで【完全版】

こんにちは。今回は静的WEBサイトジェネレータのHexoを用いたWEBページの自動生成手法と、Github Pagesを用いた公開手法について解説します。”3分でできる”等という触れ込みを見て始めたのですが、当時素人だった私は相当ハマり諦めました…。初級者向けに説明が欠けている所を重点的にまとめようと思います。

昨今はWord PressやNote等のサービスを使って記事を書く方が多いと思いますが、自由度が低く、クオリティを追求すると有料になってしまう事が多いです。

今回の手法であれば、運用費を1円もかけず、ソースコードを完全に自由にいじれます。エンジニア界隈で流行っている手法ですが、素人や学生でも使えるレベルです。GithubやWEBの基礎の勉強にもなるので、是非挑戦してみてください。

ざっくりのイメージ(まだ分からなくてOKです)

About Github Pages

1. 関連技術概要

  • 早く進めたい人は手順に飛んでOKです

1.1. Hexo

  • 静的WEBサイトジェネレータ

    • 静的WEBサイト
      • HTML + CSS + JavaScriptで構成されるWEBページ
    • 上記をコマンド一つで自動生成するツールです
    • Markdown形式のファイルを自動的にビジュアライズして表示可能
      • Markdownとは文章を簡単に記述するための記法です
        • ハイフンで箇条書きを表現したり、#で見出しの文字を表現したりできます
          • HTMLで書くよりはるかに簡単なので覚えましょう
          • 慣れれば普段のメモもこの記法が楽です
  • テーマが300種類近くあります

    • Hexo Theme
      • ブログや企業サイト、デザイナーのポートフォリオ等、なんでも作れます
    • Themeの変更方法やカスタマイズ方法は他の記事で解説しているので、ページ作成後にご覧ください
Hexo Theme

1.2. Github Pages

  • GitHub(バージョン管理ツール)が提供しているホスティングサービス

    • 静的なWEBページを公開可能
    • 運用費は無料
    • 一定数のリクエストを超えると落ちてしまう制限がある
      • 10万PV以上/月
        • 初めは無視してOKです
  • Githubの知識があれば学習コスト0で利用可能

    • Githubとは
      • 簡単に言うと、ソースコードを置いておく場所です
      • 開発に必須とも言えるツールであるため、覚えておくに越したことはないです
      • Github Pagesが優れている点は、このソースの置き場所でそのまま公開できる手軽さにあります
  • Github Pagesで生成可能なページの種類

      1. ユーザーページ(https://ユーザー名.github.io)
        • Githubユーザ名のrepository(名前固定)で公開
        • Githubユーザ1名につき、1つまで
        • Point
          • Organization(組織)のリポジトリである場合は上記の”ユーザ名”を”Organiztation名”に読み替えて利用できます
            • つまりOrganizationを量産すれば、その数だけユーザページを作成可能です
      1. プロジェクトページ(https://ユーザー名.github.io/リポジトリ名/)
        • repositoryを作成すれば、無制限にサイトを作成可能
  • Angularで開発したSingle Page Applicationのホスティングも可能

    • WEBアプリの公開にも使えます
      • 10万PVで落ちるという制約があるため、ビジネスの現場ではそこまで使われません
      • 個人で開発したものや、開発途中のものを公開するにはとても便利です
    • Angularの解説は以下にまとめてます
    • フロントエンドのスキルを深めていくのであれば、次のStepとしてAngularによるWEB AP開発に取り組むのが良いと思います。書籍等で勉強してみてください(おすすめ
  • Markdownやasciidoc形式のファイルをそのままおいて、ビジュアライズ表示も可能

    • push直後には失敗していた。数分後に確認したところ、確認できた。
    • 編集内容の反映までに初めはリードタイムが必要

2. 手順

  • 初級者向けに環境構築から書きます

2.1. 前提/環境構築

2.2. github pagesの公開

  • 準備

    • ユーザ直下に作成する場合
      • 特になし
    • Organizationで作成する場合
      • Organization名がユーザ名の代わりになります
      • URLにそのままなるので、作りたいWEBページに合わせて決めましょう
  • repositoryを作成

    • 以下のように名称を設定すると中においた静的ソースコードがWEBページとして公開される
      • user-name.github.io
    • 今回のrepository名
      • user-name.github.io
  • 最終的に以下のURLで表示されます

Markdownファイルをおいてみる

2.3. 静的サイトジェネレーターを利用してサイトをビジュアライズ

  • 作成したgithub pagesのrepository配下にhexoを入れます

  • Hexoをインストール

    • この時点でエラーが出たらNode.jsのバージョンを確認してください
      1
      $ npm install -g hexo
  • Hexoでプロジェクトを作成

    1
    $ hexo init your-blog
  • hexoで起動して、ページを確認

    1
    2
    $ cd your-blog
    $ hexo server
  • Localhostで以下の画面を確認

    • 環境構築が事前に済んでいたので、ここまで3分程度
Hexo Default
  • ポイント

    • README.mdは干渉するので削除
    • まだgitにLocalで作ったブログをpushしてもWEBサイトには出ません
      • ここでハマったので詳しく解説していきます
  • generate

    • HTMLをpublicフォルダ内に生成するコマンド
      1
      hexo generate
  • publicというディレクトリが作られ、配下に以下が生成される

    • \user-name.github.io\your-blog\public
1
2
3
4
5
6
7
8
Mode                LastWriteTime         Length Name
---- ------------- ------ ----
d----- 2019/11/26 19:03 2019
d----- 2019/11/26 19:03 archives
d----- 2019/11/26 19:03 css
d----- 2019/11/26 19:03 fancybox
d----- 2019/11/26 19:03 js
-a---- 2019/11/26 19:03 6589 index.html
  • 以下でindex.htmlを確認しましょう
    • file:///D:/user-name.github.io/your-blog/public/index.html

Trouble Shooting

  • ここでpushをすると、以下のエラーに悩まされます
    • ググっても関係のない対処法ばかり出て初級者は詰むと思います
    • 私もSSH鍵の設定を確認したりだいぶ迷走しました
Hexo Default
1
2
GitHub Pages failed to build your site.
The value '{}' was passed to a date-related filter that expects valid dates in /_layouts/default.html or one of its layouts.

回避策

  • エラーの原因

    • Github pagesはリポジトリ内のルートディレクトリを読み込もうとする
    • HEXOでgenerateされたWEBページはpublicディレクトリにある
      • 読み込めずにエラーが出ている
    • generateされたファイルがrepository直下におかれるように設定を編集
      • hexoディレクトリ直下の設定ファイルを編集することでできました
  • _config.ymlを編集

    1
    2
    旧:public_dir: public
    新:public_dir: ../
  • 上記の状態でgenerateコマンドを打つと、public配下に生成されていたファイル群が、repository直下に生成される

1
2
3
4
5
6
7
8
9
10
11
    ディレクトリ: D:\user-name.github.io

Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2019/11/26 21:36 2019
d----- 2019/11/26 21:36 archives
d----- 2019/11/26 21:36 css
d----- 2019/11/26 21:36 fancybox
d----- 2019/11/24 13:00 your-blog
d----- 2019/11/26 21:36 js
-a---- 2019/11/26 21:36 6834 index.html
  • your-blog(ソースファイル)をgithub pagesが読み込んでエラーを起こさないように名称を変更

    • 余計なディレクトリがあるとGithub PagesはWEBページを表示できません
      • 初級者は個々でもはまると思います
    • 元々のHexoディレクトリを_で読み込めなくするだけでOKです
      1
      PS D:\user-name.github.io> mv your-blog _your-blog
  • ここまでやってからpush

  • WEBブラウザでページの生成を確認

    1
    https://user-name.github.io/

2.4. 新しい記事を追加

  • hexo new ‘記事名’
    • 概要ページを作ってみましょう
1
2
PS D:\user-name.github.io\your-blog> hexo new "about-mob"
INFO Created: D:\user-name.github.io\your-blog\source\_posts\about-mob.md
  • source/_posts/<記事名>.mdが生成

  • localhostでチェック

    1
    2
    3
    PS D:\user-name.github.io\your-blog\source\_posts> hexo server
    INFO Start processing
    INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
  • 記事が増えている

image

  • 生成されたMarkdownファイルを確認
1
2
3
4
5
6
PS D:\user-name.github.io\your-blog\source\_posts> ls

Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2019/11/26 20:51 57 about-mob.md
-a---- 2019/11/26 18:42 838 hello-world.md
  • abouto_mob.mdを編集
  • 編集内容がLocal内で反映されていることを確認

2.5. 下書き記事を追加

1
hexo new draft "article-name"
  • 下書きディレクトリ source/_drafts にmdファイルが生成される
  • 本番環境やhexo serverでは表示されない
    • 表示したい時は以下で–draftsを付ける
      1
      hexo server --drafts

2.6. 固定ページを追加

1
$ hexo new page "dir-name"
  • source/“dir-name2/index.md が生成される

まとめ

  • 以上で解説は終了です
  • 以下ができる状態になったと思います
    • 静的サイトジェネレーターでWEBサイトを自動生成
    • 静的WEBサイトホスティングで公開

Hexoサイトのカスタマイズ

Hexoサイト運用の自動化

Hexoにコメント欄を追加(Disqus)

こんにちは。今回はHexoで生成したWEBサイトにコメント欄を追加する手法について解説します。他の説明記事がどれも間違っていて(恐らくバージョンの問題)だいぶハマったのでまとめておきます。

1. Disqusとは

  • Disqus
    • コメント機能を拡張するサービス
    • 様々なPlatformに対してプラグインを提供
      • HexoのthemeはDisqusの活用を前提としたものが多く、簡単に導入可能です
      • ※ themeに対して設定する為、選定後の対処をお勧めします
    • 無料で利用を開始可能です

2. 導入手順

2.1. Disqusに登録

  • DisqusのSignupを実施

    • Twitter, FB, Googleアカウントの何れかを利用可能です
    • 私はGoogleアカウントを利用しました
    • 認証後にSignupを押下
  • “I want to install Disqus on my install”を選択

  • Create a new Site

    • 以下の欄を入力
      • Website Name
      • Category
    • CreateSiteを選択
  • 以下の順に選択

    • “Got it. Let’s get started!”
    • “I don’t see my platform listed, install manually with Universal Code”
  • 以上でDisqusのサイト用ページが作成されました

2.2. Disqus設定

  • 以下が設定ページです
  • Installation

    • Comment機能非対応のthemeの場合はこちらのスクリプトをサイトに貼り付けましょう
      • Hexoデフォルトのlandscapeであれば必要
        • 該当のejsとプレフィックスにつくファイルを編集してください
        • ファイル所在(landscapeの例)
          1
          Your-blog\theme\Your-Theme\layout\_partial
    • 本サイトに採用しているicarusであれば、この工程はスルーしてOK
  • “Configure”を押下

  • URLを入力

  • “Complete Setup”を押下

  • 上部のSettingタブを選択

  • 左のリストのGeneralを選択

    • “shortname”の値を控える
      • 後でhexoに設定します
    • 各項目に入力して”Save”を押下
  • 以上でDisqus側の設置は完了です
    • 細かく設定可能なので

2.3. Hexoに設定

  • shortnameをtheme側の_config.ymlに記述

    • 元の状態
      1
      2
      3
      comment:
      # Name of the comment plugin
      type:
  • 改修

    • typeにdisqusを設定
    • shortnameにdisqusで定義された値を設定
      1
      2
      3
      comment:
      type: disqus
      shortname: <from_disqus>
  • Comment機能があるthemeの場合は以上でOK(icarus等)

    • 以下のディレクトリがあるかで判断してください
      • Your-Blog\themes\Your-Theme\layout\comment

Trouble Shooting

  • ※Comment機能がないthemeの場合(デフォルトのLandscape等)の対応も載せておきます

      1. Hexo側の設定ファイルの改修も必要です
        • Your-Blog/_config.yml
          1
          2
          # disqus
          disqus_shortname: https-j-xaas-github-io
      1. Disqus/Setting/Installationで表示されるScriptを該当するejsファイルにコピペしてください
        • ejsファイルとは?
          • Tour-Blog/theme/Your-Theme/layoutの配下にあります
          • 例えばheader.ejsはHexoで各記事をgenerateする際に共通の設定を与えてくれるファイルです
          • つまり、headerに共通して与えたいスクリプトがあれば、ここにコピペするだけでOKです
  • ※旧バージョンの場合

    • 他の記事はどれも以下のように設定するよう書かれていましたがエラーになります
      1
      2
      3
      comment:
      disqus: [shortname]
      duoshuo: [shortname]
    • comment機能の設定ファイルを探して確認
      • 以下にありました
        • j-blog\themes\icarus\layout\comment\disqus.ejs
      • ”comment.shortname”とあることから、設定ファイルのcommentのshortnameの値を参照していることが分かります
        • themeによって特殊な設定が必要なケースも予想されるため、同じように確認してみてください
          1
          2
          3
          4
          5
          6
          (function() {
          var d = document, s = d.createElement('script');
          s.src = '//' + '<%= get_config('comment.shortname') %>' + '.disqus.com/embed.js';
          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
          })();

3. 利用テスト

3.1. Localでチェック

  • 画面への反映をチェックしましょう
    1
    hexo server
  • 記事の下部にコメント欄を確認できます
    • 仕様はDisqusのSettingで細かく変更可能です
comment_example
  • コメントの投稿は本番環境でないとエラーになります

  • generate

    1
    hexo generate
  • 本番環境へデプロイ

3.2. 投稿

  • WEBから実際にコメントを投稿してみましょう
  • ”ログイン”よりGoogleアカウントでログイン
    • Disqusのアカウント登録に利用したアカウントを用いれば、管理者のコメントとして認識されます
comment_example
  • コメントを投稿してみましょう
    • 投稿者名の横に”管理者”が表示されます
      • Googleアカウントが実名なので、Twitterで登録しておけばよかったかも…
comment_example

3.3. アカウント登録

  • 記事の訪問者をイメージして、Twitterアカウントで試してみます
    • 事前に管理者アカウントから”ログアウト”しておきます
  • 投稿欄の下のTwitterマークを選択
    • 認証画面に飛びます
  • アカウント設定

    • 各入力項目を埋めて”Sign Up”を押下
      Disqus_Twitter認証画面
  • すると、以下のように規約が表示されます

disqus_allert
  • 設定したアドレスに以下のmailが届きます
    • 青字を押下
disqus_mail
  • 認証が完了しました
email_verified
  • WEB上でログイン
  • コメントを投稿
    • アイコン画像はTwitterのものがそのまま反映されるようです
twitter_comment
  • 以上でDisqusの解説は終了です。手軽なので是非導入してみましょう。

icarus(Hexo Theme) Tips Menuの編集

こんにちは。今回はHexoのthemeにicarusを採用した際のTipsを解説します。

  • icarusを適用すると以下のようなメニューがヘッダーに表示されます
  • ポイント
    • Aboutページは自分で作成する必要がある
    • Menuは追加・削除可能

Aboutページを追加

1. Hexoの通常の記事として生成

  • About-This-Blog.mdを生成
    1
    ng new 'About-This-Blog'
  • source/_posts内に生成されたファイルを編集

2. _config/ymlを改修

  • path: your-blog\themes\icarus>
    • About: 移行を生成した記事のパスに変更
    • Hexoの記事のパスは “/YYYY/MM/DD/Article_name” です
1
2
3
4
5
6
7
8
9
# Navigation bar link settings
navbar:
# Navigation bar menu links
menu:
Home: /
Archives: /archives
Categories: /categories
Tags: /tags
About: /2020/02/04/About-This-Blog/ # /aboutから変更

Menuを追加

  • メニューの追加も同様の箇所を改修するだけで簡単にできます

  • 以下を追加します

    • ポリシーページ
    • 自身のECサイトへのリンク
  • 作業は二点です

    • menuの項目を増やす
    • pathを指定する
      • 外部サイトはURLそのままでOKです
  • _config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # Navigation bar link settings
    navbar:
    # Navigation bar menu links
    menu:
    Home: /
    Archives: /archives
    Categories: /categories
    Tags: /tags
    About: /2020/02/04/About-This-Blog/ #/about
    Policy: /2020/03/17/Policy
    EC: https://sheeps.official.ec/
  • 確認

    1
    hexo server
  • 以下のように反映されます

  • 外部サイトに飛べるか確認
    • メニューの”EC”を押下
    • 以下のように画面が切り替わりました
      • 私が書いたマスコットキャラ:シープ君のグッズ一覧が出てきます
  • icarusは柔軟にメニューを弄れるのでカスタマイズ性が高いですね
    • 自身のWEBページに合わせて自由に編集してみてください
    • 個人で勉強ついでに開発しているWEB APが増えたら一覧ページをメニューに足そうと思います

おまけ:ロゴの変更

  • オリジナルのロゴ

    • 所在:\themes\icarus\source\images
      • logo.svg
    1. オリジナルのロゴを作成して同様のディレクトリに格納
      • original_logo.pngを作成して配置
    1. _config.ymlを編集
      • icarus側の設定ファイルを改修
        • themes\icarus_config.yml
      • 1
        2
        3
        4
        favicon: /images/favicon.svg

        # Path or URL to the website's logo to be shown on the left of the navigation bar or footer
        logo: /images/logo.svg
        • faviconをコメントアウトしないと上に被さって上手く表示できません
          1
          2
          3
          4
          #favicon: /images/favicon.svg

          # Path or URL to the website's logo to be shown on the left of the navigation bar or footer
          logo: /images/original_logo.png
  • これだけです

    • 画面への反映を確認
      1
      hexo server
ロゴ変更後

HexoブログのAMP化【完全版】

こんにちは。今回はHexoで生成したWEBページのAMP化の手法について解説します。簡単にいうとWEBページを高速表示可能な形式にします。同様の記事も数件見つけたのですが、所々でハマったので、完全版としてまとめました。

基礎知識

AMP(Accelerated Mobile Pages)とは?

  • AMP HTML
    • モバイルでのコンテンツ表示を高速化させるための手法
      • GoogleとTwitterが協同で立ち上げたプロジェクトです
      • ページ読み込みに3秒以上かかる場合、53%のユーザーが離脱してしまうと言われています
      • 検索結果で並んでいるサイトに、稲妻マークが小さくついているものを見つけたことはありませんか?
        • 実はあのマークはAMPサイトであるサインです
    • AMP化するには規格に則った記法でサイトを構築する必要があります
      • 自力での対応は難しいので、自動生成する手法を今回解説します

hexo-generator-ampとは

  • hexo-generator-amp
    • Google AMP (Accelerated Mobile Pages) を自動で生成してくれるプラグイン
    • 各記事のHTMLに対して、AMP HTMLを生成
      • hexo generate実行時に通常のHTMLとAMP版のHTMLの双方ができます

導入手順

1. hexo-generator-ampのinstall

  • Hexoディレクトリ直下で実行
    1
    npm install hexo-generator-amp --save

2. headタグにAMP HTMLのパスを指定

  • head.ejs

    • 自動生成するHTMLのheaderの設定を規定するファイルです
    • ファイルの所在は以下
      1
      \themes\theme-name\layout\
      • 私が利用しているテーマ:icarusの場合は一階層深い所にありました
        1
        \themes\icarus\layout\common\
  • 以下を追記

    1
    2
    3
    <% if (is_post() && config.generator_amp){ %>
    <link rel="amphtml" href="<%= config.url %>/<%= page.path %>/amp/index.html">
    <% } %>
  • WEBページを作成する中で、度々headerにscriptを追加するシーンがあると思われます

    • 基本的にhead.elsに同様に追記することで目的を達成可能です。覚えておきましょう

3. ./_config.ymlの改修

  • _config.ymlにPluginの設定を追加します

    • theme配下ではなくHexoディレクトリ直下のファイルです
  • 以下を追記

    • Gitの公式ページの説明はpathの記法が少し間違っていました
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      # hexo-generator-amp

      generator_amp:
      templateDir: amp-template
      assetDistDir: amp-dist
      logo:
      path: sample/sample-logo.png
      width: 600
      height: 60
      substituteTitleImage:
      path: sample/sample-substituteTitleImage.png
      width: 1024
      height: 800
      warningLog: false
  • hexo serverで確認

Trouble Shooting

  • 以下のエラーが出た場合
1
2
3
4
5
6
7
8
[00:44:36.025] [hexo-generator-amp] hexo-generator-amp's template has been copied to
the your project.
Please check the following file.
-> j-blog\amp-template\sample
[00:44:36.040] [hexo-generator-amp] error: Not found the hexo-generator-amp's asset
files. If you do not have the file please download the sample file from the following site. ( see: https://github.com/tea3/hexo-generator-amp/tree/master/template )
Please check the following file.
-> j-blog\amp-template\sample-logo.png
  • 上記はpathの指定が間違っている
    • sample配下にsample-logo.png等が格納されているため、sample/を頭に付けましょう

4. Markdown記法の修正(画像)

  • hexo server実行時にAMPの書式チェックがプラグインによって実行されます

  • 恐らく以下のErrorが大量に出る人が多いと思われます

    • markdownの画像のURL指定の表記がAMPでは通用しない為です
      1
      2
      This plugin can not acquire the width and height of such url images.
      Please change the URL to HTTP or HTTPS, or add height and width.
  • エラーメッセージについて解説

    • このプラグインは、URL画像の幅と高さを取得できない
    • URLをHTTPまたはHTTPSに変更するか、高さと幅を追加してください
  • どういうこと?

    • AMPの規格では画像のheightとwidthを設定する必要があります。
    • そのため、各記事のURL指定の画像に対してエラーが出ています
  • とりあえず以下のErrorが出ている記事の画像を修正してみます

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    -> _posts/About-This-Blog.md
    [18:39:10.984] [hexo-generator-amp] error: This plugin can not acquire the width and height of such url images.
    Please change the URL to HTTP or HTTPS, or add height and width.
    img path: https://user-images.githubusercontent.com/41946222/73755094-dd3c0f00-47a8-11ea-9ec5-e1e537559054.png
    Please check the following file.
    -> _posts/About-This-Blog.md
    [18:39:10.985] [hexo-generator-amp] error: Error: connect ETIMEDOUT 151.101.108.133:443
    This plugin checks whether the image URL exists.
    img path: https://user-images.githubusercontent.com/41946222/74917091-5030c100-540a-11ea-9060-2d05fc6c6c23.png
    Please check the following file.
  • 現在のmarkdown記法

    • heightとwidthを定められない
      1
      ![image_title](image_url)
  • 回避策

    • 以下のようにHTMLの記法で修正
      1
      2
      3
      <div style="text-align:center;">
      <img src="image_url" height="500px" width="500px">
      </div>
  • 各記事のURL指定の画像に対して同様の修正を実施します

    • 割と大変なので、記事が少なめの段階で対処した方がいいです
  • 確認

    • 以下を実行
      1
      hexo server
    • エラーの解消を確認
  • 起動したAPをブラウザで確認

    • 以下のように記事を開いている状態で、URLの後ろにampを付ければ生成されたAMP HTMLを確認可能です
      1
      http://localhost:4000/article_name/amp
    • 各記事で確認しましょう

Trouble Shooting

  • AMP画像が表示されない
    • heightとwidthの%指定はダメです
    • pxでかっちり定めなければAMPでは表示されません

5. WEB上でのチェック

  • 本番環境にデプロイ⇒WEBから確認
    • 以下のように各記事のURLに/ampを足すとAMP HTML版のページの表示を確認可能です
      • AMP版と通常版の両方のページをWEBから確認出来るようになっている状態です

AMPテスト

  • GoogleのAMPテスト
    • 指定したURLがAMPに対応しているかチェック可能です
      • AMP版のURLを指定してください
  • 以上でHexoで生成したWEBページのAMP化は完了です
  • 各種設定やTipsについては別記事で解説します

Hexoテーマ(theme)変更: icarus

概要

  • Hexoにはテーマのテンプレートが数百種類用意されており、簡単に変更することができます
    • デフォルトはlandscape
      • シンプルでいいのですが、デザインとして物足りなく、プロフィール欄も欲しいので変更します
<div style="text-align:center;">
<img src="https://user-images.githubusercontent.com/41946222/76521887-038c5300-64a9-11ea-8dfd-8454b8ce0dd2.png" height="100%" width="100%">
</div>

変更手順

    1. テーマの選定
    1. Githubからダウンロード
    1. 設定(_config.yml)を変更

1. テーマの選定

  • まずは採用したいテーマを決めましょう

  • Hexoのテーマ一覧は以下より確認できます

  • Star数のランキングはこちらです

    • 自身のWEBページの方向性に合わせて選定しましょう
  • 個人的にイケてると感じたテーマを紹介します

    • シンプル

      • icarus
        • プロフィール欄がデフォルトである
        • 各記事がサムネで表示される
          • 手間は少し増えてしまいそう
        • サイドのメニューと記事一覧を、画面サイズに応じて1~3列で表示
      • NexT
        • プロフィール欄がデフォルトである
        • モノトーン
        • 1~2列で表示
      • Material
      • indigo
      • Tranquilpeak
        • 最近見つけたので追加。そのうちこちらに変更するかも
    • ダイナミック

      • React
        • 会社サイト向け
          • デザインが作りこまれています
        • 別の機会に利用してみようと考えています
      • Ochuunn
        • サイトを開いた時の動作がおしゃれです
      • デザイナー向け
      • TKL
        • 一枚目から始まるタイプですが記事欄は質素です

今回採用したテーマ

  • icarus
    • GitのStar数ランク5位で人気のテーマです
  • 採用理由
    • tech記事らしいシンプルさ
    • 各記事がサムネで一覧表示される
    • サイドメニューに以下が表示される
      • Profile
      • Categories
      • Tag
      • RECENT
      • ARCHIVES

2. Githubからダウンロード

  • 2.1. Gitのhexo-theme-icarusのソースをhexo-pj-name/themes直下に配置します

  • 以下のコマンド一発で入ります

    • hexoディレクトリ直下で実行
      1
      git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
  • gitが入っていない方はhexo-theme-icarusの”clone or download”よりLocalにダウンロードしてthemes配下に展開してください

    • その際にフォルダ名を”icarus”に変更することを忘れないでください

3. 設定(_config.yml)を変更

  • _config.ymlをthemeにicarusを利用するように改修
    • HEXOディレクトリ直下にあります
1
2
## Themes: https://hexo.io/themes/
theme: icarus
  • icarusを適用

    • 以下を実行します
      1
      hexo s
    • 出力
      • icarusが出てきます
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        j-blog> hexo s
        INFO =======================================
        ██╗ ██████╗ █████╗ ██████╗ ██╗ ██╗███████╗
        ██║██╔════╝██╔══██╗██╔══██╗██║ ██║██╔════╝
        ██║██║ ███████║██████╔╝██║ ██║███████╗
        ██║██║ ██╔══██║██╔══██╗██║ ██║╚════██║
        ██║╚██████╗██║ ██║██║ ██║╚██████╔╝███████║
        ╚═╝ ╚═════╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝
        =============================================
        INFO Checking dependencies
        INFO Validating the configuration file
        WARN themes\icarus\_config.yml is not found. We are creating one for you...
        INFO themes\icarus\_config.yml is created. Please restart Hexo to apply changes.
  • 画面を確認

    1
    hexo server
  • 以下のようにテーマの変更を確認

  • 後はいつも通りgenerateして本番環境へデプロイしましょう
    1
    hexo generate

Trouble Shooting

  • 本番環境で表示が崩れている場合

    • 前のテーマからgenerateされていたファイルが邪魔をしています(私もハマりました)
      • generateで生成されるファイル群を削除すれば、修正できます
  • cheerioがないというエラーが出た場合

    1
    2
    ERROR Package cheerio is not installed.
    ERROR Please install the missing dependencies from the root directory of your Hexo site.
    • 以下を実行
      • Hexoディレクトリ直下で
        1
        npm install cheerio --save
    • hexo sを実行できます

icarus設定Tips

  • ハマる場面もあったので各種設定についても解説しておきます

ウィジェットを変更

  • icarus/layout/widget内のファイルを改修することで、左右の表示を変更できます

プロフィールを変更

  • icarusのwikiを参考に改修します

  • 上記には書いてありませんでしたが、改修する設定ファイルは以下になります

    • themes\icarus_cofig.yml
  • 中を確認すると以下のようにprofileの初期設定がされていることが分かります

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
    widgets:
    -
    # Widget name
    type: profile
    # Where should the widget be placed, left or right
    position: left
    # Author name to be shown in the profile widget
    author: Your name
    # Title of the author to be shown in the profile widget
    author_title: Your title
    # Author's current location to be shown in the profile widget
    location: Your location
    # Path or URL to the avatar to be shown in the profile widget
    avatar:
    # Email address for the Gravatar to be shown in the profile widget
    gravatar:
    # Whether to show avatar image rounded or square
    avatar_rounded: false
    # Path or URL for the follow button
    follow_link: 'https://github.com/ppoffice'
  • 変更

    • profile画像は以下に格納しましょう
      • \themes\icarus\source\images
        • おしゅし のフリー素材として公開されている画像を用意しました
  • 改修例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    widgets:
    -
    # Widget name
    type: profile
    # Where should the widget be placed, left or right
    position: left
    # Author name to be shown in the profile widget
    author: J
    # Title of the author to be shown in the profile widget
    author_title: IT Specialist
    # Author's current location to be shown in the profile widget
    location: Tokyo Japan
    # Path or URL to the avatar to be shown in the profile widget
    avatar: images/oshushi.png
    # Email address for the Gravatar to be shown in the profile widget
    gravatar:
    # Whether to show avatar image rounded or square
    avatar_rounded: true
  • Profileの変更結果

<div style="text-align:center;">
<img src="https://user-images.githubusercontent.com/41946222/76530468-1d349700-64b7-11ea-8cae-6ed0407cc359.png" height="50%" width=50%">
</div>

背景の変更

1
2
3
4
5
6
7
# Article display settings
article:
# Code highlight settings
highlight:
# Code highlight themes
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
theme: atom-one-light

目次を自動作成するプラグインの導入

  • hexo-tocをインストール
    1
    $ npm install hexo-toc --save
  • 目次を入れたい箇所に下記を追記すればOK。
1
<!-- toc -->

オプションとしてthemes/icarus/config.ymlに下記を追加します。

1
2
3
4
5
6
7
8
9
toc:
maxdepth: 3
class: toc
slugify: transliteration
decodeEntities: false
anchor:
position: after
symbol: '#'
style: header-anchor
  • 実際に記事に入れて見ましょう

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    title: Hexoでサイトマップを自動生成 ~ Google Search Consoleへ登録
    thumbnails: /gallery/sitemap_thumnail.png
    date: 2020-03-10 23:23:23
    toc: true
    tags:
    - Hexo
    - Sitemap
    - google search console
    ---
    <!-- toc -->
    ## 概要
  • 画面を確認すると以下のように反映されていました。

  • 関連記事

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×