オムライスの備忘録

数学・統計学・機械学習・プログラミングに関することを記す

【ライフハック】Githubで管理しているMarkdownを自動でGoogleSlidesに変換する#04

Programming Programming-Githubで管理しているMarkdownを自動でGoogleSlidesに変換する

まえがき

Google Docs -> Markdown 変換

CircleCI無料枠

【ライフハック】Githubで管理しているMarkdownを自動でGoogleSlidesに変換する#03

Programming Programming-Githubで管理しているMarkdownを自動でGoogleSlidesに変換する

まえがき

image7

準備作業

  • Markdown 管理するために Github レポジトリを作成 (Private推奨)
  • 作成したレポジトリに CircleCI を連携
  • 作成したレポジトリに .circleci フォルダを作成し、config.yml を作成 (#01)
  • 作成したレポジトリに secrets フォルダを作成し、以下のファイルを設置
    • credentials.json (#02)
    • client_secrets.json (#02)

処理開始

  • 準備ができたら、PowerPoint に変換しする Markdown ファイルを作成
  • Google Drive にPowerPoint ファイルが生成されているかを確認
  • 用途によってはGoogle Slides アプリケーションでひらけば、変換可能

変換結果のスライド

【ライフハック】Githubで管理しているMarkdownを自動でGoogleSlidesに変換する#02

Programming Programming-Githubで管理しているMarkdownを自動でGoogleSlidesに変換する

Githubで管理しているMarkdownを自動でGoogleSlidesに変換する#02

まえがき

  • Googleのクレデンシャル編
  • Markdown をパワーポイントに変換したファイルを Google Drive にアップロードするための認証準備

image6

作業内容

  • Google Drive の認証OAuth について
  • Google APIsでOAuth クライアント IDを取得
  • Docker環境作成
  • GoogleDrive へ初回アクセスしてクレデンシャル情報を取得

参考

Google Drive の認証OAuth について

  • Google Drive へ ファイルをプログラムからアップロードしたい
  • しかし、誰でもGoogle Drive のリソースにアクセスできてしまったらセキュリティ上良くない
  • なので、予めアクセスするプログラム(アップロードプログラム = PyDrive)をGoogle に教えておく(= 「OAuth クライアント ID」を発行する -> client_secrets.json)
  • そして、ユーザーがそのプログラムを使用して自身のGoogle Drive のリソースにアクセスするときに、そのプログラムがリソースにアクセスすることを許可することでクレデンシャル情報を取得する(credentials.json = これがあれば、その「ユーザーのリソース」に「そのプログラム」がアクセスできる)

Google APIsでOAuth クライアント IDを取得

Docker環境作成

  • 「Google Drive の認証OAuth について」でもあったように、一度ファイルアップロードプログラムを起動させ、Google Drive へアクセスすることで「client_secrets.json」が取得できる(これがあればプログラムからGoogle Drive へアクセスできる)
  • そのために、Docker環境でアップロードプログラムが起動できる環境を作成する
  • md2ppt_withGDrive を git clone
  • secrets に client_secrets.json 設置

GoogleDrive へ初回アクセスしてクレデンシャル情報を取得

  • docker_exe.sh がレポジトリにあるので、それを使って初回の処理を開始
  • 処理内容は
    • docker build
    • docker run
  • コンテナ内に入ったら、md2gslides.sh ./test.md を実行
  • うまく実行できていたら、ターミナルにURLが表示される
  • ブラウザを利用し、URLにアクセス
  • ファイルをアップロードしたいユーザーを選択

image3

  • アクセス内容を確認

image4

  • コードが表示されるので、コピーしてターミナルに入力

image5

  • secrets フォルダに credentials.jsonが生成されていたら成功です
  • credentials.json と client_secrets.json の準備が完了

【ライフハック】Githubで管理しているMarkdownを自動でGoogleSlidesに変換する#01

Programming Programming-Githubで管理しているMarkdownを自動でGoogleSlidesに変換する

まえがき

  • 前 : Githubで管理しているMarkdownを自動でGoogleSlidesに変換する#00

  • 次 : Githubで管理しているMarkdownを自動でGoogleSlidesに変換する#02

  • CircleCI編

    • Githubとの連携
    • CircleCIの設定ファイル

image2

参考

Githubとの連携

  • Github に Markdown の変更を push したタイミングで処理を開始したい
  • 普段あまり使用しないが、無料で処理を走らせられるのでこれからも使っていきたい
  • Githubのアカウントがあれば、すぐに連携できる

CircleCIの設定ファイル

  • CircleCIの設定ファイルは .circleci/config.ymlに設置
version: 2

jobs:

  build:

    docker:

      - image: python:3.6-slim

    steps:

      - checkout

      - run: apt update

      - run: apt install -y git

      - run: git config --global core.quotepath false

      - run: git config --global core.pager "LESSCHARSET=utf-8 less"

      - run: git clone https://github.com/yonedahayato/md2ppt_withGDrive.git

      - run: pip3 install -U pip

      - run: pip3 install -r ./md2ppt_withGDrive/requirements.txt

      - run: dpkg -i ./md2ppt_withGDrive/pandoc-2.10.1-1-amd64.deb

      - run: cp ./md2ppt_withGDrive/settings.yaml ./

      - run: git diff --name-only --diff-filter=ACMR HEAD^..HEAD -- '*.md' | xargs -I% ./md2ppt_withGDrive/md2gslides.sh %

設定ファイルの詳細

  • docker image は pythonを使用
  • apt を使用して git を install
  • git の日本語の設定
  • Markdown を パワーポイントに変換し、GDriveにアップロードするプログラムを取得
  • pip で python libraryを取得
  • Markdown を パワーポイントに変換するプログラムをインストール (pandoc)
  • GDrive にアップロードするための設定ファイルを準備 (settings.yml)
  • Github に push されれたMarkdown ファイルを特定して、処理を開始する

CircleCI で Github に push されたファイルを特定する

  • git の diff コマンドを活用し、特定する
git diff --name-only --diff-filter=ACMR HEAD^..HEAD -- '*.md'
  • xargs コマンドで処理につなげる
xargs -I% ./md2ppt_withGDrive/md2gslides.sh %

【ライフハック】Githubで管理しているMarkdownを自動でGoogleSlidesに変換する#00

Programming Programming-Githubで管理しているMarkdownを自動でGoogleSlidesに変換する

モチベーション

  • ブログへの記載をGoogleSlidesですることが多い
  • しかし、スライドの記載だと検索にひっかからないのでSEO対策したい
  • スライドを作成する前にGoogleDocsにめもしているので、それをMardown化してGithubで管理するようにしていきたい
  • Markdown を Github で管理するならGoogleSlidesへの変換を自動化できるかも？！
    • GoogleSlides への変換はいったん諦めて、パワポにします（詳しい方いたら教えてください）

使用するもの

  • Github (Markdown 管理、置き場)【private 推奨】
  • CircleCI (Markdown -> GoogleSlidesへ変換するマシン)
  • md2googleslides (Markdown -> GoogleSlides へ変換するソフトウェア)
    • と、それを使用するための環境 md2gslides (<- よくあったな、、、Dockerhub)
  • 上のと同等のことができるプログラム（使えなかったので自作しました）
    • MD2PPT + Upload Drive
  • GoogleAPI (GoogleDriveに保存するためのクレデンシャル情報)

処理フロー

drawing

  1. Markdown ファイルを編集 or 新規作成
  2. Github へ push
  3. push をトリガーにCircleCIで処理開始
    1. push したMarkdown ファイルを特定
    2. そのMarkdown ファイルを GoogleSlides PowerPoint へ変換
    3. 変換した PowerPoint ファイルをGoogleDriveへ保存

作業手順

  1. Markdown 管理用のGithub Repository を作成【private 推奨】
  2. CircleCI と作ったRepository を連携 #01
  3. CircleCI の設定ファイルを設置する #01
  4. GoogleAPIs を利用してGoogleDriveにAPIでスライドを保存できるようにする #02
  5. Markdown を Github へ Push してテスト #03
  6. 【おまけ】GoogleDocs -> Markdown #04
  7. 【おまけ】CircleCI 月ごとの無料範囲について #04

Azure さわってみた#01

Cloud Cloud-Azure

Index

今回の目的

  • 文字抽出エンジンとして、Azure Cognitive Services を使用したい

  • インターンの方に調査を行っていただくので、api keyのようなものがあればそれを発行して使用できる環境を作成できることが理想

Azure とは

Azure とは (抜粋)

Azure とは (代表的な4つのサービス)

  • Azure DevOps
    • Azure DevOpsは開発（Dev）と運用「Ops」を組み合わせたサービスです。サービスの開発からリリースまで、ソフトウェア開発を支援
  • Azure Functions
    • サーバーの構築なしでプログラムを実行できるサービス
  • Azure Storage
    • Azure用のストレージサービス
  • Azure Virtual Machines

Azure とは (参考)

Azure Cognitive Services について

  • 機械学習の専門知識がなくても、あらゆる開発者が利用することができる
  • 見る、聞く、話す、検索する、理解する、そして意思決定の各機能をアプリに埋め込むためのAPIを呼び出せる
  • 今回はそのサービスの中で以下のサービスを利用する(リンクは各サービスページ)

Azure Cognitive Services について (使用候補)

  • Computer Vision
    • 画像データ等を入力として、物体のラベル、位置やシーンの特定、テキストの抽出する
  • Form Recognizer
    • 画像データ等を入力として、テキスト、キーと値のペア、テーブルを抽出する

Portal 画面

サブスクリプションをお持ちでない場合はこのような画面になる image1

サブスクリプションとは

image2

  • AD (Active Directory) : ユーザーID認証基盤

  • サブスクリプション : 課金請求が行われる単位

    • 「課金請求」と「運用管理」の観点で利用部署ごとや商用サービスごとといった単位で分離するのがおすすめ

  • リソースグループ : Azureのリソースを整理して入れておくための箱やフォルダ

image3

サブスクリプションとは (結局)

サブスクリプションとは (参考)

リソースグループ とは

  • サービスを利用する前に、「リソースグループ」を作成する
  • すでに使用できるリソースグループがあれば、チームメンバー相談の上利用する

  • リソースグループは課金の単位ではないので、チームごとに作るよりはプロジェクトごとに作成するのが良さそうに感じた

  • 今回は利用できるリソースグループがなさそうだったので、作成した

リソースグループ 作成

  • home から リソースグループの管理画面に移動
  • 「追加」から作成

image4

  • 「リソース グループ」と「リージョン」を選択
    • デフォルトの「(US)米国西部2」を選択 (良い選択方法あったら教えていただきたいです、、)
    • 作成の反映はすぐに作成されました

Cognitive Services

  • home から Cognitive Services のサービス画面に移動
  • 「追加」からリソースを作成
  • 「Computer Vision」 or 「Form Recognizer」を選択し、作成

Cognitive Services ~ Computer Vision ~

  • 「リソース名」、「サブスクリプション」、「リージョン(場所)」、「価格レベル」、「リソースグループ」(先ほど作成したもの)を設定し、作成

    • 「価格レベル」は F0, S1から選択でき、想定される使用量に応じてマシンのスペックを変えている様子 (試用なのでとりあえず F0で設定)
    • 価格の詳細 (サービスページ抜粋)

  • リソース詳細画面へ遷移

  • リソースからクイックスタートが確認できる

image5

Cognitive Services ~ Form Recognizer ~

  • 「Computer Vision」と同様に以下の作業で使用が可能
    • リソースの作成
    • クイックスタートの確認
    • API キーとエンドポイントの確認

WebSocket Study with Python

Programming Programming-WebSocket Study with Python

モチベーション

  • django で web app を作っているときにトランプゲームアプリを作りたくなった
  • オンラインで対戦できる仕様にしたい
  • server からの送信も必要となり、双方向の通信ができるようにしたい
  • そこで WebSocket を使う、、、

まとめスライド

  • スライドにかるくまとめた

WebSocket Study 2020/05/11

Index WebSocket とは HTTP との比較 通信の仕組み ハンドシェイク 双方向通信の実現 Python での利用 Django での利用 ASGI

WebSocket とは プロトコルの一種 Webにおいて双方向通信を低コストで行うための仕組み WebSocket は HTTP 上の相乗りプロトコル 確立済みの HTTP/HTTPS 回線上で任意長・任意フォーマットデータの双方向通信 RFC WebSocket Protocol (日本語 非公式)

HTTPとの比較 HTTP 1つのコネクションで1つのリクエスト リクエストはクライアントからしか送ることができない WebSocket 一度コネクションを確立したあとは、サーバとクライアントのどちらからも通信を行うことが可能(サーバプッシュ機能) 一度コネクションを確立するとそのコネクション上で通信を行う

通信の仕組み ~ ハンドシェイク ハンドシェイクはHTTP通信によって行われる。 リクエスト HTTPのUpgradeヘッダを使用し、プロトコルの変更を行う。 レスポンス ステータスコード101「Switching Protocols」が返る。 ハンドシェイクによってコネクションが確立し、これ以降はHTTPではなくWebSocketのプロトコルで通信が行われることになる。

通信の仕組み ~ 双方向通信の実現 ハンドシェイクによってコネクションが確立すると、双方向通信をWebSocketプロトコルで行うことができるようになる。 送信データはフレームという単位で扱われる。

Python での利用 library websocket_client websockets

Django での利用 library channels

ASGI Asynchronous Server Gateway Interface WSGI を継承 asyncioを介して非同期で実行される 複数のプロトコルをサポート Channels の独自規格？

Reference 調査まとめ 今さら聞けないWebSocket~WebSocketとは~ WebSocket のはなし