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 -->
    ## 概要
  • 画面を確認すると以下のように反映されていました。

  • 関連記事

Hexoでサイトマップを自動生成 ~ Google Search Consoleへ登録

概要

こんにちは。今回はHexoでサイトマップを自動生成してGoogleに登録するまでの手法を紹介します。
本サイトもHexoを用いて自動生成しています。

想定読者

  • 静的サイトジェネレータhexoでWEBページを作成済み
    • Google検索でヒットしない状態
  • サイトマップ未登録

基礎知識

  • サイトマップとは

    • サイトにどのようなページがあるのか表す為のもの
    • 以下の二種類があります
      • HTMLサイトマップ
      • XMLサイトマップ
        • 検索エンジンが情報収集する対象となるため、SEO対策において重要
    • hexoではプラグインを利用することでサイトマップを自動生成できます
  • Google Search Console

    • Serch Consoleの概要 (公式サイトより引用)
      1
      Google Search Console は、Google 検索結果でのサイトの掲載順位を監視、管理、改善するのに役立つ Google の無料サービスです。Search Console に登録しなくても Google 検索結果にサイトが表示されるようにすることはできますが、Search Console に登録することで、Google のサイトに対する認識を理解し、改善できるようになります。
    • 生成したサイトマップをこちらに登録することで、Google検索結果に自分のWEBページが出るようになります
      • WEBページを公開したばかりの場合、登録しなければ検索結果に出ないと思われます

手順

    1. Pluginの導入
    1. _config.ymlにPluginの設定を追加
    1. sitemap.xmlの生成
    1. 本番環境へデプロイ
    1. Google Search Consoleへ登録

1. Pluginの導入

  • HEXOでサイトマップを生成できるプライグインは二種類あります

  • インストール

    • HEXOディレクトリ直下で以下を実行
      1
      npm install hexo-generator-seo-friendly-sitemap --save

2. _config.ymlにPluginの設定を追加

  • HEXOの設定ファイルに先ほどのPluginを登録します

    • ファイルはhexoディレクトリ直下にあります
  • _config.ymlに追記する内容

    1
    2
    3
    4
    5
    ## Plugins: https://hexo.io/plugins/
    sitemap:
    path: sitemap.xml
    tag: false
    category: false

3. sitemap.xmlの生成

  • いつも通りにhexoコマンドでジェネレートする際に、sitemapが生成されます

    1
    hexo g
  • sitemap.xmlの生成を確認

    • index.htmlと
      • 通常はpublic配下
  • 開いてみると、以下のように書かれています

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="sitemap.xsl"?>
    <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">


    <sitemap>
    <loc>https://j-xaas.github.io/post-sitemap.xml</loc>
    <lastmod>2020-03-10T13:04:39.446Z</lastmod>
    </sitemap>

    </sitemapindex>
    <!-- XML Sitemap generated by Hexo SEO Friendly Sitemap Generator -->

4. 本番環境へデプロイ

  • WEBページをホスティングしている、サーバ等へsitemap.xmlファイルをおきましょう
  • github pagesを用いている場合は、Gitへpushします

5. Google Search Consoleへ登録

  • 公式サイトへアクセス

    • 未登録であれば、自分のWEBサイトのURLを登録しましょう
  • サイドメニュー内、インデックスのサイトマップを選択

  • 新しいサイトマップの追加
    • 入力欄に”sitemap.xml”を入力
    • 送信
  • しばらく待って更新すると、以下のようにステータスが”成功しました”と表示されます
    • 以上でサイトマップの登録は完了です
      • hexo g の度に更新されるので、事後作業は特にありません

Angular8:”global is not defined”の回避策

概要

  • Angular8で以下のエラーにハマった際の解消法を解説します

    1
    ”global is not defined”
  • 上記のエラーについて

    • Angularでグローバルオブジェクトを参照する外部ライブラリを利用している環境で発生する事象
    • 今回はAngularとAWS間のAPI連携機能を実装した際に発生
  • 環境の詳細

    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
    Angular CLI: 8.3.24
    Node: 10.16.3
    OS: win32 x64
    Angular: 8.2.14
    ... animations, common, compiler, compiler-cli, core, forms
    ... language-service, platform-browser, platform-browser-dynamic
    ... router

    Package Version
    -----------------------------------------------------------
    @angular-devkit/architect 0.803.24
    @angular-devkit/build-angular 0.803.24
    @angular-devkit/build-optimizer 0.803.24
    @angular-devkit/build-webpack 0.803.24
    @angular-devkit/core 8.3.24
    @angular-devkit/schematics 8.3.24
    @angular/cdk 8.2.3
    @angular/cli 8.3.24
    @angular/material 8.2.3
    @ngtools/webpack 8.3.24
    @schematics/angular 8.3.24
    @schematics/update 0.803.24
    rxjs 6.4.0
    typescript 3.5.3
    webpack 4.39.2

解決策

  • pollyfills.tsに設定が必要
    • 所在
      • “pj-name”\srcの配下
    • 以下を追記すると解決します
      // "global is not defined"の対応
      (window as any).global = window;

解説

  • polyfillとは
    • JavaScriptのversion間の互換性を補うもの
    • 利用したい機能に未対応のブラウザでも使えるように、同等の機能をJavaScriptで供給できる
  • pollyfills.ts
    • Angularにおけるpolyfillの設定ファイル
    • 例えば、Angularで開発したAPをIEでも動かしたい時には設定が必要
      • Angularは”デフォルトではIEに未対応”です

cloud9による共同編集・リモート開発

 こんにちは。最近ウィルス対策の影響でテレワークの利用が広がっているようです。IT界隈の方達は慣れているとは思いますが、「トラシューやコードレビュー、ペアプロ等は対面でないと困る」という声をちらほら聞きます。新入社員が先輩に横で教えてもらうためにわざわざ出社するケースもあるようです。そこで、今回は開発の遠隔・同時編集を可能にするTipsを紹介します。利用するのはAWSのブラウザ型IDEであるcloud9のワークスペース共有機能です。

前提知識

  • cloud9のワークスペース共有機能
    • 画像の様に複数メンバでエディタ&CLIを同時に遠隔操作できます
      • 右側のタブに参加メンバが表示されます
    • 初期設定だけ完了すれば、ブラウザでURLを共有してログインしてもらうだけです
      • テレワーク時に「ちょっとここが分からないので、アドバイスを頂けますか?」と開発環境に入ってもらうと助けてもらいやすいです
        • 直接コードやコマンドを書き込んでもらうこともできます
        • Slack等のチャットだけでコードの話をするのは実際辛いです
      • 開発チームを監督する側も状況を理解しやすく、皆が幸せになれます
共同開発のイメージ
  • 対抗:VSCode LiveShare
    • Microsoftのエディターでもプラグインによって似たようなことができます
    • 個人的な使用感としては以下の差異があります
      • 自分のLocal環境を共有
        • APを起動すると恐ろしく重くなり、落ちてしまうことも…
      • 各メンバ全員がプラグインを設定する必要があり、手間取る
        • ホスト側が参加メンバ毎に権限付与する工程が毎回ある
    • VSCodeの豊富なプラグインが必要なケースもあるので、私は場合によって使い分けています。個人の好みにもよると思います。

前提条件

  • AWSアカウントを作成済み or 作成可能
  • cloud9 開発環境を作成済み
  • 読者は以下を想定
    • 開発環境のオーナー
    • IAMユーザの作成権限を持つ

cloud9環境共有手順

  • 以下の二点が必要です

    • AWSのIAM Userの作成
    • Cloud9への参加メンバの登録
  • 右上の”Share”を押下

  • 共有機能の設定画面が出ます

Cloud9への参加メンバの登録

  • 共有機能の設定画面の”Invite Members”にIAM User名を入力
  • タブで権限を設定
    • R: Readのみ
    • RW: Read & Write
  • まだ未作成の場合は”create a new user”よりAWS Consoleに飛びましょう

IAMユーザの追加

  • ★cloud9で共同編集したいだけのメンバ向けの権限についてです。最小権限の原則に従いましょう
    • アクセス許可の設定の”既存のポリシーを直接アタッチ”を選択
    • 検索欄に”cloud9”と打つ
    • AWSCloud9EnvironmentMemberを選択・付与

まとめ

 以上で複数メンバでの共同編集ができます。テレワークにおける情報伝達のもどかしさを解消して気持ちよく開発しましょう。ハンズオン研修・学習用途にも便利だと思います。

関連記事

画像ファイル
D:\Users\0000011349117\Desktop\memo_article\cloud9member

補足:Angular開発環境の構築手順(cloud9)

  • 以下を実行するだけでOKです
    1
    2
    npm install @angular/.....
    ng add @angular/material
  • 自動で入るとは思いますが、もし利用中にCDKがないというエラーが出たら以下も実行してください
    1
    $ ng add @angular/CDK

Cloud9 x Angular x FirebaseでAP開発(導入編)

こんにちは。今回は上記の3つを組み合わせてWEB AP開発を行う際の手順を解説します。それぞれの使用経験があっても細かい所で沢山ハマったのでまとめておきました。初級者がこの記事だけで目標を達成できるように書いたつもりです。

各技術についての基礎知識

簡単にポイントだけを解説します。分かっている方は飛ばしてください
手順を細かく書いているので分からない言葉があっても、一先ず触りなから理解していきましょう

  • cloud9

    • AWSのブラウザ型IDE
    • 自端末のOSに依存せず開発可能
      • iPadでも開発可能(よく使ってます)
    • 社内プロキシ問題に悩まされない
      • 個人的には最重要ポイント
    • 環境構築を省略可能
      • node_module, Git, AWS CLI等の便利なものが元から入っている
    • 複数ユーザーで同時編集可能
      • リモートワークやレビューに便利です
      • 対抗のGoogle Cloud Shellとの差分
        • 後に同様の機能が付きそうではあります
  • Angular

  • Firebase

    • GoogleのBaaS(Backend as a Service)
    • 認証機能やデータベースなどのバックエンドの機能を提供してくれるサービス
      • 開発工数を大幅削減可能
      • 本質的な機能の開発に集中可能
    • APのHostingや顧客分析、収益管理まで可能

この3つを抑えれば開発環境の用意からAPの公開まで高速でできます。
つまり、良いアイデアさえあれば、一人でもビジネスを始められます。

前提条件

手順

1. Angular開発環境の準備

  • Angularが動くために必要なもの
    • node_module
    • Angular CLI

cloud9には初めからnode_moduleが入っている為、Angular CLIを入れるだけでOKです。(Windowsにnode_moduleを入れようとすると、それだけでだいぶ工数をロスします)

  • 1.1. Angular CLIのinstall

    1
    npm install -g @angular cli
  • 確認

    • 以下のようにngコマンドを使えるようになればOKです
      • ngはangularの略です
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        ng --version

        _ _ ____ _ ___
        / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
        / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
        / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
        /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
        |___/


        Angular CLI: 8.3.20
        Node: 10.16.2
        OS: linux x64
        Angular: 8.2.14
  • 0から開発する場合

    • 以下のコマンドでAngular PJ(AngularにおけるAPの単位)を作成しましょう
      1
      ng new <AP名>
    • 今回は以下の名称で作成
      1
      $ ng new "firebase-sample"
  • Gitから開発途中のソースを持ってきた場合

    • APのディレクトリ直下にもnode_moduleを入れなければ動かないので注意です
      1
      npm install

2. firebase projectの作成

  • 初めは基本的にWEBのFirebaseコンソールで操作していきます

    • Googleアカウントを作成していればすぐに始められます
  • 2.1. 公式ページから右上の”コンソールへ移動”を押下

  • 2.2. projectを追加(APの単位です)

  • 2.3. Project名を設定

  • 2.4. Googleアナリティクス(Firebaseプロジェクト向け)

    • 特別な理由が無ければ有効のままでOK
  • 2.6. 以下が表示されたら完成

    • 続行を押すとPJの画面に飛びます
  • 2.7. Firebase Project画面
    • 以下が表示されればOK
    • 基本的にこの画面で設定を行います

3. アプリの登録

  • 次にFirebase Projectにアプリを登録します

    • Firebase PJには複数のアプリを登録可能です
    • 例えばWEB版、ios版といった形で複数をAP間で認証機能やデータベースを共有するイメージです
  • 3.1. アプリを登録

    • ios/android/webからwebのアイコンを選択
  • 3.2. アプリの追加

    • 以下のように入力
    • アプリを登録
  • 3.3. Firebase SDK の追加

    • 以下のようにスクリプトが表示されます

  • Angularの場合はindex.htmlのbody配下に置きます
    • SPAなので、単一ページであるindex.htmlがJSで書き換わっていくのがAngularの特徴です
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
        <body>
      <app-root></app-root>
      <!----firebaseSDKの追加-->
      <!-- The core Firebase JS SDK is always required and must be listed first -->
      <script src="/__/firebase/7.8.2/firebase-app.js"></script>

      <!-- TODO: Add SDKs for Firebase products that you want to use
      https://firebase.google.com/docs/web/setup#available-libraries -->
      <script src="/__/firebase/7.8.2/firebase-analytics.js"></script>

      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
      </body>
      </html>

4. firebaseとAPの関連付け(Angular Fireの導入)

  • Angular APとfirebaseを関連付けるまでに必要な作業の一覧は以下になります
    • Firebase CLIのinstall
      • 環境単位で必要な作業
    • angularfireのinstall
      • AP単位で毎回必要な作業
    • (firebase側でアプリを追加  2で先に行った内容です)
      • Firebase SDKの追加
      • FirebaseのAPIキーを取得
    • Angularの環境設定ファイルにAPIキーを設定
      • ★二点に設定が必要。よくはまるポイントです
        • 開発環境
          • src/environments/environment.ts
        • 本番環境(prodは本番という意味)
          • src/environments/environment.prod.ts
    • firebase login/init
    • 環境設定ファイルをapp.module.tsに読み込む
      • @angular/fireからAngularFireModuleを呼び出して、
        上記のenvironmentオブジェクトを使ってAPIキーをインストール
    • (特定の機能を利用する場合の作業:認証機能を利用する際の例)
      • @angular/fire/authからAngularFireModuleを呼び出して、NgModuleに登録
        • Firebase Authenticationを利用するために必要な工程
        • @angular/fireは全機能をinstallすると重くなる為、上記の様に必要なものだけを登録する仕様になっているらしい

それぞれ詳しく解説していきます

4.1. Firebase CLIの導入

  • Firebase CLI
    • 環境に一度入れればOKです
    • 以下を実行することでinstallできます
      • これでfirebase コマンドが有効になります
        1
        npm install -g firebase-tools

4.2. angular fireのinstall

  • angularfireを入れます
    • AngularとFirebaseの連携用Libraryです
    • こちらは環境単位ではなくAP単位で入れる必要があります
  • 以下を実行
    • ※最新版であればng addでもOK
      1
      firebase-sample (master) $ npm install @angular/fire firebase --save
  • 出力結果
    1
    2
    3
    4
    + @angular/fire@5.4.2
    + firebase@7.9.3
    added 140 packages from 98 contributors and audited 19218 packages in 17.919s
    found 5 vulnerabilities (3 moderate, 2 high)

4.3. Angular環境設定ファイルにAPIキーを貼り付け

  • 開発環境向けと本番環境向けの2つの設定ファイルの改修が必要。よくはまるポイントです

    • 各値はfirebase consoleより確認
  • src/environments/environment.ts

    • 開発環境用の設定ファイルに以下の形式で設定します
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      export const environment = {
      production: false,
      // Firebaseの設定情報を登録
      firebase: {
      apiKey: '<your-key>',
      authDomain: '<your-project-authdomain>',
      databaseURL: '<your-database-URL>',
      projectId: '<your-project-id>',
      storageBucket: '<your-storage-bucket>',
      messagingSenderId: '<your-messaging-sender-id>'
      }
      };
      };
  • src/environments/environment.prod.ts

    • 本番環境用の設定ファイルも同様です
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      export const environment = {
      production: false,
      // Firebaseの設定情報を登録
      firebase: {
      apiKey: '<your-key>',
      authDomain: '<your-project-authdomain>',
      databaseURL: '<your-database-URL>',
      projectId: '<your-project-id>',
      storageBucket: '<your-storage-bucket>',
      messagingSenderId: '<your-messaging-sender-id>'
      }
      };
      };
  • Firebaseの設定情報を確認

    • FirebaseコンソールのSettingsから確認可能
  • 上記のIDとAPIキーをenvironmentsの該当箇所にコピペ

  • 設定より、IDとAPIキー、送信者IDを確認する

    - 各設定項目は以下のように一意に定まる
1
2
3
4
5
6
7
8
9
10
11
export const environment = {
production: false,
firebase: {
apiKey: '<ウェブAPIキー>',
authDomain: "<プロジェクトID>.firebaseapp.com",
databaseURL: "https://<プロジェクトID>.firebaseio.com",
projectId: "<プロジェクトID>",
storageBucket: "<プロジェクトID>.appspot.com",
messagingSenderId: "<送信者ID>",
}
};
  • 送信者IDはクラウドメッセージングTabより確認可能

  • 両方のファイルに以下を設定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export const environment = {
    production: false, // ,を忘れないよう注意
    // Firebaseの設定情報を登録
    firebase: {
    apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
    authDomain: 'fir-sample-3a2dc.firebaseapp.com',
    databaseURL: 'https://fir-sample-3a2dc.firebaseio.com',
    projectId: 'fir-sample-3a2dc',
    storageBucket: 'fir-sample-3a2dc.appspot.com',
    messagingSenderId: '408620068768'
    }
    };

4.4. CLIとFirebaseの関連付け(firebase login)

  • 次に開発環境(Cloud9)のCLIとfirebaseを関連付けます
    • c9の場合–nolocalhostが必須
      • ★社内Local環境でloginをやろうとするとFirebase認証がProxyに阻まれて突破できず詰むので気を付けましょう
        • 頑張っても解決できませんでした…
1
2
3
4
5
6
7
8
9
firebase login --no-localhost --reauth

i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes
i To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on any device to log in:
<認証用のURL>
  • 上記のURLから、ブラウザでGoogleアカウント認証を進めるとコードが表示されます
  • 貼り付けてSuccessと表示されれば成功です
    1
    2
    3
    ? Paste authorization code here: <Code>

    ✔ Success! Logged in as <googleアカウント名>
  • Cloud9のCLIからFirebase(=Google Cloud)上のリソースにアクセス可能になりました

4.5. APとfirebaseのPJの関連付け(firebase init)

  • Angular PJ直下で実行

    1
    firebase init
  • 以下のように出力されれば成功です

    • 使いたいサービスを選択すると簡単にCloud側と連携できます
      • スペースキーで各サービスを選択できます
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19

        ######## #### ######## ######## ######## ### ###### ########
        ## ## ## ## ## ## ## ## ## ## ##
        ###### ## ######## ###### ######## ######### ###### ######
        ## ## ## ## ## ## ## ## ## ## ##
        ## #### ## ## ######## ######## ## ## ###### ########

        You're about to initialize a Firebase project in this directory:

        /home/ec2-user/environment/firebase-sample

        ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press
        <space> to select, <a> to toggle all, <i> to invert selection)
        ❯◯ Database: Deploy Firebase Realtime Database Rules
        ◯ Firestore: Deploy rules and create indexes for Firestore
        ◯ Functions: Configure and deploy Cloud Functions
        ◯ Hosting: Configure and deploy Firebase Hosting sites
        ◯ Storage: Deploy Cloud Storage security rules
        ◯ Emulators: Set up local emulators for Firebase features
  • Project Setup

    • Enterを押すと以下が出力されます
    • 今回は事前にプロジェクトを作成しているので”use an exciting project”を選択
1
2
3
4
5
6
7
8
9
10
11
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option:
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
  • 自身のアカウントで作成済みのFirebase Projectが選択肢としてでてきます

    • 事前に作った”fir-sample-3a2dc (firebase-sample)”を選択
      1
      2
      ? Select a default Firebase project for this directory: (Use arrow keys)
      ❯ fir-sample-3a2dc (firebase-sample)
  • 以降は、先ほど選択したサービスのSetupが順に出てきます。いくつか例として書いておきます

  • Hosting Setup

  • Database Setup

    • ひとまずデフォルトでEnter
      1
      2
      3
      4
      5
      6
      === Database Setup

      Firebase Realtime Database Rules allow you to define how your data should be
      structured and when your data can be read from and written to.

      ? What file should be used for Database Rules? (database.rules.json)
  • Firestore Set up

    • リソース(firestore)のlocationを設定していないとErrorが出ます
      • firebaseコンソール側で設定する必要があります
        1
        2
        3
        === Firestore Setup

        Error: Cloud resource location is not set for this project but the operation you are attempting to perform in Cloud Firestore requires it. Please see this documentation for more details: https://firebase.google.com/docs/projects/locations
  • 以上で一先ずセットアップは完了です

  • 次にのStepとしてFirebase HostingでAPを公開してみましょう(5分できます)

後書き

ここまでで本格的な実装に入る準備が整いました。Firebaseを使いこなせば、認証機能もデータのCRUD機能も1日で簡単に実装することができます。モダンな手法を使いこなして素早くサービスを開発していきましょう。

おまけ:cloud9でng serveする際の注意

  • 詳細は以下の記事にまとめてあります

  • cloud9で必要なこと

    • portの指定(8080)
    • browserのURLの指定
    • disableHostCheck
    1. angular.jsonファイルを書き換えてポートを変更
      • cloud9の場合はportを8080にする必要がある
        1
        2
        3
        4
        5
        6
        "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
        "browserTarget": "NgTororo:build",
        "port": 8080 //ここを追加
        }
    1. portの設定後であれば以下でOK
      1
      ng serve --disableHostCheck --public-host <cloud9のPreviewのURL>

Angular x AWS SDK for JavaScriptの始め方

  • Angularで開発していたアプリケーションにaws-sdkを導入する際の備忘録
    • AWS SDKを入れることで、アプリケーションからAWSのリソースを操作可能になります
      • ex.) S3やDynamoDBへのデータの格納、Cognitoによる認証、Lambdaの実行…
      • SDK: Software Development Kit
        • 特定のソフトウェアを開発する際に必要なツールのセット
  • Angularの場合、公式の開発者ガイド通りにやると鬼のようにエラーが出るので共有しておきます。ひと手間必要でした。

1. aws sdk for javascriptのinstall

  • angular PJ直下で実行
    1
    npm install aws-sdk --save-dev
  • この時点でAPを確認すると、以下のエラーが大量に出ます
    • APの画面もブラウザに表示されなくなります
1
2
3
>ng serve --open

ERROR in node_modules/aws-sdk/clients/acm.d.ts:141:37 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

2. @types/nodeをinstallする

  • Angular PJ直下で以下を実行
    1
    2
    3
    4
    5
    npm install --save @types/node

    + @types/node@8.9.5
    updated 1 package and audited 19123 packages in 41.418s
    found 0 vulnerabilities

3. tsconfig.json ファイルに以下を追記

  • Angular PJ直下にあります

    1
    2
    3
    "compilerOptions": {
    "types": ["node"]
    }
  • 場所は以下

    1
    > code .\tsconfig.json
    1. tsconfig.app.json にも、同じく追記
      • Angular PJ直下にあります
        1
        2
        3
        "compilerOptions": {
        "types": ["node"]
        }
  • エラーの解消を確認

    • ng serve時に正しくAPの画面が表示される
  • ここまででAngular APからAWSのリソースとAPI連携する下準備が整いました

    • 以下についても後日UP予定です
      • AWSの各リソースの利用方法、実装方法
      • Ampliyfy(BaaS)でAWSと連携させる手法

参考

関連記事

Angularアプリの開発支援ツールAugury(Chrome拡張機能)

  • 今回はAngularでWEBアプリを開発する際に簡単に利用できるツールを紹介します

Auguryと は?

  • Angularの開発支援ツール
  • Google Chromeの拡張機能
  • Chromeをメインブラウザとして利用しているデベロッパーには必須とも言えるツール

できること

  • 標準のデベロッパーツールに以下の機能を追加できます
    • Componentの階層構造やプロパティ値の図示
    • ルーティング情報のグラフ化
    • import済みモジュール構成のリスト表示

導入方法

  • Chrome Webstoreにアクセス

  • “Chromeに追加”をClick

  • ブラウザの右上にAuguryの丸いアイコンが追加されます

利用方法

  • Angular APの起動

    • まずは以下のコマンドでAPの画面をChromeに表示しましょう
      1
      ng serve --open
  • F12キーで開発者ツールを起動

  • ブラウザの右側に表示される開発者ツールに追加されているAuguryタブを選択

  • “Component Tree”タブのInjection Graph

    • コンポーネントとサービスの依存関係をグラフ表示
      • 個人的に一番利用する機能です
  • “Router Tree”タブ

    • ルート構造をツリー表示
  • “NgModule”タブ
    • import済みのモジュール構成を確認可能

備考

Github.comからGithubEnterpriseへの移行手順

概要

  • リポジトリ移行(Github⇒GHE)の備忘録です
  • 想定する状況
    • Organizationごと中身をまるまる移行したいパターン
    • Commitログ等は特に移行する必要無く、シンプルな手法で手早く終わらせたい
  • 事前調査
    • organization単位の以降はできない
    • リポジトリ単位の移行は可能
    • GHE内に同じ名称のOrganizationやリポジトリを作成可能
      • ★一意性のチェックがGithub側とは隔絶されている

手順

1. GHEでOrganizationを作成

  • Githubと同様の名称で問題無し
    • URLは前半が企業ごとのものに変わる
    • SiteAdmin権限が必要
      • GUIで操作

2. GHEでリポジトリを作成

  • Github.com側と同様の名称で問題無し
    • 空のリポジトリを一通り作成
      • GUIで操作

3. Local端末で移行対象のリポジトリのデータを退避

  • 各リポジトリの中身をデスクトップ等へコピー
  • Gitリポジトリの管理場所:Dドライブから削除
    • この後、GHEから同様の名称のリポジトリをCloneするため
    • Dドライブでlsコマンドを打って削除されたことを確認

4. GHEからLocalへClone

  • 各リポジトリ(空)を端末へClone
    • URLはリポジトリのページの”Clone or download”タブより確認
      1
      git clone <リポジトリのURL>

5. Cloneした空リポジトリに退避データをコピー

  • GHEからCloneした空リポジトリへ、退避場所からコピー

6. GHEのRemoteにデータを登録

  • 各リポジトリで以下の作業を実施する
  • 変更内容を保存
    1
    2
    git add *
    git commit "Repository Migration"
  • Remoteへ送信
    1
    git push

    Github Pagesが含まれている場合

  • _config.ymlに設定する公開URLを変更する必要がある
  • GHEにおけるGithub PagesのURLは以下のようになる
    1
    https://pages.<gheのURL>/<Organization名 or ユーザ名>/<リポジトリ名>.io

7. GHEで確認

  • GHEの問題無くデータが移行できていることを確認

  • Github pagesが含まれていたため、ブラウザで表示されるようにする

  • リポジトリのSettingsより、以下のようにGithub pagesを有効にしてSave

  • GHEにおけるGithub PagesのURLは以下
    1
    https://pages.<gheのURL>/<Organization名 or ユーザ名>/<リポジトリ名>.io

8. Github.comより移行元を削除

  • リポジトリを削除
  • Organizationを削除
    • 管理者権限が必要

About This Blog

著者について

 初めまして。本ページをご覧頂き有難うございます。都内の総合電機メーカーで、サービスの実証や技術検証を担当している若手エンジニアです。技術分野としては、主にAWS, Firebase, DevOps等に関連したPoC(Proof of Concept)を担当しています。

学生時代は早稲田大学の創造理工学部で3Dプリンターの研究をしていました。コンピューターサイエンスの基礎を学ばないまま、モダンな技術を扱うことになったので、日々苦労しています。

  • ざっくりスキルマップ
@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

×