Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
静的サイトジェネレータ yacho の つかいかた for v0.0.2 eqs 1/17
Slide 2
Slide 2 text
パッケージ紹介 2/17
Slide 3
Slide 3 text
yachoについて Processingやp5.jsなどの作品を公開するWebサイトを⽣成するジェネ レータ Pythonパッケージとして実装されている リポジトリ: https://github.com/eqs/yacho 作ったひと GitHub: eqs Twitter: eqs_work 3/17
Slide 4
Slide 4 text
デモ ⽣成元のプロジェクト: https://github.com/eqs/yacho-example ⽣成結果のサイト: https://yacho-demo.netlify.app 4/17
Slide 5
Slide 5 text
つかいかた 5/17
Slide 6
Slide 6 text
インストール yachoはPythonパッケージとして実装されてるので,Pythonの環境があ ればそのパッケージマネージャ(pip)を通してインストールできる. . Pythonをインストールする MacやLinuxの⼈はシステムのPythonと衝突しないようにpyenvを 利⽤するのがおすすめ . yachoをインストールする 安定版 $ pip install yacho 開発者⽤ $ git clone https://github.com/eqs/yacho.git $ cd yacho/ $ pip install -e . 6/17
Slide 7
Slide 7 text
yachoが想定してるフォルダ構造 ひとつのフォルダの中に複数のスケッチ ( sketch_yymmdd[a-z] ) がある 設定ファイル フォルダのルートに yacho.sketchbook.toml を置く 各スケッチフォルダに yacho.sketch.toml を置く 公開する画像 各スケッチフォルダの cover と images の中に置く . │ yacho.sketchbook.toml <----------- Put PROJECT config file │ ├─sketch_210401a │ │ sketch_210401a.pde │ │ yacho.sketch.toml <----------- Put sketch config file │ │ │ ├─cover │ └─images │ └─sketch_210402a │ sketch_210402a.pde │ yacho.sketch.toml <----------- Put sketch config file │ ├─cover └─images 7/17
Slide 8
Slide 8 text
yachoのコマンド2種類 yacho build : スケッチからWebサイトを⽣成する( dist フォルダに保 存される) yacho create : スケッチをyacho⽤の設定ファイルとフォルダも含めて ⽣成する Processing: yacho create or yacho create -t pde p5.js: yacho create -t p5js pyof: yacho create -t pyof ⽣成物の例︓ sketch_210502a/ │ sketch_210502a.pde │ yacho.sketch.toml │ ├─cover │ .gitkeep │ └─images .gitkeep 8/17
Slide 9
Slide 9 text
設定ファイル2種類(説明は後述) yacho.sketchbook.toml : Webページの設定 yacho.sketch.toml : スケッチごとの設定 9/17
Slide 10
Slide 10 text
yacho.sketchbook.toml : Webページの設定 yacho build コマンドを実⾏したときに参照されるファイル ⾃動で作る機能がいまのところ (v0.0.2) 無いので⾃分で作る必要があ る sketchbook_root = '.' base_url = 'https://yacho-demo.netlify.app/' author = 'eqs' avatar = 'chi.png' bio = """ An example user """ custom_css = 'custom.css' title = 'yacho-example' # youtubeやfacebookも設定できる(ドキュメント参照) [social] home = "https://github.com/eqs/yacho" twitter = "eqs_work" github = "eqs" 10/17
Slide 11
Slide 11 text
yacho.sketch.toml : スケッチごとの設定 この設定ファイルが無いスケッチは⾃動的に除外される 設定ファイルを作った場合も draft = true とすることで除外できる draft = false comment = """ 作品についてコメントも書けるけどv0.0.2時点では⽇本語⼊れるとエラーで落ちるよ """ # このリストに含まれるファイルがコードとして公開される # `*.pde` みたいなワイルドカードも使える public = ['index.html', 'sketch.js'] [video] type = 'vimeo' id = '540909347' 11/17
Slide 12
Slide 12 text
cover と images フォルダ cover フォルダにある画像が⾃動的にサムネになる これが無いとサイト⽣成時にエラーになる images フォルダにある画像が⾃動的にグリッド状に並べられる 無くてもOK 12/17
Slide 13
Slide 13 text
動画埋め込み [video] type = 'vimeo' id = '540909347' tomlファイルの [video] が設定されているときは,カバー画像の代わ りに動画がスケッチのページの⼀番上に表⽰される cover で設定した画像はトップページやSNSでのサムネで使われる 対応している動画︓ ['gif', 'vimeo', 'youtube', 'neort'] 13/17
Slide 14
Slide 14 text
⽣成結果の確認 ローカルにサーバを⽴てられるなら何でもいいけど,筆者はPythonの livereloadパッケージを使っている インストール︓ $ pip install livereload 実⾏︓ $ livereload -p 3000 dist/ あとはブラウザから localhost:3000 にアクセスすればOK 14/17
Slide 15
Slide 15 text
サイトのデプロイ dist の中⾝を公開⽤の場所に置けばOK 筆者はGitHub Pagesでサイトを公開していて また,GitHub Actionsでデプロイを⾃動化してる 15/17
Slide 16
Slide 16 text
GitHub Actionsの設定例 name: CI on: push: branches: - master jobs: deploy: runs-on: ubuntu-18.04 steps: - name: Python 3.9 uses: actions/setup-python@v2 with: python-version: '3.9' - name: Setup eqs/yacho working-directory: ~/yacho run: pip install yacho - name: Checkout uses: actions/checkout@v2 - name: Build web page run: yacho build - name: Push to gh-pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_branch: gh-pages publish_dir: dist/ 16/17
Slide 17
Slide 17 text
おわり 17/17