見出し画像

かーでぃさんのハジメの一歩会の宿題をPyScript（Python）とGoogle Apps Scriptの合わせ技でドヤ顔してみる

出戻りガツオ🐟

こんにちは。どやどや感満載のタイトルですね。
出戻りガツオ🐟✨です！noteマラソン？継続中💨

ハジメの一歩会 #3で宿題が出て、仲良くしてくださる方からの声掛けもあってドヤりたい欲MAXでPyScriptやってみました！

その内容をnoteにします！ -ネタがなくて焦ってたので助かった💦

ハジメの一歩会について

かーでぃ@ガノタなIoTプロフェッショナルさん（@_0447222690292）と百合宮桜@新人ムーヴなうさん（@yurimiyasakura）が、月曜日と金曜日の夜に「開発のハジメの一歩を踏み出してみよ～」という素敵な会をやってくださっております！

素晴らしいですね。全然初心者じゃない猛者も結構いらっしゃいますｗ
ですが、かーでぃさんと百合宮さんの楽しい掛け合いと順序だててコンパクトに学べる楽しい機会です！

私も他者に「PythonやPGの楽しさを伝えたい！」っていう気持ちがあるので参加させていただいています！

給与計算担当だろうが誰でもコードで仕事するの楽しいじゃない！
ということで昨日の2022年10月3日（月）の会は宿題がでました！

条件分岐 + 繰り返し処理！

条件分岐と繰り返し処理の内容ですね。
面白いテーマです。どれだけキレイに書くかという点でも面白いですし、ほかのツール使って実現されている方もいらっしゃいます。

Power Appsでやってる👀✨　先を超された！！悔しい( ;`･～･)ぐぬぬ

さすがきぬあささん😊
Power Automate for desktopでやると、図解されてフローチャートがわかりやすい👀✨

わ、私も面白くやりたいぜ・・・(　－”－)ぐぬぬ・・・

こんなことを言っていただいたらやるしかないじゃなイカ🦑

ということでGoogle Apps Script + PyScript（Python）のコラボレーションにチャレンジします！

PyScriptとは！

Pythonをやる方はFollowして絶対損しない超有益な情報をくださるみやさかしんや@Python/DX/エンジニア(@miyashin_prg)さんのTwitterから私も知りました！

こちらはHTMLの中にPythonを書くという新しい技術です！！
JavaScriptやTypeScriptでなくてもWebで動的なアクションができるのかしら👀✨と期待の技術！

現在公開されているのはalpha版(パイロット版)とのこと。情報も少ないです。
まあでも面白そうなので使ってみましょ。

code

Google Apps Scriptでは、サーバーレスWebアプリを作れるので、GASからHTMLを出力する仕組みにしました。

Google Apps Script - コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

Google Apps Script - index.html

index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <title>Demodori Gatsuo Demo</title>
  </head>
  <body>
    <h1>PyScriptとGoogleAppsScriptのコラボレーション</h1>
    <h2>create by De'modori Gatsuo</h2>
    <div class="font-mono">ハジメの一歩会 #3 Homework<label id="outputDiv"></label></div>
    <div id="outputDiv2" class="font-mono"></div>
    <div id="outputDiv3" class="font-mono"></div>
    <py-script>
import asyncio

async def foo():
  for i in range(1,101):
    await asyncio.sleep(1)
    Element("outputDiv2").write(i)

    out3 = Element("outputDiv3")
    if(i % 3 == 0) and (i % 4 == 0):
      out3.write("3と4の倍数")
    elif(i % 3 == 0):
      out3.write('3の倍数')   
    elif(i % 4 == 0):
      out3.write('4の倍数')
    else:
      out3.clear()

# close the global PyScript pyscript_loader
pyscript_loader.close()
pyscript.run_until_complete(foo())
    </py-script>
  </body>
</html>

これで完成です✨
Pythonの部分は<py-script></py-script>で囲まれている部分です。

Pyscriptを使うためには、HTMLのヘッダータグに下記の文面の挿入が必要です。

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

これだけで環境構築が完了凄いですね！

Official Pageはこちら！

今回はこのページのexamplesからSimple clockのデモを、思いっきり使わせていただいた結果です。
Webデザインもへったくれもない(-д-)

遊び目的だからいいんです。全部ここに書きましたが、使ったコードはGitHubにあげました。

まだ「README」もできていない（　＾ω＾）・・・

WebアプリのURLも公開しますが、セキュリティとか疎いので自己責任でアクセスしてください。すみません🙇🙇

詳しくはこれから作る「README.md」にちゃんと書きますｗ
更新予定ということでヽ(〃´∀`〃)ﾉ

という検証報告ブログでしたー🐟やった～、今日も続いた！
Microsoft LOVEですがGoogleもPythonも愛おしい🐍選べません・・・。

ハジメの一歩会とっても楽しいのでお時間合えば是非ご参加くださいまし🐟🐟

最近の記事の紹介

最後に！！！

いつもお読みいただきありがとうございます！
ITを使って仕事を楽しくする一助になりたいと思ってますので
お読みいただいた方はぜひTwitterもフォローしてください！

Power PlatformやPythonやExcel、Google Apps Scriptなどなど雑多につぶやきます。よなよなエールが大好きです🍺

リプ、いいね👍、RT大歓迎です！
強く求めてます🐟😂🐟
業務改善フレンズ大歓迎！！切磋琢磨しましょ～♪♪

それではまた今度！ばいば〜い！

いいなと思ったら応援しよう！