実践して身に付けるPython#2

2023.8.7に開催したイベントで使用した資料です。
youtubeにアーカイブも残っておりますので補完としてご利用ください～
https://www.youtube.com/live/xHxNHWXJ4L0?feature=share

1. 夏休み 特別企画 実践して⾝に付けるPython #2 エンジニアカフェ　スタッフ　永石　好 エンジニアカフェ主催　中高生向けコーディングイベント
2. 前回7/25はtkinterを使って簡単なGUIアプリを作成しました。 今回の目標は、前回拾いきれなかった用語や仕組みなどを少しだけ掘り下げて理解を深め、 Webアプリケーションを作成してみます。 そこで開発環境の話になるのですが、 PythonでWebアプリケーションを開発するために最適な フレームワーク「Django」をインストールしたいと思います。 今回はまず大枠となる Anaconda、そこからDjangoと、Spyderというものをインストールして環境を整えま す。 今回の目標
3. 何で3つも？関連性は？ AnacondaはPythonのインストール管理ソフトウェア・ソフトウェア公開サービスです。 開発に必要な環境や補助のアプリケーションなど、見やすく一覧にしてくれます。 足りなければそこからインストールができるので非常に便利です。 DjangoはWebアプリケーション開発に特化した開発環境です。 (後述します) SpyderはPythonの開発ツール(エディタ)として使います。
4. 今回の目的(作るもの) Webアプリを作ってみましょう。 今回作るのは写真投稿アプリにします。 InstagramやX(Twitter)のような仕組みを思い浮かべるとイメージしやすいと思います。 名前はimagepostとします(好きな名前でもいいですよ！ )
5. それではインストールを行います。 まずはAnacondaから。 以下のサイトにアクセスしてください。 https://www.anaconda.com/ Anacondaで検索をかけても トップに出てきます。 ダウンロードの項目を選び、 任意の場所に保存します。 ※Macの場合はAppleロゴを クリックしてください。 (たぶん自動で変わると思いますが )
6. DLしたファイルをダブルクリックして展開し、ウィザードを立ち上げます。 使用許諾を確認し、「 I Agree」をクリックして、続く画面では「 Jast Me」(All Userでも可)を選択。 この後の画面ではインストール先を確認して「 Next」ボタンをクリックすると オプションの選択画面が現れます。 「Register Anaconda as my default python3.××(バージョン)」のみにチェックを入れてインストールを 開始してください。 インストールが完了すると「 Completed」と表示されるのでインストーラーが終了するまで「 Next」と「Finish」をク リックしてください。 Anacondaでは、Pythonで開発するための仮想環境が予め「 Base」という名前で用意されています。 しかし、デフォルトで用意されている仮想環境では余計なライブラリがあったりしますので、 ここは新たに専用の仮想環境を作ってみましょう。 アップデートやメンテナンスを行う際に工数が減って楽になるというメリットがあります。 自動的にAnaconda Navigatorが立ち上がっている人はそのまま。 立ち上がってない人は立ち上げてください。 (Winであればスタートメニュー →全てのアプリ→Anaconda3(64bit)のフォルダを開くと出てくる Anaconda Navigatorをクリックしてください )
7. 起動画面左側の「Environments」タブをクリックし、画面下の「 Create」ボタンをクリックします。 「Create new envionment」ダイアログが起動するので、「 Name」に仮想環境名を入力して 「Python」にチェックが入っているのを確認して「 Create」ボタンをクリックします。 2 1 4 3
8. 新しい仮想環境が作成できたら、その名前を選んだ状態で上部にある「 Not installed」を選択します。 画面が狭い時は折りたためる
9. 画面右側の検索ボックスに djangoと入力すると検索結果に「 django」が表示されるので、 チェックボックスにチェックを入れて「 Apply」ボタンをクリックします。 Install Packagesダイアログにインストールされるパッケージ一覧が表示されます が、このままApplyボタンを押しましょう。
10. 以上でDjangoのインストールは完了しました。 続いて開発ツールの Spyderもインストールしておきましょう。 仮想環境の名前を選択した状態で、「 Home」をクリックし、画面をスクロールさせます。 Installをクリックしてインストールします。表示が Launchに変わったらクリックして立ち上げます。 スクロール
11. Spyderの画面構成について 「エディタ」ペイン (ソースコードの入力ウィンドウ ) ペイングループ (タブによって様々な情報が見れる ) 「IPythonコンソール」ペイン (ファイルの実行結果が表示される )
12. Spyderの日本語化について スパナのマークか、「 Tool」の「settings」を開きます。
13. 「Application」を選択し、右側の画面で 「Advanced settings」タブを開きます。
14. 「Language」のプルダウンメニューから「日本語」を選択し、 「Apply」をクリックします。 再起動を求められますので、同意して再起動するまで待ちます。
15. さて、それではちょっと試しにエディタペインに入力して結果を確認してみましょう。 ①変数numを宣言し、100*2を代入します。 ②変数numをprint関数で出力します。 実行ボタンをクリックすることで実行します。
16. 右上のペイングループのウィンドウでは、「変数エクスプローラー」のタブをクリックして 中身を確認してみましょう。
17. 出力結果はIPythonコンソールに表示されます。 その後、変数numに文字列を代入し、表示すると、変数エクスプローラータブでは型が変わったことも確認できます ので、ぜひ実行してみてください。 これでSpyderの基本的な使い方は OKです。
18. DjangoもSpyderも、仮想環境内でのインストールが必要になります。 新しく仮想環境を作る場合も、毎回必要になりますので注意してください。 PC本体にDjangoをインストールしたわけではないので、コマンドプロンプトから直接 Djangoを呼び出すことは現 段階ではできません。 さて、それでは早速Djangoを使って開発を…といきたいところですが、 まずは「何ができるのか」を確認していきたいと思います。 DjangoはWebアプリケーションを開発するには最適という話をしました。 アプリケーションと一口に言っても、 大きくわけてWebアプリケーションとネイティブアプリケーションが存在しています。 そこで、Webアプリケーションとネイティブアプリケーションの違いについて先に確認します。
19. Webアプリケーションとネイティブアプリケーションとは ・デバイス、OSを問わない 　(ブラウザとネット環境さえあれば動く) ・DL、インストールの手間がない ・審査が必要ない ・安定さはネット環境による 　(状況によってはサーバーが 　ダウンすることも) ・審査がないため安全性を信用するかは 　ユーザーの判断に委ねられる 自分が作ろうとしているものがネイティブアプリか Webアプリ、どちらが適しているかを判断する必 要がある。また、Webアプリの場合はHTMLなどの知識も必要になる。 Webアプリ ネイティブアプリ メリット デメリット ・ネット環境がなくても安定して稼働する 　(一部通信が必要になるアプリもある) ・外部侵入、改ざんの恐れが限りなく低い ・自分だけで使うアプリが作れる ・OSごとに開発環境を変える必要がある ・DL、インストールの手間がある ・iOSのアプリ公開には審査(有料)が必要
20. Webアプリとはそもそも何か Web上で動くアプリケーションには大きく分けて 2つの種類があります。 「サーバーサイドアプリ」と「クライアントサイドアプリ」の 2種類です。 クライアントサイドアプリは、クライアントのブラウザに HTMLドキュメントと一緒に Javascriptなどのプログラムが読み込まれてブラウザ上で動くものです。 サーバーサイドアプリはサーバー上で動くものを指します。 開発にはPHPやJava、そしてPythonが多く使われています。 こうした場合、サーバー側に言語の解析ソフトウェアが搭載 されますが、搭載されたサーバーのことを「 Webアプリケー ションサーバー」、略して「アプリケーションサーバー」と 呼ばれ、Webサーバーとは区別されます。 Webサーバーが窓口となり、必要な処理はアプリケーション サーバーに渡して実行します。 クライアント (ブラウザ) インターネット Webサーバー アプリケーションサーバー
21. なので今回作成するアプリケーションはサーバーサイドアプリケーションという事になります。 しかし、PythonだけでWebアプリケーションを作成するとなると非常に大変です。 (できない訳ではないです ) 動作させるためのインタープリター (プログラムを1行ごとに実行していく通訳のようなもの )、 基本ライブラリの一式、公式サイトで公開されている Pythonソフトウェアのインストールなどなど、アプリケー ションサーバーの基盤から作成しなくてはいけません。 Webアプリはリクエストの中身に応じて処理を行いま すので、その分岐条件の設定、データベースへのアクセスが必要なこともあります。 Pythonの基本機能だけ で行うと時間も手間も大幅に必要になります。 ところが、DjangoにはWebアプリケーションを作るのに基本的な部品は一通り揃っています。 Djangoがあれば、簡単に始められ、かつ手軽に開発を行うことができるという訳です。 Djangoに備わっている部品(一部) SQLite(データベース) 開発用サーバー 便利なコマンド群
22. Djangoの使い方について Djangoでは、MTVと呼ばれる三層構造で開発を行います。 MTVとは、 Model(モデル)、Template(テンプレート)、View(ビュー)のそれぞれの頭文字を取ったもの。 モデルはデータベースの連携、 (照合、照会に必要な材料 ) テンプレートはHTMLドキュメント、(Webサイトを構築するもの ) ビューは応答データの生成 (結果)を指します。 Djangoを使って開発するにあたり、理解するべき用語などがあります。 まずは基本的なMTVという考え方。
23. ルーティング ビュー モデル テンプレート クライアント リクエスト 図にするとこのような形になります。はて、見慣れないものがいますね。「ルーティング」？ MTVという中にはいませんでしたが、ルーティングとはビューに対して一番関わりが深いもので、 ビューの入口を司る働きを行いますので (適切なビューを呼び出す )、ビューの一端と捉えて問題ないでしょう。 全体的な流れとしては、まずクライアントがリクエストを送ります。次にルーティングがビューを作成します。作成す る際にまずテンプレートの情報を読み取って枠 (webページ)にします。次にデータベースを読み込んで、クライアント の求める結果をビューに渡して表示し、返します。 V M T
24. ざっくりした説明では少し不足がありますので簡潔に補足しますと、 「ルーティング」とは通信相手までの経路を判断する仕組み のことです。 「ビュー」とはリクエスト情報をルーティングから受け取り、レスポンス用のドキュメントを作成する仕組み のことで す。データベースにアクセスする時はモデルを介して 行います。 「モデル」とはデータベースをオブジェクト化するためのクラス です。 「テンプレート」とはWebページの外観を決めるための HTMLドキュメントです。そのため拡張子が .htmlですが、 HTMLのタグにDjango特有のテンプレートタグが混在したものとなっています。 どうしても概念を説明するとなると難しくなりがちですので、まずは触って慣れながら学んでいくと 身についてくると思います。 それでは…早速開発のための準備に取り掛かりましょう！
25. まず開発に必要な仮想環境を開き、指定して新しいプロジェクトフォルダーを作成します。 (プロジェクトのディレクトリ ) imagepostの名前の横に➤がありますのでクリックし、ダイアログの「 Open Tarminal」を選択します。
26. コマンドプロンプト(ターミナル)が立ち上がったと思います。 が、これは仮想環境内のコマンドプロンプトとなりますので、実際のコマンドプロンプトとは異なる点に注意し てください。 ※実際のコマンドプロンプトから立ち上げる事もできますが、その場合は Djangoのインストール、インポート、 フォルダの移動、Pythonの呼び出し…と色々面倒ですのでおすすめできません。 さて、Djangoでは、Webアプリの各種設定情報を統括・管理するための仕組みとして「プロジェクト」を使用し ます。 Webアプリを構成するうえで必要になるモジュール、 HTMLファイル、各種の設定ファイルなどなど、 Webアプ リが動作するために必要なファイル一式が格納されます。 プロジェクトはDjangoのコマンドを使って任意の場所に作成することができるようになっていて、 作成するとプロジェクトフォルダーの中には以下のソースファイルが自動で作成されます。 ・manage.py django-adminコマンドを使用する際のショートカットスクリプト。 開発サーバの立ち上げ、マイグレーション (プログラムやデータの移行・変換作業 )などに使 う。 ・__init__.py [プロジェクト名]フォルダがPythonのパッケージであることを証明する。 ・urls.py ルーティングについて記述する。 ・settings.py Djangoプロジェクトの様々な設定を記述する。 ・wsgi.py 非同期処理の実装などで使うファイル。 (Web Server Gateway Interface) ・asgi.py 非同期処理の実装などで使うファイル。 (Asynchronous Server Gateway Interface)
27. 構造は以下の通りになっています。 これらは、Djangoの機能を利用するための Pythonで書かれたモジュール群です。 Djangoで開発するための第一歩は、このようにしてプロジェクトの基盤をコンピューター上の任意の場所に作成す ることからです。 ここを基に、Webアプリのためのモジュールをプロジェクトのフォルダー以下に Djangoのコマンドで作成する、とい う手順で開発を進めていきます。 一口にWebアプリと言っても形態は様々です。 1つのWebアプリで完結するもの、複数の Webアプリを組み合わせ る場合もあります。 どんな場合でも対応できるよう、 Djangoでは基本的な設定情報を共有するためプロジェクト内部に Webアプリを格納するようになっているわけです。 imagepost_project __init__.py asgi.py settings.py urls.py wsgi.py manage.py
28. それでは、プロジェクトフォルダを作成します。 コマンドプロンプトは入力待ちの状態のはずで、どのディレクトリにあるかを表示しています。 (imagepost)と文頭についているのは仮想環境名の中のコマンドプロンプトであることを表しています。
29. この状態で新しいフォルダをここに作成すると、管理の際に何かと不便である場合が多いです。 そのため、別の場所に作成しましょう。 Cドライブをエクスプローラーから開き、その場所に右クリックで「新規作成」 →「フォルダ」 あるいはショートカットキー Ctrl+Shift+Nで作成し、名前を「DjangoProjects」としましょう。 Macの場合は、Cドライブの代わりにデスクトップを指定し、右クリックで新規フォルダを作成するか Command+Shift+Nで作成してください。 これで、Cドライブ直下(あるいはデスクトップ )に 「DjangoProjects」という名前のフォルダーが作成できました。 分かりやすいよう名前を DjangoProjectsとしていますがもちろん任意の名前で大丈夫です。 (ただし半角英数字とアンダーバーのみ ) 新しいフォルダが作成できたら、コマンドプロンプトのディレクトリを移動させます。 コマンドプロンプトのディレクトリを移動する際には cdコマンドを使用します。 以下をコマンドプロンプトで記述してください。 cd C:\DjangoProjects これでディレクトリの移動が完了しました。
30. それではいよいよDjangoから新しいフォルダを作成します。 django-admin startproject imagepostProject django-admin というDjangoに搭載されたモジュールを startprojectというコマンドで動かします。 作成するプロジェクト名がそれに続きます。 さて実行した後、入力待ちになったら、先ほど作成した新規フォルダ「 DjangoProjects」を 覗いてみましょう。新しく「 imagepostProject」というフォルダが作成されていると思います。 続いて中を覗いてみましょう。 imagepost_project __init__.py asgi.py settings.py urls.py wsgi.py manage.py さきほど説明した構造になっているのが分かるでしょうか。 ちょっと試しに、manage.pyをテキストエディタで開いてみましょう。 もしVScodeなどの開発環境がある方はそちらのツールで開いても構いませ ん。
31. 中身を読み解いていくとより理解が進み、全体像が見えるようになりますが、 全てを説明すると時間が足りませんので、時間のある時に個人で覗いてみてください。 中身が理解できるようになると中級者として胸を張っていいと思いますよ。 ところで、”””　～～～　””” という、ダブルクォーテーションが 3つ並んで囲まれている文章が 見えるでしょうか。(シングルクォーテーション 3つ*でも可) *シングルクォーテーション 3つで「トリプルクォーテーション」と呼びます この記述方法で書かれた文章はいわゆる「コメント機能」です。 ソースコードには影響がない文章なので、囲まれた文章は日本語でも記述が可能です。 段々記述が増えてくると、「この定義は何をするんだっけ？」「あれを修正したいんだけどどこだっけ？」など、読 み解くだけで時間を消費してしまいます。 そこでコメントを残しておくことで「誰が見ても分かりやすくする」ということができますので、 積極的に使ってください。 ちなみに、#(半角シャープ)　(スペース)の後でもコメント追加可能です。 ※ただし1行分だけです。
32. それでは次に、開発用サーバーを起動してみましょう。 Webサーバーを立ち上げるとトップページの画面が表示される仕組みとなっていますが、今はまだ中身を作ってお らず、いわゆる空っぽの状態ですね。 この状態でWebサーバーを立ち上げると、 Djangoが用意したデフォルトページが代わりに表示されるようになって います。 現在、コマンドプロンプトでのディレクトリは DjangoProjectsだと思いますが、更に一階層下の 「imagepostProject」に移動します。 さきほどと同様、cdコマンドで移動させます。 cd C:\DjangoProjects\imagepostProject 移動が出来たらrunserverコマンドを使用してWebサーバーの情報を確認します。 python manage.py runserver
33. ここで確認するのは下から 2行目、 　　　　　　　　　　　　　　　 この部分です。 これは開発用のWebサーバーが IPアドレス：127.0.0.1 ポート番号8000　において稼働中であることを指しています。 Webサーバー稼働中はコマンドプロンプトを閉じないよう注意してください。 閉じてしまうとWebサーバーがシャットダウンしてしまいます。 Webサーバーを閉じたい場合は Ctrl＋Cで手動で閉じることができます。
34. Djangoのデフォルトページを表示してみましょう。 ブラウザを起動してアドレス欄に http://127.0.0.1:8000 と入力してください。 このような画面になれば成功です！
35. 今回作るもの、憶えてますか？ 写真投稿アプリでしたね！ 必要な機能を考えてみましょう。 ・ログイン機能 ・写真を追加する ・文章を追加する ・投稿する 手順としては簡単に見えますが … ログイン機能があるという事は「アカウント」があるという事ですね。 ということはつまり、 ・ユーザー登録 ・ログイン／ログアウト ・パスワードのリセット の実装が必要になります。 ユーザー登録があるということは ユーザー情報を格納するデータベースが必要になります。 こうしてみるとかなりの量の工数があることが予想できます。
36. そして、単純な工数であればまだ簡単なように見えますが、実際はトップページのデザイン、 UI(ユーザーインターフェース )デザイン、各ページのデザイン等々 …プログラミング以外の点での工数が大幅に あります。 また、細々としたファイルも多く、これをイチから作るのは中々大変です。 というかイベントの時間だけでは到底足りません。 イチから作る方法だけ知っておいて、あとあと自分でイチから作ると良いと思います。 という訳で、今回は用意されたサンプルを使い、中枢のプログラミングを中心に学んでいきます。 次のWebページにアクセスして、サンプルをダウンロードしてください。 https://getbootstrap.jp/
38. ここではなくて、下にスクロールします。
39. ダウンロードしたら解凍しておきます。 (場所はどこでもいいので、ひとまずダウンロードフォルダで説明します )
40. ダウンロードし、解凍が終わったら、いよいよ imagepostの構築に移ります。 コマンドプロンプトのディレクトリを確認してください。 C:\DjangoProjects\imagepostProject> となっていればOKです。 なっていない場合は cdコマンドを使用して移動してください。 cd C:\DjangoProjects\imagepostProject　です。 次はstartappコマンドを使用してアプリ用のフォルダを作成します。 python manage.py startapp imagepost Spyderで確認してみます。 コマンドプロンプトは閉じずに Anacondaに戻り、Spyderを開きます。
41. Spyderを開いたら、右上の作業ディレクトリを DjangoProjectsに指定します。 (隣のフォルダーマークをクリック ) するとファイルペインに構造図が展開されます。
42. このような構成になっていれば OKです！ このように、startappを使ってimagepostアプリ用の 新規フォルダが作成できます！ この時に自動生成されたファイルの中の apps.pyの中身を覗いてみましょう。
43. apps.pyには、アプリを外側から操作できるための定義が作られています。 このアプリをプロジェクトに登録するために、 imagepostProjectフォルダの中のsettings.pyに クラス名ImagepostConfigという名前空間名を登録します。
44. 作成したアプリをプロジェクトに登録します。 setting.pyファイルをダブルクリックで開きます。
45. 環境変数INSTALLED_APPSの要素の最後に 　”imagepost.apps.ImagepostConfig”, と記述します。 インスタンス(字下げ)の数を間違えないように、 マウスでクリックしてタブかスペースかを確認してください。
46. 次にアプリの使用言語とタイムゾーンを日本仕様に設定します。 同じくsetting.pyの中の環境変数LANGUAGE_CODE, TIME_ZONEの値を次のように変更します。 LANGUAGE_CODE = “ja” TIME_ZONE = “Asia/Tokyo” ここまで書けたら、 Ctrl+S(command+S)で保存します。
47. それでは、さきほどDL・解凍したBootstrapのファイルを使用して ベーステンプレートとトップページの外観を整えます。 エクスプローラーでダウンロードフォルダを開き、解凍したフォルダをダブルクリックして中を見ます。 たくさんサンプルフォルダが分かれていますが、今回は一番上 (名前順の場合)にある 「album」を開きます。 中身にはhtmlファイルがありますので、ダブルクリックして HTMLページを 開いてみましょう。
48. なんだかおしゃれな感じのテンプレートですね。 作る写真投稿アプリが想像できたでしょうか？ このHTMLファイルを元に、 コピーしてファイルを増やし、 中身を編集していくことで利用します。 これを「テンプレート」と呼びます！
49. テンプレートの作成 今回のアプリではテンプレートは 4つに分けて管理します。 ・ベーステンプレート 　　ページのヘッダーとフッターを定義する ・タイトルのテンプレ ―ト 　　メインコンテンツのタイトル部分を定義する ・投稿一覧テンプレート 　　投稿された写真を含むデータを一覧表示するためのもの ・トップページのテンプレート 　　ベーステンプレートとタイトルのテンプレート、投稿一覧テンプレートを読み込んで、 　　それぞれの内容をブラウザに出力するためのもの
50. ヘッダー (base.html) タイトル部分 (image_title.html) 一覧表示 (image_list.html) この下にフッター (base.html)
51. まずは、Spyder上でフォルダを新規作成します。 「imagepostProject」内の「imagepost」フォルダを右クリックします。 フォルダを選んで クリックします。 名前を求められますので、 templates とします。
52. ついでに、静的ファイルを保存するための「 static」フォルダをプロジェクト直下に作成します。 今度はimagepostProject(一番上のフォルダ)を右クリックし、新規フォルダを作成します。 名前は「static」とします。 実はimagepostのようなアプリでは、静的ファイルを使用する場面というのはないのですが、 プロジェクト直下のstaticフォルダを作成しておくことは必要です。 特に、本番運用の際には必須です。 このあと、accountsに関連するアプリでは静的ファイルを使用しますので、ここで作成しておきましょう。 作成できましたら、今度は staticフォルダのディレクトリを設定します。 これは、テンプレートタグ {% lord static %}でパスを読み込めるようにするためです。
53. テンプレートタグとは？ HTMLファイルの中に付ける HTMLタグ以外のタグです。 代表的なもので言えば PHPのタグなどもそれにあたります。 通常、HTMLのタグは <p>テストのテキストです </p> のように、 <開始タグ>～</終了タグ>で閉じたものとなります。 そこに、Djangoのテンプレートタグが混在することによって動的に Webページを表示するための HTMLファイルを 生成する仕組みとなっています。 Djangoのテンプレートタグは　 {% (タグ名) (引数) %}　という書き方で組んでいきます。 ちなみに、構造を理解すれば自作することも可能です。 先ほどの {% lord static %} というのはstaticタグにあたり、 このタグは、静的ファイルの URL取得のため使われるもので、一度設定しておくと後が楽になります。 まずはSpyderで「settings.py」をダブルクリックして開き、冒頭に osモジュールをインポートするためのコードを入 力しておきます。
54. 冒頭の方はコメントになりますので、 12行あたりを改行してス ペースを空け、ここに書いていきます。 import os という一文を加筆したら、 BASE_DIR = Path(__file__).resolve().parent.parent というコードの次に記述をします。
55. 画像の通りに、順番を守りながら整えてください。 STATIC_URL = “/static/” STATICFILES_DIRS = (os.path.join(BASE_DIR, ”static”),)
56. 次に、ベーステンプレート、タイトル用テンプレート、一覧表示用テンプレートの HTMLファイルを コピーして作成します。 先ほどのフォルダ「album」の中にあるindex.htmlをクリックして、右クリックからコピーします。 続いて、Spyder上で先ほど作成した「 templates」フォルダの中に貼り付けします。 </>というアイコンで作成できたのが確認できたら、右クリックして「リネーム」を選び、 名前を「base.html」としてください。 あと2回、貼り付けを「templates」の中で繰り返し、 それぞれ名前を「image_title」、「image_list」と してください。 最後に、templatesのフォルダの上で右クリックし、 「新規」→「ファイル」で作成、名前を「 index.html」 としてください。 画像の通りになればOKです！
57. 本日はここまで！ 次回は8/21を予定しております！ ぜひご参加ください！