[無料RPA] Windows Power Automate Desktop インストール~Webの自動操作方法

  • MSが提供開始したRPAツールについてのメモ
  • Windows 10ユーザーは無料で使える
  • Webの簡単な操作程度なら10分で誰でも覚えることができる

インストール

  • 以下の”Download free”からインストーラーをダウンロード
    -Power Automate

  • インストーラーを起動
    Windows Power Automate Installer
    F

  • 次へ

  • 使用条件にチェック/インストール
    Windows Power Automate Installer2

  • 以上でインストールは完了
    Windows Power Automate Installer 3

ブラウザ拡張機能の設定

  • メインブラウザがChromeの場合は以下を入れたほうがいい
    image

  • Microsoft Power Automate

    1
    2
    3
    Power Automate を使用すると、コンピューターの手動のプロセスとタスクを自動化できます。

    拡張機能をインストールすると、Web スクリプト、データ抽出、Web テスト、Web フォームへの入力、API 呼び出しなどが自動化されます。また、Power Automate Desktop の Web レコーダーも有効になります。

セッティング

  • Power Automate Desktopを起動
    Power Automate Desktop

  • メールアドレスを入力/Windowsアカウントを選択
    Power Automate Desktop Setting

  • 国を選択/開始する
    Power Automate Desktop Setting 2

  • 以上でセットアップは完了
    Power Automate Desktop Top

使用方法

フローの作成

  • “新しいフロー”を押下
    Power Automate Desktop Making Flow

  • フロー名を入力して作成を押下
    Power Automate Desktop Making Flow 2

  • 後はアクションや変数を設定してワークフローを作り上げていく

Power Automateのアクション

Power Automate Desktop Action

  • ざっと見た限り他のRPAツールで可能な大抵のことができそうでした
    • AWSなどの他社クラウドの操作まで
    • 無料なので、既存のRPAベンダーは厳しそう

使用例1: Webページの自動起動

  • まずはWebページを自動で起動させてみました
  • アクション/Webオートメーション/Webフォーム入力/新しいChromeを起動する
    • 各パラメータを設定後に保存

Power Automate Desktop Chrome

  • 上の実行ボタンを押すことでchromeが自動起動することを確認できる

使用例2: ボタンの自動押下

  • 以下のアクションを追加する
    • アクション/Webオートメーション/Webフォーム入力/Webページのリンクをクリックします

image

  • UI要素の追加を押下
    • 実際の画面から要素を選択できる
    • 今回はGithubを開いてNew Issueボタンを押すように設定した

Power Automate Desktop Sample Flow

所感

  • 使用例のようにボタンを押させていくだけでも、誰でも大抵のWEBアプリの単純操作を自動化できる

    • Webアプリの簡単な動作テストもできそう(エンジニアであればテストコードを書くべきだが)
  • Microsoftにしては直感的に操作可能

    • 使用例程度のフローであれば、特にドキュメントを見ずに5分もかからず作れました
  • ページ上の要素からのデータ取得や、TeamsやExcel等の他のアプリとの連携、条件分岐なども使っていけば、自由度は高そう

    • スクレイピングは自分でプログラムを書くとなると面倒
  • まずは会社の勤退システム(Webアプリ)の自動入力から初めてみようと思います

関連

Adobe XDによるUIデザイン/プロトタイピング

Adobe XDについてのメモ。XDはデザインだけでなく、プロトタイピングもでき、インタラクティブに動く(ex. 画面遷移, ポップアップ)APのモックを短時間で用意できるツールです。本確的な実装に入る前に、ステークホルダーにUXを検証してもらうことで、後の改修作業のリスク低減を見込めます。

特にデザイナー不在のPJにおいては、ExcelやpptによるUI設計を避けるために、エンジニアや営業も覚えておくと役立ちます。ハッカソンやアイデアソンにも使えそう。

Adobe XD thumbnail design

ダウンロード〜インストール

  • AdobeのサイトからXD_installer.dmgをダウンロード
Adobe XD
  • インストーラーを開く

    installer
  • 指示に従ってインストール

    Adobe XD Install
  • なければAbodeのユーザ登録が必要

    Adobe ユーザ登録
  • インストールが完了すると以下の画面が表示されます

    Adobe XD desktop

UI Kitを導入する

Adobe XD UI Kit

デザイナー以外が利用する場合は、更の状態から作らずにテンプレを使うのが一般的

  • 以下のサイトからUI Kitを導入できる

  • AngularなどのWEBフレームワークでフロントエンド開発を行うのであれば以下を導入すると良い

    • AngularでUI開発に用いるAngular MaterialはこのGoogle Material Designが元になっている
Google Material Design
  • ローカルにKitをダウンロードすると、Light ThemeとDark ThemeのXDファイルを入手できる

    • それぞれのファイルを開くと、Adobe XDで以下の様に表示される
  • Dark Theme

    Adbo XD Dark Theme
  • Light Theme

    Adobe XD Light Theme

UIのプロトタイピング

  • 新規ドキュメントを作成からデザインしたいタイプを選択してデザインを始められる
    • ex. モバイル, Web, カスタムサイズ
Adobe XD desktop

リンク機能

  • 共有タブ/右のナビから、作成したデザインやプロトタイプを任意の形式で公開することができる

    Adobe XD make link
  • 生成されたURLにアクセスすると以下の様に表示される

    • 関係者にコメントを書き込んでもらうことも可能

AbdobeXD Link Smaple

  • 表示設定

    AdobeXD リンク 表示設定
  • 以下の4種から設定可能

    • デザインレビュー
    • 開発
    • プレゼンテーション
    • ユーザーテスト
    • カスタム
  • 無料アカウントでは1リンクまでしか公開できないが、作品→公開中のアイテム→完全に削除 より消せば問題なし

    • 仕事で使用する場合は、法人アカウントを作ると良い
  • 以下で詳しく解説されていた

モバイルデバイスのプレビュー

Mobile Device Preview

参考

Touch Cast Studioでオンライン会議/プレゼン/Zoomウェビナーを演出する

ウェブ会議の演出ツールとしてmmhmmが流行っていますが、iPad持ちはより自由度の高いTouch Cast Studioがオススメです。mmhmmについては以下の記事にまとめています

概要

  • iPad向けのアプリ
  • ニュース番組のようにキャスターと資料映像を1画面に表示できる
    • mmhmmと似ているが、仮想カメラではなく独立したアプリケーション
  • iPadとMacBookは画面を共有可能であるため、一緒に使うと便利

使い方

  • PCでZoomに接続 → TouchCast Studioの画面を共有
    • iPadだけで、Zoomアプリを使ってTouchCast Studioを利用することもできますが、見え方が少し異なります
    • iPhone/iPadの画面をAirPlay経由で共有する機能がZoom側に標準で備わっている

コンテンツの表示

  • 以下の様に任意のコンテンツを画面上複数に配置できる
    • ex. WEBサイト、画像、他のAP

Touch Cast content

フィルター

  • 以下の様にエフェクトを変更可能
    • 以下はモザイクフィルター

Touch Cast Filter

SOUND EFFECT

  • 例えば、Touch Castの機能でクイズを出題 → SOUND EFFECTで正解/不正解音を鳴らす といったことができる。
    リモートの研修や授業をインタラクティブに演出するのに便利

Touch Cast sound effect

  • その他にもホワイトボード機能も会議や解説に便利
  • MacBook側のビデオ会議ツール(Zoom, Teams, Meet)の画面共有からiPadの画面を選択すれば良い
  • 録画もできるため、ちょっとしたアプリのデモや研修動画にも使えそう

参考

関連記事

その他

WiresharkをMacBookに入れてネットワークトラフィックを解析する

WiresharkのCLI&GUI版をMacBookに入れて、解析&シーケンス図生成するまでのメモ

CLI版(Tshark)

CLI版はGUI版より高速

  • 以下からインストーラーをダウンロードして実行

  • chomodBPFインストーラを実行

  • 以下のコマンドを実行

    1
    brew install wireshark
  • 動作チェック

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    MacBook-Pro ~ % tshark -D
    1. en0 (Wi-Fi)
    2. p2p0
    3. awdl0
    4. llw0
    5. utun0
    6. utun1
    7. utun2
    8. utun3
    9. en5
    10. lo0 (Loopback)
    11. bridge0 (Thunderbolt Bridge)
    12. en1 (Thunderbolt 1)
    13. en2 (Thunderbolt 2)
    14. en3 (Thunderbolt 3)
    15. en4 (Thunderbolt 4)
    16. gif0
    17. stf0
    18. ap1
    19. ciscodump (Cisco remote capture)
    20. randpkt (Random packet generator)
    21. sshdump (SSH remote capture)
    22. udpdump (UDP Listener remote capture)

GUI版(Wireshark.app)

  • 以下を実行すればOK
    1
    brew cask install wireshark

活用例

  • まずはネットワークトラフィックを取得する
    • tcpdumpでトラフィックをdumpファイルとして出力する例
      • .pcap拡張子で保存することでWiresharkでそのまま開くことができる
      • 以下の実行後に解析した通信を実行する
        1
        tcpdump -i ens192 -s 1024 -w tcpdump.pcap

Wiresharkでトラフィックを解析

  • 取得したファイルを開く
    • 以下の様にトラフィックを確認できる

Wireshark

pcapファイルからシーケンス図を作成

  • メニューバーの”統計” → ”フローグラフ”から以下を表示できる。PDF保存も可能
    Wireshark シーケンス図

参考

Githubの Issue & Project(カンバン)でプロダクトバックログ/タスクを管理する(アジャイル開発の運用)

  • アジャイル開発におけるバックログ管理をGitで完結させる手法について、説明用のメモ
    • プロダクトバックログとは?
      • ロードマップと要件に基づいて開発チームが行う作業に優先順位を設定したリスト
      • アジャイル開発においてはタスクや検討事項を”プロダクトバックログ”として定義する(フィーチャーとも呼ぶ)
        • バックログをリスト化 ⇒ 優先度付け ⇒ 順次消化 ⇨ チームのベロシティを計測 ⇨ 次期計画策定 というサイクル(イテレーション/スプリントと呼ぶ)を回す方式が一般的
    • 他のタスク管理ツールも色々試したが、個人的にはこの手法が最も効率が良いと感じた
    • Zennなどを組み合わせてバーンダーンチャート化すると、より状況を可視化しやすい(Velocityを計測しやすい)

前提知識

  • Issue

    • ここにバックログを登録していく
    • ラベルでカテゴリライズする
      • Ex. Question(質問), Bug(バグ), enhuncement(追加機能), Documentation(ドキュメント整備)
    • Assigne
  • Projects (カンバン)

    • Issueを一覧化するGitの機能
    • 複数リポジトリに分割して開発する場合でも、Projectを使ってissueをまとめることが可能

これらのGitの機能を使って、プロダクトバックログの管理を実施する。
他のタスク管理ツールは使用しない。

バックログ管理の大まかな流れ

  1. Project(カンバン)を作成する

  2. バックログをIssueとして登録

    • 小タスクをチェックボックス形式で設定
    • 生成したIssueはカンバン(Project)のTo Doに自動的に反映される
  3. カンバンよりバックログ(Issue)一覧を確認。着手するものを選択

    • 着手を開始したIssueは、カンバン内でIn Progress columnへ移動
  4. 完了したタスクにチェックを入れていく

    • Pull Request時にはIssue番号をコメントに入れる
    • そうすることでPRのClose時に自動的にIssueもDoneとなる
  5. 全タスクが完了したIssueはDone columnへ移動

    • 1スプリントに幾つのIssueをDoneに持っていけるか?でチームのVelocityを計測する
    • Velocityを元に、次スプリントでどこまでやるか?を決める。アジャイルは適当に進めて良いというのは間違い
    • 可視化ツールとの連携でバーンダーンチャート化するとより状況を可視化しやすい
      • 経験上、企業の開発環境(Github Enterprise)では使えないことが多い

0. Project(カンバン)を作成する

バックログ一覧(Issue一覧)を確認する画面だと考えてよい
Issueとしてバックログを登録する前に、Project(カンバン)を作成する必要がある
後に登録したIssueがこちらのTo doに自動的に表示される

Github Project

  • github 任意のリポジトリ画面
    • Projctsタブ
    • Creaate a Project
  • プロジェクト設定画面
    Project Setting
    • PJ名と説明文を入力
    • Template (今回はAutomated kanban)
      • None: デフォルトのもの
      • Basic kanban
        • To do, In progress, Doneの列を持つ基本的なカンバン式ボー
      • Automated kanban
        • 各列にある課題やプルリクエストを自動的に移動させるためのトリガーが組み込まれている
      • Automated kanban with reviews
        • プルリクレビューのためのトリガーを追加したカンバン
      • Bug triage
        • To do、High priority、Low priority、Closedの各カラムでバグのトリアージと優先順位付けを行うもの
    • Create project
  • 作成されたカンバン
    git project kanban

1. Issueでタスクを登録

次にIssueでタスクを登録していく。ここで作成するIssueに事前に作成したProjectを紐づけすることで、カンバンから一覧として確認可能になる。

  • Issueの作成方法
    • GHE Issueタブ
    • New Issue
    • 右側の各種設定
    • コメント入力
    • Submit new issue
  • タスク以外の相談事項もIssueで発行する
    Issueを活用した相談例
    Issue作成時に記載するコメントのテンプレートや、設定のルールをチーム内で事前に定めておく
    Read.meやWikiに載せておく

Issue作成時の設定ルール

以下を一通り設定することでタスク管理の効率化を図れる。
後でカンバンからIssueの設定を変更することも可能。

  • Assignees
    • タスクの担当者を指定する
  • Labels
    • バックログをカテゴライズ可能
      • 元々主なカテゴリのラベルが用意されており、追加も可能
        • Ex. bug(バグの修正時), documentation(資料作成), enhancement(機能拡充)
      • タスクの重要度や、重さまでラベル化するかはチームで相談して決める
  • Milestones
    • 期限を指定する

Issueコメントフォーマット

Issueを生成する際に.md形式で説明を書くことができる
以下のようなフォーマットをチームで定めておくとよい

  • ルール例

    • WHY/WHATを必ず書く
      • 根本的な内容の後戻りを防ぐため
    • タスクリスト記法で未完了/完了の変更を行う
      • 以下のように書くと、チェックボックスとして扱うことが可能になる
        • これでバックログに含まれる小タスクを表す
          1
          - [ ] Task
  • Issueコメントフォーマット例

    • バックログ毎にissueを生成する場合の例。より細かい単位でタスク毎にissueを作るチームも多い
    • 各メンバがGitに慣れていれば、タスク単位でIssueを切るとうまくいく
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      ## 概要
      ### WHY
      なぜこのIssueが必要になったのか?
      ### WHAT
      何をするのか?
      ## タスク
      以下の書式で書くとチェックボックスとして扱える
      - [ ] Task a
      - [ ] Task b
      ### 関連課題
      ---
      関連する課題があればここにリンク形式で載せる(Backlog)
      ### 親課題
      ---
      親の課題があればここにリンク形式で載せる(Backlog)
      ### 備考
      ---
      別途記載する必要があれば書く
      ## Reference
      参考文献があれば記載
  • こういったフォーマットをテンプレートとしてGitに登録しておくと利便性が高まる

    • 守らないメンバが出て形骸化してしまう事態を防ぐ
    • 少なくともREADMEか、Wiki等のメンバが閲覧可能な場所に置いておく

issueテンプレートの登録方法

先ほどの様なフォーマットを複数種登録して、issue生成時にユーザに選択させることができる

  • Settingsタブ/Options/Features/issues/setup templateを押下
    github issue Setup Templates
  • Add Template
    • Custom templateを選択することでチーム独自のTemplateを登録できる
    • 元々Bug ReportとFeature requestが用意されている
    • 以下のようにTemplateを追加していき、後は”Preview and edit”から用途に応じたフォーマットを用意する
      • 混乱を避けるために一種にするか、用途ごとに分けるかはチームで相談する
        github issue add template
  • 元々用意されているFeature requestの中身は以下
    • これを利用すれば、機能提案を非同期コミュニケーションで行うことが可能になる
    • 開発の中で思いついた機能をミーティングの場を待たずにすぐさま提案でき、開発スピードの向上を見込める
      github issue Feature Request
  • custom issue template
    • ここに独自のフォーマットを登録する
    • 設定項目は以下
      • Template name
      • About
        • tempalteの説明
      • Template content
        • 上記のプロダクトバックログの登録用のフォーマットをここに入力
      • Optional additional items
        • Issue default title
          • デフォルトのタイトルを指定可能
        • Assignees
          • このテンプレートを活用してissueを生成する際の担当者を設定可能
          • 対応者が確定するレベルで細かくテンプレートを用視するのであれば有用
        • Labels
          • このテンプレートを活用してissueを生成する際のlabelを指定可能
          • 指定しておけばLabelのつけ忘れを回避できる
  • 各Templateの編集後
    • propose changes
    • Commit changes

Project(カンバン)の運用フロー

以下の流れで、バックログの進捗状況を可視化する

  • 着手を開始したIssueをIn Progressへ移動
  • 完了したタスクのチェックボックスを埋めていく
  • 全タスクが完了したIssueをDoneへ移動

Pull Request関係のルール

  • Pull Request発行時には、コメントに #Issue番号 と書く

    • GitHubではPull Requestも1つのIssueとして扱われる
    • 対象Issueのコメント欄上部に、タイムライン形式でコミットが表示されるようになる
    • Issue番号をPull Requestのコメントに追加することで、Pull Request(小さなIssue)を束ねたIssue が作成できる。これをうまく利用することで、細かいタスクが各所に散らばる問題を防ぐことが出来る
  • Issue完了時にはPull Requestのコメントに Fix #issue-id と書く

    • Tips: : Pull Requestのマージと同時にIssueを閉じる方法
    • commitメッセージ、Pull Requestのメッセージ、もしくはPull Requestのコメントで、issue idの前にfixかcloseが含まれていると、Pull RequestがマージされたタイミングでIssueも同時に閉じられることになる。
    • 記載例
      1
      Fix #1234
      1
      To close #3456
    • このように書くとIssueの閉じ忘れが減る
  • アジャイル開発自体については以下にまとめた


参考

関連記事

その他


[vscode macbook(zsh)] codeコマンドでCLIからファイルを開閉可能にする

vscodeを入れたら初めにする設定のメモ。CLIからcodeコマンドでファイルを開けるようにします。

環境

  • zsh
  • macOS
  • MacBook Pro(2020)

設定

  • 設定ファイルを開く

    1
    vi ~/.zshrc
  • 以下を追記

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function code {
    if [[ $# = 0 ]]
    then
    open -a "Visual Studio Code"
    else
    local argPath="$1"
    [[ $1 = /* ]] && argPath="$1" || argPath="$PWD/${1#./}"
    open -a "Visual Studio Code" "$argPath"
    fi
    }
  • 以下を実行

    1
    source ~/.zshrc
  • 以上でcodeコマンドによるファイルの開閉が可能になった

    1
    code <filepass>
  • 参考

mmhmm使用方法 プレゼン/配信ライブ用の万能仮想カメラで画面を飛び回り自在に操る

最近話題のバーチャルカメラアプリmmhmm(読みはンーフー)というツールのベータ版を試用してみたので解説します。テレビ会議や配信に手軽に演出を加えられるツールです。Youtuberの間でも流行りそう。

mmhmm概要

  • mmhmm(んーふー)
    • プレゼン用の仮想カメラアプリ
      • スライドと自分を重ねて表示したり、半透明にして画面を飛び回らせたりできます
      • 録画や配信機能もあります
      • Dynamic Deck
        • 遠隔で別メンバーが共同でスライドを操作する機能
      • 配信ライブやオンライン飲みにも使われ始めているようです
    • 全ての主要ビデオ会議/動画アプリに対応
      • Ex. Zoom Meet, Youtube, Teams…
    • ベータ版のテスト中(2020/08 時点)
      • 現時点ではmacOSのみに対応
      • Windows版も開発中とのこと
    • 利用方法
      • 公式サイトで申し込むことでダウンロードリンクと招待コードを取得できます

活用例

  • こんな感じでスライドと自分を被せて表示したり
    mmhmm スライド

  • 自分のサイズは自由に変更できます
    mmhmm 自分を小さく表示

  • 薄くなったり色をつけることも
    mmhmm 薄い青

  • 飛び回ることもできます

    • 直接重要な箇所を指差し
      mmhmm飛び回る
  • ニュースキャスターのように何かを表示したり
    mmhmm 画面表示

  • ライブ配信にも
    mmhmmライブ配信

  • スマホ画面のデモにも
    mmhmm スマホ画面のデモ

まだまだ追加機能を開発中とのこと

申込/ダウンロード

mmhmm grab invite

  • 8/3に申し込み、一週間後(8/11)に以下の招待メールがきました

    • ダウンロードリンクとコードが送られてきますmmhmm 招待メール
  • リンクよりDownloadを実施

    Download mmhmm
  • インストーラを起動

    スクリーンショット 2020-08-11 13 47 06
  • インストール終了後に、申請に利用したメールアドレスと招待コードを入力

    • Create Account

使ってみる

  • アプリの画面は以下の様な感じ
    • 自分の色や位置、サイズはPresenterから変更できます
    • ドラッグでの移動も可能
スクリーンショット 2020-08-11 22 21 00
  • Record

    • mp4形式で録画できますスクリーンショット 2020-08-11 22 26 50
  • Capilot

    • mmhmmの操作を他のメンバーに任せられますスクリーンショット 2020-08-11 22 28 17
  • 画面上部のパネルから表示しているスライドなどの表示形式を変更可能です

    • Off/Default/全画面スクリーンショット 2020-08-11 22 30 21
  • Rooms

    • バーチャル背景の様なものスクリーンショット 2020-08-11 22 32 45
  • 下部のパネルより表示する対象を変更できます

    • 写したいスライドやブラウザなどを選択するのもここ
スクリーンショット 2020-08-11 22 34 41

Touch Cast Studio

関連記事

MacBookProセットアップまとめ/環境構築

Macbook Proを買って最初にした一通りの作業のメモ

ソフトのインストール

  • Chrome
    • 拡張機能は引き継ぎ
  • VSCode
  • Spactacle
  • Slack
  • Teams
  • Zoom
  • mmhmm
    • WEB会議用
  • DeepL
    • 翻訳アプリ
  • SparkAR
    • ARフィルター開発用
  • MindNode
    • マインドマップの作成用
  • Draw.io
    • 図表の描画よう
  • SYNCROOM
    • リモートセッションツール
  • TOOLS FOR UR44
    • インターフェイス用のソフト

本体設定

キーのリピートを最速化

  • 左上のリンゴマーク/Keyboard
  • KeyRepeat, Delay Until Repeatのバーを一番右に変更
  • タイピングが高速になる

画面分割(Spactacle)

  • Macはそれぞれのアプリのウィンドウの大きさを調整しないと画面に複数のウィンドウを表示して同時に見ることができない
  • 以下からSpectacleをダウンロードして,Applicationsに入れる
  • 以下のショートカットを利用可能になる
    Spactacle 1.2
  • 使用例:Left Half

    • Option + Command + ←
    • Windows Key + ←でやっていたことと同じことが可能になる
  • 自動で使えるように設定

    • Spectacleを開く
    • Launch Spactacle at loginにチェック

環境構築

  • git
    • CLI上でgit –versionを打ったら「Developperツールを利用しますか?」と聞かれ自動でMacが入れてくれた
  • Homebrew
  • Node.js
    • 先にHomebrewrew, Nodebrewを入れる
      • Homebrew
        • Mac用のパッケージマネージャ。ツールのインストールとか諸々を管理してくれる
        • Nodebrewを入れるために使う
        • こちらのコマンドをコピペして実行
      • Nodebrew
        • Node.jsのバージョン管理ツール。複数のバージョンのNode.jsをインストールしたり、切り替え等々が可能
        • 以下を実行するだけ
          1
          brew install nodebrew
      • Node.jsをインストール
        • インストール可能なバージョンを確認
          1
          nodebrew ls-remote
        • インストール
          • 最新版
            1
            nodebrew install-binary latest
          • バージョン指定する場合
            1
            nodebrew install-binary {version}
        • 警告が出てインストールに失敗した場合は以下を先に実行
          1
          mkdir -p ~/.nodebrew/src
      • インストールされたNodeを有効化
        1
        nodebrew use v14.7.0
        • 以下を実行して、Current: v~と表示されればOK
          1
          nodebrew ls
      • Nodeの実行パスを通す
        • bashで使う場合
          1
          echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
        • zshで使う場合
          • MacOS Catalinaからは標準で起動するターミナルがzsh
            1
            export PATH=$PATH:/Users/hiro/.nodebrew/current/bin
      • 確認
        • 以下を問題なく実行できればOK
          1
          2
          node -v
          npm -v
  • Hexo
    • 以下をHexoディレクトリで実行
      1
      2
      npm install -g hexo
      npm install hexo --save
  • Angular CLI
  • Firebase CLI
  • AWS CLI

VSCode設定

以下は最低でも設定しておくと生産背が上がります

  • codeコマンドでファイルを開けるようにする

    • Shift + Command + pでコマンドパレットを開く
    • shell commandで検索
      • Shell Command: Install ‘code’ command in PATHを選択してInstall
      • 以下が表示されればOK
        1
        Shell command 'code' successfully installed in PATH
  • Command + ` でエディターとCLIを移動可能にする

  • Control + Shift + Tab

    • エディタータブの移動
  • Shift + Option + Command + ↑

    • マルチカーソル入力
  • Control + Shift + G

    • git

参考

draw.ioをVSCode上で使用/図表をGitで一元管理

描画ツールのdraw.ioをVSCodeの拡張機能で利用可能にして、データをgitで一括管理する方法を解説します。
draw.io以外の描画ツールについては以下にまとめてあります

1. 概要

1.1. draw.ioとは

  • draw.io

    • WEBブラウザベースの描画ツール
      • Googleアカウントで運用でき、ローカル/Google Drive/Github等にデータを保存可能
    • 大抵の図(ex. フロー, システム構成…)はこれで作成可能です
    • 完成したらpng形式で出力して、markdownやpptに差し込むのが一般的
  • テンプレートの例

    • FlowChartやクラス図
      image
    • Cloudのアーキテクチャ
      image
  • WEBで利用する際の問題

    • 共同開発時の管理の煩雑さ
      • あるメンバが作った図を、別メンバが編集できない
        • レビュー、修正が面倒
      • gitでAPのコードと一緒に一括管理できない
    • セキュリティ
      • 制約の厳しいPJであれば、ツール自体を使えないことが多い

上記の問題を解決するために、ローカル版を利用します

1.2. VSCodeの拡張機能

VSCode Draw.io Local

  • 拡張子を.drawio.svgにしてファイル作成すると、Draw.ioに関連付けられ、svg形式のファイルを作画&作成可能
    • ファイルを開くだけでDraw.ioの編集画面VSCode内に立ち上がる
  • メリット
    • SVG形式
      • gitで管理可能
        • 共同編集、差分管理が用意
      • 読み込みがpng等と比較して高速
    • セキュリティ上の制約をクリア
  • mdファイルには以下のようにパス参照で埋め込む(HTMLからimgタグで参照してもOK)
    1
    ![](img/image1.drawio.svg)

2. 使用方法

2.1. 拡張機能をInstall

  • Draw.io IntegrationをInstall
    • VSCodeの左のサイドナビよりExtensionsアイコンを選択(or Ctrl+Shift+X)
    • Draw.ioで検索

Draw.io Integration

  • アイコン横のInstallボタンを選択
    • Installすると以下の様な説明ページを確認出来ると思います

Draw.io Integration

2.2. ファイルを生成

  • .draw.io.svg形式のファイルを生成
    • markdownのドキュメントと同じディレクトリに配置(後でパス参照するため)
      1
      touch sample.drawio.svg

2.3. 図表を編集

sample.drawio.svgを開くと自動的にDraw.ioの編集画面が開きます

drawio.svg

  • WEBのDraw.ioと同様に編集
    • VSCodeのタブの一つで編集できるのが中々便利
  • Ctrl+S等で保存
  • Exportの必要はありません

2.4. Markdwonから参照

  • 相対パスで先ほどのsvgファイルを参照

    • 以下で表示された
      1
      ![](./sample.drawio.svg)
  • プレビューの様子

    • 先ほど編集した図が出ます
      draw.io vscode preview

後はGitにまとめて送れば、他メンバも同様に編集できます

関連記事

[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

@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

×