Quantcast
Channel: いつも隣にITのお仕事
Viewing all 2076 articles
Browse latest View live

ファミプロが子どもたちの学びの場&サードプレイスになれるといいなと感じた話

$
0
0

ファミプロでScratch発表中

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

「ノンプログラマーのためのスキルアップ研究会」は、ノンプログラマーがプログラミングをはじめとするITスキルを学び合うコミュニティです。

先日、9月度の家族向けイベント「ファミプロ」が開催されましたので、そのレポートをお送りしますね。

ちなみに当日の様子は以下、Togetterのツイートまとめもご覧くださいませ。

ノンプロ研 ファミリー向けプログラミング研究会 親子もくもく会 Vol.2
ノンプログラマーがプログラミングを学ぶコミュニティ、通称「ノンプロ研」。その中で、子どもたちも交えて家族でプログラミングを学ぶイベントを開催して行こう!ということでスタートしたのが「ファミプロ」。..

では、行ってみましょう!

「ファミリー向けプログラミング研究会 親子もくもく会」とは

今回開催されたのは「ファミリー向けプログラミング研究会 もくもく会」

通称「ファミプロ」と呼ばれる家族向けイベントです。

ファミリープランがはじまって以来、はじめてのファミプロでした。

まずは、ファミプロとは何か、ファミリープランとは何かについて簡単にお伝えします。

ファミプロとは

ファミプロは、大人も子供も集まって、それぞれがプログラミングについて学び、全員がその成果発表を行うイベントの通称です。

パッと見、「子供向けイベント」と思われがちなのですが、そうではなくて「家族向けイベント」です。

子供向けのプログラミング教室やイベントだと、子供が学ぶのがメインで、大人はプログラミングについて全くわからない…こんなことがあったりする可能性があります。

ファミプロは、親が全員プログラミングを学んでいるので、その中で、子どもたちやパートナーが一緒に学べるという特徴があります。

これまでのファミプロの様子は以下記事でもレポートしていますので、ご覧くださいませ。

ファミリー向けプログラミング研究会「ファミプロ」のKickOffイベントを開催しました
コミュニティ「ノンプロ研」では、子どもたちも含めた家族向けプログラミング学習活動をしていこうとなりました。今回は、ファミリー向けプログラミング研究会「ファミプロ」のKickOffイベントレポートです。
ファミプロ「親子もくもく会」で大人も子どもも学んだという話
コミュニティ「ノンプログラマーのためのスキルアップ研究会」でスタートした家族でプログラミングを学ぶ「ファミプロ」。その2回目のイベントとなる「ファミプロ親子もくもく会」が開催されましたのでレポートをお送りします。
ノンプロ研のファミプロで「ロボット作り体験&ロボット操作もくもく会」を開催しました
先日開催されたノンプロ研の家族向けイベント「ファミプロ」は、株式会社ユカイ工学さんの全面協力のもと「ロボット作り体験&ロボット操作もくもく会」を開催することができました。今回はそのレポートをお送りします。

ちなみに、ノンプロ研会員であれば、お一人でも参加可能です!子どもたちと一緒にもくもくしましょう。

ファミリープランとは

ファミリープランというのは、ノンプロ研の家族向け追加課金プランです。

通常の月額プランに追加して課金いただくことで、その配偶者と高校生以下の子どもたち全員がノンプロ研に加入できる(もちろんファミプロにも参加できる)というものです。

ファミプロと似ているのですが、イベントの種類ではなくて、課金プランです。

(ノンプロ研内でも勘違いしている人、多そう…)

詳細は以下記事でもお伝えしていますので、ご覧くださいませ。

家族でプログラミングを学べる「ノンプロ研ファミリープラン」はじめます
「ノンプログラマーのためのスキルアップ研究会」で「ファミリープラン」をスタートし、家族でプログラミングを学ぶ環境も提供していくことになりました。今回は、そのファミリープランとそのはじめた理由についてお伝えします。

今回のファミプロのレポート

今回の参加は、家族数でいうと3家族、お子さんは小学生3年生一人、未就学児は4歳の女の子と3歳(我が家の息子)が一人ずつでした。

今までのファミプロと比べると若干少なめの参加数ではありますが、みんな楽しくプログラミング&発表ができました。

流れとしては以下のとおりです。

  • 13:00 – 13:10 はじめに
  • 13:10 – 15:00 もくもくタイム
  • 15:00 – 15:15 休憩
  • 15:15 – 16:00 発表タイム

もくもくタイムでは、小学生はScratch、未就学児はプログラミングおもちゃ、大人はGoogle Apps ScriptやIFTTTの研究という感じでした。

今回のいくつか気づいた点、目からウロコだった点をお伝えしていきますね。

Scratchの学習成果を見た

3年生の子は、ファミプロ開始の5月からScratchのプログラミングをはじめましたが、もう今となってはシューティングゲーム作りにチャレンジしています。

発表タイムでは、作ったゲームの説明、工夫したこと、今後改善したいことを、画面操作をしながらしっかりプレゼンしていました。

今回は子どもたちの中では一番年上ということもあってか、頼もしさがアップしていましたね。

次回の発表が楽しみです!

子どもたち向けのサードプレイス

ノンプロ研に所属している大人たちから、たまに「サードプレイス」というワードを耳にするようになりました。

普段の生活圏でいうと家庭、会社が大きな居場所になるわけですが、コミュニティはその3番めの居場所になり得るということで、ノンプロ研はそういう意味ではサードプレイスになりえているわけですね。

子どもたち(奥さまたちもそうかな?)にとっても、もしかしたらサードプレイスになりつつあるかなと感じました。

今回参加している皆さんは、もう常連ということもあり、回数を重ねるうちに、だいぶお互いがわかってきているというのもあります。

うちの子(3歳)なんかは、3年生のお兄ちゃんをものすごくリスペクトしていて、バイバイした後も、ずーっとその後ろ姿を見つめてました。

一人っ子なので、お兄ちゃん的な存在への憧れが強いみたいで、年齢の違うお友達とコミュニケーションがとれる機会というのは、なかなか貴重なのではないかと思います。

次回のファミプロは10/20開催

次回のファミプロですが、10/20(日)13:00~16:00で開催予定です。

これまでに参加されたことないご家族は、ノンプロ研会員かどうかに関わらず、無料で1回体験できます。

ご希望の方は、私宛に直接か、または以下お問い合わせフォームにて、参加される方のお名前と年齢についてを含めてご連絡くださいませ。

お問い合わせ|株式会社プランノーツ
株式会社プランノーツのお問い合わせページです。月額オンラインサポート、Webサイト制作やシステム開発、コンサルティングなどのお申込み、お仕事のご依頼・ご相談などお気軽にご連絡下さい。

どうぞお待ちしております!

まとめ

以上、9月度の家族向けイベント「ファミプロ」の開催レポートについてお伝えしました。

と感じました。

そして、大人たちはみんな学ぶ意欲があるので、場としては良い空気が流れているのではないかと思います。

参加者数をもっと増やしていければ…という課題はありますが、そのあたり活動をしながらアイデアを出していきたいですね。

今後のファミプロの活動もどうぞ期待していてください!

「ノンプログラマーのためのスキルアップ研究会」について

コミュニティ「ノンプログラマーのためのスキルアップ研究会」では、毎月の定例会や勉強会、Slackでのやり取りを通して、皆さんのプログラミング学習の質やモチベーションを高めるための活動をしています。 過去の活動については、以下のページをご覧ください。
コミュニティ「ノンプログラマーのためのスキルアップ研究会」の活動レポートまとめ
コミュニティ「ノンプログラマーのためのスキルアップ研究会」(略して「ノンプロ研」)。このページはその活動レポートまとめページです。コミュニティ活動の一気読みをされたい方、ぜひご活用くださいませ。
ぜひ、皆様のご参加をお待ちしております!
コミュニティ「ノンプログラマーのためのスキルアップ研究会」についてのお知らせ #ノンプロ研
ノンプログラマーがVBA・GAS・Pythonなどのプログラミングを学ぶコミュニティ「ノンプログラマーのためのスキルアップ研究会」が絶賛活動中です!本ページはコミュニティの情報発信をしていく特集ページです。

はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋

$
0
0
milestone

photo credit: neonzu1 Ibafa kilométerkő via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

さて、皆さんは使っていますか、Google App Maker

クラウド上の社内向けアプリケーションをドラッグ&ドロップで簡単につくれるサービスです。

App Makerとは何か、またその超簡単なアプリケーション開発のイメージをお伝えします
Googleが提供するWebアプリケーション開発プラットフォーム「App Maker」。今回は、App Makerとは何か、またその超簡単なアプリケーション開発のイメージについてお話します。

さて、当ブログでもApp Makerについてはいくつかのシリーズをお送りしていますが、いよいよGCPのCloud SQLを使った事例について紹介をしていきたいと思います。

シリーズ初回となる今回は、Cloud SQLをデータベースとしたApp Makerアプリの概要編。

はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋についてお伝えしていきます。

では、行ってみましょう!

App Makerのデータベースは何を使えばいいか問題

App Makerは主に以下の3種類のパーツを作ってそれぞれを組み合わせることでアプリケーションを作っていきます。

  1. データモデル: データベースと接続する機能
  2. ページ: 表示するページでテーブルやフォームなどのウィジェット
  3. スクリプト: 必要に応じて独自の処理を作成できる

簡単なアプリであればスクリプトは不要で、データモデルとページはアプリケーションとしては必須です。

それで、データモデルから接続するデータベースについてですが、少し残念な歴史がありました。

Data Tablesのサービス終了

以前は「Data Tables」というApp Maker専用で、かつG Suiteに保存できるデータベースを使用することができました。

Data TablesをデータベースとしてApp Makerアプリを作る方法をお伝えしているのが、以下の記事からはじまる「はじめてのモデル~AppMaker初心者向けチュートリアル~」シリーズです。

App Makerでデータベースを作成する「モデル」への最初の一歩
初心者向けにApp Makerのチュートリアルをお送りしています。今回からデータベースを使用するアプリを作ります。まずは、App MakerでGoogle Drive Tableタイプのモデルのです。

ただし、しばらく前にこのData Tablesが残念ながらサービス停止となってしまい、代わりにGoogle Cloud SQLの使用が推奨されるようになりました。

しかし、Cloud SQLは、Google Cloud Platform(GCP)に含まれるいちサービスで、インスタンスだのなんだのといった専門知識も必要かつ別途使用料も従量制で発生し、ちょっとノンプログラマーにはハードルが高い…

(現時点で、GCPやCloud SQLについてご存知なくても大丈夫です。シリーズ内で必要に応じて丁寧に解説をしていきますので)

スプレッドシートをDB代わりに使うのはしんどい

ということで、スプレッドシートをデータベースとして使えばいいじゃん!

そしたら、G Suiteユーザーであれば追加の課金は発生しませんし、慣れ親しんだスプレッドシートですから使い慣れてる。

ということでスプレッドシートをデータベースとしてApp Makerアプリを作りシリーズを以下の記事をスタートとして連載しました。

App Makerでスプレッドシートをベースにモデルを作成する方法
Googleが提供する社内アプリケーションを簡単に構築できるプラットフォームApp Maker。今回は、シリーズ初回としてApp Makerでスプレッドシートをベースにモデルを作成する方法をお伝えします。

ただ…ご覧いただければわかるのですが、スクリプトをめっちゃ書かないといけないんです。

スクリプトを書く力は磨けるのですが、こんなにコード書くなら少しお金払っても楽したいし、書いた分のコードは運用とメンテしないといけません。

App MakerがGCPへの橋渡しになるかも知れない

ということで、App Makerを使うならデータベースとしてCloud SQLを使わざるを得ないのではないか…という結論に至ります。

実際、仕方なく試してみると…

……

………

はい、ものすごい「なんて楽なんだろう!」「もっと早く言ってよ~」となりました!

そこまで行くには、少しGCPやCloud SQLについて学ぶ必要はあります。

しかし、ノンプログラマー的には本来手の届かない遠い遠い存在であるはずのGCP。

そのGCPにApp Makerという存在が、最初の一歩の橋渡し役になってくれるかも知れない。

そこを皮切りに、GCPの各種サービスを使っていろいろとスキルアップやキャリアアップも図れるかも知れない…

と、いうことで本シリーズでノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方をお伝えしていきます。

はじめてのCloud SQLによるApp Makerアプリ開発の道筋

もともと、社内にバリバリGCPを使っているチームがあれば、「ちょっとApp Makerでも使いたいんだけど~」と言えば済むはずです。

しかし、もちろんそうでない場合もあります。

その場合は、下準備として、大ざっぱに説明すると以下のような手順で進める必要があります。

  1. GCPを使える状態にする
  2. App Makerで使えるデータベースとしてのCloud SQLを用意する
  3. App Makerでアプリを作る

3はこれまでにブログでも紹介している部分ですが、1,2の段取りが必要になります。

手順を進めるための条件

さて、上記手順を進めるための条件があります。

まず、App MakerはG Suite Business以上のプランでしか使えません。

また、上記2のApp Maker設定はG Suite 管理者でしか行うことができません。なので、自らが管理者でないときは、事前に話をしておきましょう。

そして、GCPを組織として契約して使える状態にする必要があり、基本的に課金が発生します

ここも、関係各所と話をしておく必要があります。

(ただし、課金については年中$300ドル無料提供のキャンペーンをしていますので、お試しの段階では料金はかからずに済むことが多いと思います。)

まとめるとこうです。

  1. App Maker自体、G Suite Business以上のプランでないと使えません。
  2. App Makerの設定をG Suiteの管理者が行う必要があります。
  3. GCPの契約と場合によって課金が発生します。

まとめ

以上、はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋についてお伝えしました。

少しハードルはありますが、App Makerのアプリ開発の簡便性と、GCPを使い始めるきっかけとしては、ノンプログラマーにとっては悪くないチャンレジかなと思います。

次回以降、具体的に上記の手順について解説していきますね。

どうぞお楽しみに!

Google Cloud Platform(GCP)に無料トライアル登録をする方法

$
0
0

google-cloud-platform

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

前回の記事はこちら。

はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
App MakerについてGCPのCloud SQLを使った事例についてのシリーズを開始します!今回は、はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋についてです。

導入として、App MakerのデータベースとしてCloud SQLを使用する理由と、その道筋についてお伝えしました。

いよいよ本格的に進めていきますよ。

前回お伝えした通り、おおまかな流れは以下のようになります。

  1. GCPを使える状態にする
  2. App Makerで使えるデータベースとしてのCloud SQLを用意する
  3. App Makerでアプリを作る

ですから今回は、1番目。

Google Cloud Platform(GCP)に無料トライアル登録をする方法からスタートしましょう。

GCPとは何か、プロジェクトとは何か、ということにも簡単に解説をしていますよ。

では、行ってみましょう!

GCPを登録する前の基礎知識

まず、Google Cloud Platform(GCP)の登録からスタートする必要があるのですが、これがいったい何者なのか…これをある程度は理解しておく必要があります。

GCPとは何か

GCPとは、Googleが提供するクラウド上のサービス群の総称です。

Google Cloud Platformとは

Googleは、Google検索やYouTube、Gmail、Googleマップなどさまざまなサービスを提供していますが、それらを提供するインフラやクラウドテクノロジーをユーザーにも提供してしまおう!というプラットフォームです。

最近は、「ML(Machine learning)」つまり機械学習を活用するためのプロダクトも続々提供されていて、そこはGoogleならではの強みとされています。

主に開発者の皆さんが、GCP上にインフラを用意して、提供されているサービスを組み合わせ、その上に独自のサービス開発をして、世に提供していくために活用するプラットフォームです。

GCPと強豪にあたるサービスとして、Amazonが提供するAWSや、Microsoftが提供するAzureなどが挙げられます。

GCPとG Suiteの関係

私たちノンプログラマーが愛するG Suiteは、GCPとは別のサービスになります。

今回のシリーズではApp Makerと、GCPに含まれるサービスであるCloud SQLを組み合わせてアプリケーションを使いたいわけです。

App Makerを使用するためにはG Suite Business以上の登録が必要です。

一方で、Cloud SQLを使用するためにはGCPの登録が必要になります。

ですからGCPの登録がない場合は、その登録から作業をスタートする必要があります。

GCPにトライアル登録をする

GCPはプラットフォーム上のどんなプロダクトをどのように利用しているかによって従量制で課金されるサービスです。

ですが、(執筆時点では)初回の登録であれば無料トライアルがありますので、それを利用して試してみると良いでしょう。

ということで、実際にGCPの無料トライアル登録を進めていきましょう。

Google Cloudトップページ

以下リンクから「Google Cloud」のトップページにリンクします。

クラウド コンピューティング サービス  |  Google Cloud
Google Cloud でビジネスを変革。Google Cloud Platform (GCP) を使った構築、革新、スケーリング。G Suite を活用したコラボレーションで生産性を向上。

トップページに「無料ではじめる」というボタンがありますので、安心してクリックしましょう。

GCPを無料ではじめる

無料トライアルの内容と利用規約の確認

すると「Google Cloud Platformの無料トライアル ステップ1/2」というページに遷移します。

ご登録いただくと、Google Cloud Platform で今後 12 か月間ご利用いただける 300 ドル分のクレジットを獲得できます。

無料トライアル期間が終了しても、自動的に請求されることはありません。

とある通り、現時点では1年間の間、300ドル分をトライアルで使用できますので、料金は気にせずに試すことができます。

(時期によってトライアルが終了、または内容の変更がされるかも知れませんので、その際はご了承ください。)

利用規約を読んだ後、チェックを入れて「同意して続行」をクリックします。

Google Cloud Platformの無料トライアル ステップ1/2

各種情報の確認と支払い方法の入力

「Google Cloud Platformの無料トライアル ステップ2/2」というページに遷移しますが、現在ログインしているアカウント情報に基づいて

  • お支払いプロファイル
  • アカウントの種類
  • 名前と住所
  • お支払いタイプ

などは自動に入力されています。

ここで、登録をするアカウントは、G Suite(つまりApp Maker)を使用しているビジネスアカウントであることを確認しておきましょう。そうでないと、次回の手順で詰んでしまうと思います。

また、できればG Suiteの管理者が進めたほうが良いでしょう。

さて、お支払い方法はクレジットカードになりますが、ここは自動入力されていないことが多いと思いますので入力して「無料トライアルを開始」をクリックします。

Google Cloud Platformの無料トライアル ステップ2/2の1ページ目

Google Cloud Platformの無料トライアル ステップ2/2の2ページ目

繰り返しになりますが、無料トライアルなのでカード情報を入力しても、いきなり請求が来ることはありません。

プロジェクト「My First Project」とは

これで、GCPへの無料トライアル登録は完了です。

まあまあ簡単ですね。

完了すると、GCPのコンソール画面のトップページに移動します。

コンソール画面では、GCPの操作やお支払の確認などができ、登録後は冒頭のGoogle Cloudのトップページから「コンソール」というボタンで入ることができます。

初回は、チュートリアルがはじまりますがm何のことやら…という感じだと思いますので、ここでは画面上部の「My First Project」という部分だけチェックしておいてください。

GCPのコンソール画面でプロジェクトを確認

これはトライアル登録後に自動で生成されたプロジェクト「My First Project」が選択されていることを示しています。

GCPのプロジェクトというのは、組織でGCPのプロダクトの利用、ユーザー管理、課金を管理する単位です。

組織でプロジェクトは複数持つことができます。

他に使う用途がなければ、ひとまず本シリーズではこの「My First Project」をそのまま使用していくことにします。

まとめ

以上、Google Cloud Platform(GCP)に無料トライアル登録をする方法をお伝えしました。

また、GCPとは何か、プロジェクトとは何か、ということについても簡単に触れました。

これで、GCPとプロジェクト「My First Project」は使用できる状態になりましたので、次はApp Maker側から作業を進めていきます。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋

【エクセルVBA】AddChart2メソッドでピボットテーブルからグラフを作る方法

$
0
0

eyecatch,vba,graph

皆様こんにちは、ノグチです。

エクセルのグラフやピボットテーブル、レポートを作りたいときにとても便利ですよね。

ピボットテーブルをVBAで作成する方法は、以前の記事でお伝えしました。

エクセルVBAでピボットテーブルを作成!PivotCacheにデータソース範囲をセットする
ピボットテーブルをVBAで作成する1ステップ目、ピボットテーブルのデータソース範囲を指定する方法をご紹介しています。またVBAでピボットテーブルを作成する前提知識として、ピボットキャッシュとは?やデータソースからピボットテーブルが作成される流れも簡単にご紹介しています。

VBAでピボットテーブルが作成できるなら、グラフだって作成できてもよいのでは…?

ということで今回は、エクセルVBAでピボットテーブルからグラフを作成する方法をご紹介します!

AddChart2メソッドでワークシートにグラフを追加する

ではまず、ワークシートにグラフを追加しましょう。

グラフを追加するには、ShapesオブジェクトのAddChart2メソッドを使います。

AddChart2メソッドは、ワークシート上にグラフを追加して、そのグラフのShapesオブジェクトを返り値として返してくれるメソッドです。

AddChart2メソッドの記述方法

AddChart2メソッドの記述方法はこちら。

Shapesオブジェクト.AddChart2(プロパティ)

AddChart2メソッドのプロパティ

AddChart2メソッドには、主にこのようなプロパティがあります。

プロパティ名 プロパティの説明
XlChartType 作成するグラフの種類を、数値または定数で指定します。
Left グラフをワークシート上に配置する左位置を指定します。
Top グラフをワークシート上に配置する上位置を指定します。
Width ワークシート上のグラフの横幅を指定します。
Height ワークシート上のグラフの縦幅を指定します。

XlChartTypeプロパティで指定するグラフの種類

XlChartTypeプロパティには、作成したいグラフの定数または数値を指定します。
グラフの数だけ指定できる定数があるのですが、そのうちの代表的なものをご紹介します。

定数 作成できるグラフの種類
xlcolumnclustered(51) 集合縦棒
xlbarclustered(57) 集合横棒
xlpie(5) 円グラフ

定数横にある()内の数値は、定数以外で指定する数値を表しています。

上記の3つ以外の定数については、下記のMicrosoftのページで説明されていますので、参考になさって下さいね。

xlcharttype クラス列挙 (Excel)

SetSourceDataメソッドでグラフのデータをセット

AddChart2メソッドのプロパティには、グラフのデータを指定するものがありませんでしたよね。

実はAddChart2メソッドを実行するだけでは、このような真っ白なグラフ用フィールドが作成されるだけなのです。

ピボットテーブル、グラフエリア追加

ワークシート上にグラフを追加するためには、このAddChart2メソッドと、グラフにデータソースをセットするメソッドが必要なのです。

SetSourceDataメソッドの記述方法

グラフにデータをセットするときに使うのが、ChartオブジェクトのSetSourceDataメソッドです。

パラメータには、グラフのデータソースにしたい範囲を指定します。

記述方法はこちら。

Chartオブジェクト.SetSourceData Source:=グラフのデータソースにしたい範囲(Range型)

グラフのデータソースにピボットテーブルをセットするコード

では、上で作成したグラフに、こちらのF2セルからG8セルの範囲にある、「売上」という名前のピボットテーブルをデータソースとしてセットしてみましょう。

ピボットテーブル

コードはこちら。

Sub Graph_From_PivotTable()
Dim pvtChart As Shape

Set pvtChart = ActiveSheet.Shapes.AddChart2(XlChartType:=51, _
                                                                    Left:=450, _
                                                                    Top:=20, _
                                                                    Height:=200, _
                                                                    Width:=300)
    
pvtChart.Chart.SetSourceData Source:=ActiveSheet.PivotTables("売上").DataBodyRange

End Sub

「売上」というピボットテーブルをデータソースとした、円グラフをワークシート上に追加する、というコードです。

こちらのコードを実行すると…

ピボットテーブル、グラフ追加

このように、ピボットテーブルをデータソースにした円グラフが作成されましたね!

AddChart2メソッドの使用が推奨されている

AddChart2メソッドは、末尾に”2″がついている通り、実はAddChartメソッドも存在しますし、Excel2013以降も利用することができます。

しかしMicrosoftは、AddChartメソッドは、Excel2013以前との下位互換のために残されているもので、Excel2013以降での使用は推奨していません。

特段の理由が無ければ、AddChart2メソッドを利用したほうが良さそうですね。

最後に

今回は、ピボットテーブルからグラフを作成する方法をご紹介しました。

面倒なレポート作成も、グラフやピボットテーブルをVBAで作成することができれば、ぐっと楽になるかもしれませんよ。

それでは、最後までお読みいただきありがとうございました!

G Suite管理コンソールからApp Makerのデータベース設定を行う方法

$
0
0
database

photo credit: pockethifi WP_20160607_007 via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

シリーズのおおまかな流れは以下のようになります。

  1. GCPを使える状態にする
  2. App Makerで使えるデータベースとしてのCloud SQLを用意する
  3. App Makerでアプリを作る

前回は、GCPへのトライアル登録を行って使える状態にする部分をお伝えしました。

Google Cloud Platform(GCP)に無料トライアル登録をする方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、Google Cloud Platform(GCP)に無料トライアル登録をする方法です。

ですから、今回は2ですね。

G Suite管理コンソールからApp Makerのデータベース設定を行う方法をお伝えします。

では、行ってみましょう!

App MakerでCloud SQLを使用できるようにする手順

App MakerではデータベースとしてCloud SQLを使用することを強く推奨しています。

その証拠として、App MakerでCloud SQLを使用できるようにするための専用のかつ簡単な手順が用意されているのです。

ただし、その手順はG Suiteの管理者のみ行うことができます。

G Suiteの管理コンソールにログインする

では、実際に進めてきましょう。

App MakerでCloud SQLを使用できるようにする作業は、G Suiteの管理コンソールから行っていきます。

以下、URLからアクセスしてログインしてください。

ログイン - Google アカウント

App Makerの設定を開く

続いて、App Makerの設定を目指します。

管理コンソールのトップでは「アプリ」を選択します。

G Suiteの管理コンソールでアプリを選択する

続いて「その他のGoogleサービス」を選択します。

G Suiteの管理コンソールでその他のGoogleサービスを選択

アプリ一覧が表示されますので、「App Maker」を選択します。

「A」ではじまりますから、一番上にありますね。

G Suiteの管理コンソールでApp Makerを選択

App Makerでデータベースの設定をする

続いてApp Makerのデータベースの設定をしていきます。

次の画面、ちょっとわかりづらいですが「データベース設定」のエリアのいずれかをクリックすればOKです。

G Suiteの管理コンソールでApp Makerのデータベースの設定をクリック

そして、左側のエリアから該当の組織部門を選択して「Cloud SQLの設定サポート」をクリックします。

組織部門ですが、全ユーザーに適用する場合は最上位の組織部門を選択し、そうでない場合は子組織部門や設定グループw選択します。

G Suiteの管理コンソールでCloud SQLの設定サポートをクリック

すると、前回の記事でGCPを有効化したときに自動作成されたプロジェクト「My First Project」が選択状態になります。

この状態で「インスタンスを作成」をクリックします。

G Suiteの管理コンソールでCloud SQLのインスタンスを作成をクリック

Cloud SQLのインスタンスの作成画面に遷移する

すると、以下のように「Cloud SQLインスタンスの作成」というダイアログが表示されます。

以下のような指示が書かれていますが…

  1. Google Cloud Console を開きます。
  2. インスタンス ID と root のパスワードを入力します。設定が最大限に機能するよう、[リージョン] は [us-central1] に指定してください。
  3. インスタンス作成後、このウィンドウに戻って [更新] をクリックします。

「インスタンスID」「rootのパスワード」「リージョン」「us-central1」…?

はい、わかりません。

Googleさん、ここで一気に突き放しにかかりますね。

ですが、この手順でCloud SQLインスタンスを作成することで、作成したインスタンスをApp Maker用のデータベースとして使えるようになるというわけですね。

ひとまず、「Google Cloud Console」をクリックします。

G Suiteの管理コンソールのCloud SQLインスタンスの作成ダイアログ

以下のような画面が開きます。

これが、Cloud SQLのインスタンス作成の画面です。

Cloud SQLのインスタンス作成画面

何やらまた設定をする項目がいっぱい出てきましたね…次回以降順を追って進めていきましょう。

まとめ

以上、G Suite管理コンソールからApp Makerのデータベース設定を行う方法をお伝えしました。

今回は、G Suite管理コンソールから作業をするんだということがわかっていれば、とても簡単な手順ですね。

ちなみに、もしかすると組織や環境によっては、異なる分岐になるかも知れませんので、その場合は以下のドキュメントをご参照ください。

Set up a Cloud SQL database for App Maker - G Suite Admin Help
When you set up a default Cloud SQL instance that App Maker apps can use to store app data: Developers can quickly add data models to their apps with just a few...

次回はいよいよCloud SQLのインスタンスを作成していきます。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法

ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法

$
0
0

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

シリーズの全体の流れは以下のようになっています。

  1. GCPを使える状態にする
  2. App Makerで使えるデータベースとしてのCloud SQLを用意する
  3. App Makerでアプリを作る

現在は「2」を進めているところで、前回はG Suite管理コンソールからApp Makerのデータベース設定を開くところまでを進めました。

G Suite管理コンソールからApp Makerのデータベース設定を行う方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、G Suite管理コンソールからApp Makerのデータベース設定を行う方法です。

今回は、そのつづき。

ノンプログラマー向けにGCPコンソールを使ってApp Maker用のCloud SQLのインスタンスを作成する方法をお伝えしていきますよ。

では、行ってみましょう!

前回までのおさらい

シリーズ全体としては、App Makerでアプリを作る際のでデータベースとして推奨されているCloud SQLを使えるようにしていこうというのが目標となります。

その際に以下条件があります。

  • App Makerを使うためにはG Suite Business以上の登録が必要
  • Cloud SQLを使うためにはGCPの登録が必要

GCPについては、まずGCPのトライアル登録をする方法についてお伝えしました。登録をすると、GCP上に「My First Project」というプロジェクトが自動で作成されます。

続いて、G Suite管理コンソールからApp MakerのデータベースとしてCloud SQLを使えるように設定をしていきます。

前回はその設定をする途中、GCPのコンソールを開くところまでをお伝えしました。

これからの手順

App MakerのデータベースとしてCloud SQLを設定したいのですが、まだCloud SQLのインスタンスを作成していませんので、そこから作業を進めます。

つまり、ここからは以下のような手順になります。

  1. GCPのコンソールでCloud SQLのインスタンスを作成する
  2. G Suite管理コンソールで作成したインスタンスを選択する

インスタンスとは

これまで何度も「インスタンス」と連呼して来ましたが、インスタンスとはそもそも何でしょうか?

インスタンスとは仮想的なコンピュータのことです。

VMインスタンスともいいますが、VMは「Virtual Machine」の略ですね。

Googleはクラウド上の仮想マシンでGoogle検索や、YouTubeやG Suiteなど超大規模サービスを運営していますが、それをユーザーに提供をすべくプラットフォーム化したのがGCPです。

つまり、私たちがGCPに登録して、そこにインスタンスを作成することで、Googleが使っている強力なインフラ上にあるさまざまな機能を持つマシンをお借りできるというわけです。

それで、そのうちデータベースの機能を持つマシンを提供するサービスのひとつがCloud SQLということになります。

App Makerから遷移したCloud SQLインスタンス作成画面

App Makerから遷移したCloud SQLインスタンス作成画面が以下です。

色々と設定する必要がありますが、その前に上部のワードについて確認しておきましょう。

G Suite管理コンソールからCloud SQLインスタンス作成に遷移した画面

まず、プロジェクト名「My First Project」ですが、今この配下にいて、そこにインスタンスを作成していくことを表します。

また、「MySQL第2世代インスタンス」というワードです。

「MySQL」はデータベースエンジンの種類で、Cloud SQLでは「PostgreSQL」というエンジンも選択できますが、App Makerでは「MySQL」が必須となっています。

「第2世代」といのはインスタンスの世代で、「第1世代」はまもなく廃止になりますので、これも「第2世代」が必須となっています。

App Makerから遷移した場合、これらは既に決定されている状態なので、他の設定を進めてインスタンスを作成していくことになります。

作成するCloud SQLインスタンスの情報

では、実際に作成するCloud SQLインスタンスの情報を設定をしていきます。

具体的には以下のようにしてください。

  • インスタンスID: app-maker-test
  • rootパスワード: お好きなパスワード
  • リージョン: us-central1(推奨)
  • ゾーン: 任意(デフォルト)
  • データベースのバージョン: MySQL 5.7(デフォルト)

作成するCloud SQLのインスタンスの設定

以下、いくつかの項目について補足しますね。

インスタンスID

インスタンスIDはインスタンスの名前です。わかりやすい名前が良いです。

リージョンとゾーン

リージョンというのは、データセンターが置かれている地域のことです。

「us-central1」は米国アイオワ州になります。

「asia-northeast1」(東京)や「asia-northeast2」(大阪)を選びたくなりますが、App Makerでは「us-central1」推奨です。

というのも、App Makerのアプリは「us-central」で行われるので、そのほうがパフォーマンスが良いとされています。

ゾーンは理由がない限りは「任意」のままにしておきます。

Cloud SQLインスタンス作成の設定オプション

次に「設定オプションを表示」を開いて、Cloud SQLインスタンス作成の設定オプションを見ていきましょう。

Cloud SQLインスタンス作成の設定オプションを開く

マシンタイプとストレージの設定

ここで、「マシンタイプとストレージの設定」についてはぜひ設定を見ておきましょう。

というのも、Cloud SQLの利用料金は、マシンタイプやストレージなどその設定の複合的な要素によって変わってくるからです。

  • インスタンスの料金: マシンタイプとリージョンにより1分ごとに課金される
  • ストレージの料金: 容量とストレージ種類に応じて課金される
  • ネットワークの料金: リージョンと下り容量に応じて課金される

今回は、トライアルで300ドルがチャージされているとはいえ、テスト用ということで最も低スペックの安いマシンタイプとストレージにしておきます。

「マシンタイプとストレージの設定」をクリックして展開して、「変更」をクリックします。

Cloud SQLのマシンタイプとストレージの設定を変更する

「マシンタイプの選択」で「db-f1-micro」を選択して「選択」をクリックします。

Cloud SQLのマシンタイプを選択する

画面が戻ったら「ストレージの種類」を「HDD」に変更しておきます。

Cloud SQLのストレージをHDDに変更

SSDのほうがパフォーマンスが良いですが、ちょっと高いのです。

ちなみに、「ストレージの自動増量を有効化」のチェックを入れておくと、容量の上限に近づいたときに容量が段階的に引き上げられるとのこと。便利ですね。

最後に「バックアップを自動化する」のチェックも外します。ここも少しお金に関係しますが、テストなので不要です。

そして「作成」します。

Cloud SQLのバックアップ自動化の設定をしてインスタンス作成

ちなみに、使用していない間はインスタンスを停止することで、さらに倹約することができます。

ここでは詳しくは触れませんので、以下のドキュメントを参考にしてみてください。

Starting, stopping, and restarting instances  |  Cloud SQL for MySQL  |  Google Cloud

インスタンスの作成完了

これで、以下の画面になりますので、少し待ちます。

Cloud SQLのインスタンスを作成中

しばらくすると以下のような画面になり、Cloud SQLのインスタンス作成が完了です。私の環境では5分程度で完了しました。

Cloud SQLのインスタンス作成が完了

まとめ

以上、ノンプログラマー向けにGCPコンソールを使ってApp Maker用Cloud SQLのインスタンスを作成する方法をお伝えしました。

覚えることは少しありましたが、ある程度はGCPとCloud SQLについて理解しながら進めていただけたのではないでしょうか。

次回は、G Suite管理コンソールに戻って、作成したインスタンスを設定していきます。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法
  3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
  4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法

【GAS×freeeAPI】スプレッドシートのデータからチャットワーク通知用の本文を作成する

$
0
0

こんにちは!ITライターのもり(@moripro3)です!

クラウド会計ソフトfreeeのAPIを使って経理業務を自動化するネタをシリーズでお届けしています。

このシリーズでは、freeeとチャットワークを連携して「当日入金予定の取引一覧を自動でチャットワークに送信するツール」を作成します。

成果物のイメージがこちら!入金予定のある日に、自動でチャットワークに通知が届きます。

freeeシリーズ2成果物イメージ

前回の記事では、オブジェクトからデータを取り出し、スプレッドシートに書き出す方法を紹介しました。

【GAS×freeeAPI】オブジェクトからデータを取り出してスプレッドシートに書き出す
「当日入金予定の取引一覧を自動でチャットワークに送信する」シリーズの第5回目。キーと値がペアになった「オブジェクト」から必要な値のみを取り出して「配列」に格納し、スプレッドシートに書き出す方法を紹介しています。

今回の記事では、スプレッドシートのデータからチャットワーク通知用の本文を作成します。ツール完成まであと一歩ですよ!

シリーズを通してfreeeAPIを使いこなし、経理業務の自動化を進めていきましょう!

(この記事はfreee株式会社さまとのコラボ企画です。シリーズを通して、皆さんの働くの価値を上げられるようサポートしていきます!)

取引データの「ID」を「名称」に変換する

前回の記事で、freeeAPIのレスポンスをスプレッドシートに書き出しました。オブジェクト(連想配列)から必要データのみを配列に格納し、1回でスプレッドシートに書き込む方法でした。

freeeapi2-5-1

わざわざスプレッドシートに書き込まなくても、レスポンスのデータを直接チャットワークに送信できるのでは・・・?と思うかもしれませんね。

いったんスプレッドシートに書き込んだのは、下記3つの項目を変換するためです。数値形式のIDがチャットワークに通知されても、何の科目かわかりませんからね。

  1. 取引先ID
  2. 勘定科目ID
  3. 品目ID

そこで、この3つの「ID」を「名称」に変換します。スプレッドシートのG列~I列に、名称用のヘッダーを準備します。

ヘッダー項目

取引先・勘定科目・品目それぞれについて、「IDと名称が存在するマスタ」を用意し、「ID」をキーにして「名称」に変換します。

シリーズ初回の記事「会計freee連携アドオン」でスプレッドシートにデータを取得するで、3つの情報を取得しました。

  1. 取引先情報
  2. 勘定科目情報
  3. 品目情報

これらの情報をマスタとして使い、名称を取得します。

シートを参照

アドオンで取得した情報をマスタ形式に整形

スプレッドシートのVLOOKUP関数を使用して、「ID」をキーとして、「名称」に変換します。

VLOOKUP関数は「キー」を「値」の左側に配置する必要があるので、「キー」をA列に移動します。

取引先情報では、「システムID」が「キー」になります。

キーをA列に移動

3つのシートそれぞれについて、同じ作業をします。

  1. 取引先情報
  2. 勘定科目情報
  3. 品目情報

A列に「ID」・B列に「名称」を配置します。

キーと名称

VLOOKUP関数でIDを名称に変換する

VLOOKUP関数で「取引先ID」をキーにして、「取引先情報」のシートから「取引先」を取得します。

VLOOKUP(検索キー, 範囲, 番号, [並べ替え済み])

IFERROR関数も組み合わせて、IDが見つからない場合は”-“(ハイフン)表示にします

IFERROR(値, [エラー値])

G2セルの入力値がこちらです。
=IFERROR(VLOOKUP(D2,'取引先情報'!A:B,2,false),"-")

取引先

他の2項目も同様の処理をします。

「勘定科目ID」をキーにして、「勘定科目情報」のシートから「勘定科目」を取得します。

勘定科目

「品目ID」をキーにして、「品目情報」のシートから「品目」を取得します。

品目

これで、3つの項目をすべて名称に変換できました。実行日によって取引件数が変わるので、関数式は任意の行までコピーしておきましょう。

数式のコピー

これでスプレッドシート上のデータが完成しました。ここからチャットワーク通知用の本文を作成していきましょう!

チャットワーク通知用の本文を作成する

このツールでは、スプレッドシートの5項目をチャットワークに送信します。

チャットワークに送信する項目

5項目を、このような形式でチャットワークに通知します。

freeeapi2-6-10-3

チャットワーク通知用の本文を作る関数を作成していきます。取引件数の分、データを作成するので、引数として取引件数を受け取ります。

  • 関数名:createBody
  • 引数:取引件数

createBody関数は、取引データが存在する場合のみ、main関数から呼び出されます。

function main() {
  
  //当日入金予定の取引一覧を取得する
  var response = getDeals();
  
  //JSON形式の文字列をオブジェクトに変換する
  var obj = JSON.parse(response);
  
  //取引件数の確認
  var total_count = obj.meta.total_count;
  
  //取引データが存在する場合のみ、後続の処理を行う
  if (total_count > 0) {

    //レスポンスをスプレッドシートに書き出す
    OutputDeals(obj.deals);
    //チャットワーク通知用の本文を作成する
    createBody(total_count);
    
  }
  
}

これから作成するcreateBody関数です。取引件数(total_count)を引数として受け取ります。

/**
 * スプレッドシートのデータからチャットワーク通知用の本文を作成する
 *
 * @param {number} 取引件数
 */
function createBody(total_count) {

  //処理

}

それではcreateBody関数の中身を書いていきましょう。

スプレッドシートの取引データを二次元配列に格納

スプレッドシートの取引データを二次元配列に格納します。

二次元配列に格納

  • 行数:total_count(ここでは3件)
  • 列数:A列~I列(9列)

RangeオブジェクトのgetValuesメソッドで、セル範囲を変数valuesに格納します。

var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('取引');
var values = sheet.getRange(2, 1, total_count, 9).getValues();//A列~I列の値を格納

二次元配列の値を変数に格納

まずは、1件目の取引からチャットワーク通知用の文字列を作ってみます。チャットワークに通知するのは赤枠の項目のみです。(配列の要素番号0,2,6,7,8)

二次元配列の要素番号

コードです。二次元配列の1件目なので、行番号をvalues[0]にしています。5項目をパイプラインで結合します。

var issue_date,amount,partner,account_item,item;
var body = '';
  
//二次元配列の値を変数に格納
issue_date = values[0][0]; //発生日
amount = values[0][2]; //金額
partner = values[0][6]; //取引先
account_item = values[0][7]; //勘定科目
item = values[0][8]; //品目
  
//パイプライン(|)で結合する
body = issue_date + ' | ' + partner + ' | ' + amount + ' | ' + account_item + ' | ' + item;
Logger.log(body);

 

ログ出力結果です。5項目を取得して、1行に結合できました。

1行分のログ

あとは、取引件数分のデータを取得して文字列を作成すればよいですね!

取引件数分のデータから文字列を作成する

ループ処理で、取引件数の分、データを結合します。文字列結合のポイントは2つあります。

①末尾に改行コード ’\n’ を付与する

②結合代入演算子の「+=」で結合する(※下記の2つは、どちらも同じ結果になります)

  • body = body + str
  • body += str

5項目のヘッダーも付与しておきましょう。

var issue_date,amount,partner,account_item,item;
var body = '';
  
for (var i = 0; i < values.length; i++) {
    
  //二次元配列の値を変数に格納
  issue_date = values[i][0]; //発生日
  amount = values[i][2]; //金額
  partner = values[i][6]; //取引先
  account_item = values[i][7]; //勘定科目
  item = values[i][8]; //品目
    
  //パイプライン(|)で結合する
  body += issue_date + ' | ' + partner + ' | ' + amount + ' | ' + account_item + ' | ' + item + '\n';
    
}

//ヘッダー項目を付与
var header = '[発生日] | [取引先] | [金額] | [勘定科目] | [品目等]\n';
body = header + body;

Logger.log(body);

 

ログ出力結果です。ヘッダー項目と取引3件分の本文を作成できました。

ログ出力結果

あとは、この文字列をチャットワークに通知すれば完成です!

スクリプトまとめ

ここまでで作成したスクリプトのまとめです。

※下記2つの関数は過去記事をご参照ください。

function main() {
  
  //当日入金予定の取引一覧を取得する
  var response = getDeals();
  
  //JSON形式の文字列をオブジェクトに変換する
  var obj = JSON.parse(response);
  
  //取引件数の確認
  var total_count = obj.meta.total_count;
  
  //取引データが存在する場合のみ、後続の処理を行う
  if (total_count > 0) {

    //レスポンスをスプレッドシートに書き出す
    OutputDeals(obj.deals);

    //チャットワーク通知用の本文を作成する
  createBody(total_count);
    
  }
  
}

/**
 * スプレッドシートのデータからチャットワーク通知用の本文を作成する
 *
 * @param {number} 取引件数
 */
function createBody(total_count) {
  
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('取引');
  var values = sheet.getRange(2, 1, total_count, 9).getValues();//A列~I列の値を格納
  
  var issue_date,amount,partner,account_item,item;
  var body = '';
  
  for (var i = 0; i < values.length; i++) {
    
    //二次元配列の値を変数に格納
    issue_date = values[i][0]; //発生日
    amount = values[i][2]; //金額
    partner = values[i][6]; //取引先
    account_item = values[i][7]; //勘定科目
    item = values[i][8]; //品目
    
    //パイプライン(|)で結合する
    body += issue_date + ' | ' + partner + ' | ' + amount + ' | ' + account_item + ' | ' + item + '\n';
    
  }
  
  //ヘッダー項目を付与
  var header = '[発生日] | [取引先] | [金額] | [勘定科目] | [品目等]\n';
  body = header + body;

  Logger.log(body);
  /*
  [発生日] | [取引先] | [金額] | [勘定科目] | [品目等]
  2019-07-01 | テスト会社5 | 86400 | 売上高 | ポスターデザイン
  2019-06-15 | テスト会社4 | 54000 | 売上高 | サービス料収入
  2019-06-01 | テスト会社3 | 108000 | 売上高 | デザイン素材
  */

  
}

 

まとめ・次回予告

「当日入金予定の取引一覧を自動でチャットワークに送信する」シリーズの第6回目では、スプレッドシートのデータからチャットワーク通知用の本文を作成する方法を紹介しました。

  • VLOOKUP関数を使用して、「ID」を「名称」に変換する
  • スプレッドシートの値を二次元配列に格納し、ループ処理で値を結合する
    • 取引1件ごとに、末尾に改行コード \n を付与
    • 結合代入演算子 += で文字列を結合

さて次回はいよいよ最終回!チャットワークに送信しますよ。

どうぞお楽しみに!

連載目次:【GAS×freeeAPI】当日入金予定の取引一覧を自動でチャットワークに送信する

「クラウド会計ソフトfreee」のAPIをGASで操作して経理業務を自動化するシリーズ。「当日入金予定の取引一覧を自動でチャットワークに送信するツール」の作成を目標とします。

  1. ノンプログラミングでOK!「会計freee連携アドオン」でスプレッドシートにデータを取得する
  2. 【GAS×freeeAPI】指定条件の取引一覧を取得する「リクエストURL」の作り方と仕組み
  3. 【GAS×freeeAPI】GETリクエストで当日入金予定の取引一覧を取得する
  4. 【GAS×freeeAPI】APIリクエストのレスポンスから必要データのみを取り出す
  5. 【GAS×freeeAPI】オブジェクトからデータを取り出してスプレッドシートに書き出す

App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法

$
0
0
photo credit: dejankrsmanovic <a href="http://www.flickr.com/photos/155403590@N07/32140335197">Servicing Old Laptop</a> via <a href="http://photopin.com">photopin</a> <a href="https://creativecommons.org/licenses/by/2.0/">(license)</a>

photo credit: dejankrsmanovic Servicing Old Laptop via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

シリーズの全体の流れは以下のようになっております。

  1. GCPを使える状態にする
  2. App Makerで使えるデータベースとしてのCloud SQLを用意する
  3. App Makerでアプリを作る

それで、前回は「2」の山場。GCPでCloud SQLのインスタンスを作成する方法をお伝えしました。

ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、GCPコンソールでCloud SQLのインスタンスを作成する方法をお伝えします。

ということで、今回はそのつづき。

App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法です。

では、行ってみましょう!

前回までのおさらい

簡単にこれまでの流れをおさらいしておきましょう。

まず最初に、GCPの登録を済ませておきます。初回であればトライアル登録が可能だと思います。

Google Cloud Platform(GCP)に無料トライアル登録をする方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、Google Cloud Platform(GCP)に無料トライアル登録をする方法です。

登録すると、少なくともひとつのプロジェクトは作成されるので、そのプロジェクト上にCloud SQLのインスタンスを作ることになります。

続いて、G Suiteの管理コンソールにログインしてApp Makerの設定からデータベースの設定へと進みます。

G Suite管理コンソールからApp Makerのデータベース設定を行う方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、G Suite管理コンソールからApp Makerのデータベース設定を行う方法です。

まだCloud SQLのインスタンスが作成されていなければ、以下のダイアログの「Google Cloud Console」のリンクから、GCPを開くことができます。

G Suite管理コンソールのApp Maker設定画面からCloud SQLインスタンスを作成

そして、前回Cloud SQLのインスタンスを作成するというところまで進めました。

ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、GCPコンソールでCloud SQLのインスタンスを作成する方法をお伝えします。

今回は、その続きから進めていきます。

App MakerのデータベースとしてCloud SQLインスタンスを設定する

では、App Makerのデータベースとして作成したCloud SQLインスタンスを設定していきましょう。

GCPコンソールで、Cloud SQLのインスタンスを作成したら、G Suite管理コンソールに画面を切り替えます。

以下の「Cloud SQLインスタンスの作成」ダイアログが表示されているままのはずですので、ここで「更新」をクリックします。

G Suite管理コンソールのCloud SQLインスタンスの作成で更新する

するとダイアログが閉じて、「インスタンスを選択」ができるようになりますので、クリック!

G Suite管理コンソールでCloud SQLインスタンスを選択

「プロジェクトを選択」のドロップダウンが選択できるようになりますので、Cloud SQLインスタンスを作成したプロジェクトを選択します。

G Suite管理コンソールでGCPプロジェクトを選択

続いて、「インスタンスを選択」のドロップダウンが表示され、そのプロジェクト上のCloud SQLインスタンスを選択できますので、作成したインスタンスを選択し「保存」します。

今回は「app-maker-test」というインスタンスIDとしていました。

G Suite管理コンソールでCloud SQLインスタンスを選択

「デフォルトのインスタンスを設定しますか?」というダイアログが出ます。

「続行」を選択して先に進めます。

G Suite管理コンソールでデフォルトのインスタンスを設定

Cloud SQLインスタンスへのアクセス権限について

ちなみに、このダイアログに、ドメイン内ユーザーのCloud SQLインスタンスのアクセス権限について以下のようなテキストが表示されています。

App Makerにより権限が更新され、●●(ドメイン名)のすべてのユーザーにインスタンスへのアクセス権が付与されます。

これは文字通り、すべてのドメイン内のユーザーにCloud SQLインスタンスへの読み書き権限を与えるということを示しています。

しかし、実際のところCloud SQLへのアクセスはApp Makerが行うので、すべてのユーザーがCloud SQLインスタンスへのアクセスは不要です。

そのアクセス権限を制限したい場合は、編集することができますので、以下のヘルプページを参考に進めると良いと思います。

Set up a Cloud SQL database for App Maker - G Suite Admin Help
When you set up a default Cloud SQL instance that App Maker apps can use to store app data: Developers can quickly add data models to their apps with just a few...

App Makerのデータベースの設定完了

以上の手順が完了すると、以下のように「保存しました」というメッセージが表示されます。

G Suite管理コンソールでApp Makerのデータベース設定が保存された

すぐにApp Makerで使い始められるかと思いきや、実はそうではなくて、ドメインのすべてのユーザーが使えるようになるまでには最長で24時間ほどかかることがあるそうです。

まとめ

以上、App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法をお伝えしました。

今回の部分は、手順通りに進めれば何ら難しいことはなかったと思います。

ただ、権限のところについて気になる方は、調べながら所属組織にあった設定にされると良いでしょう。

次回は、App Makerでデータベースの使用をテストしていきます。

App MakerではじめてのCloud SQLのモデルを作成する方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回はApp MakerではじめてのCloud SQLのモデルを作成する方法を進めていきます。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法
  3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
  4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
  5. App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
  6. App MakerではじめてのCloud SQLのモデルを作成する方法

App MakerではじめてのCloud SQLのモデルを作成する方法

$
0
0
create-model

photo credit: arbyreed Spare via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

前回の記事はこちら。

App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、作成したCloud SQLのインスタンスをデータベースとして設定していきます。

G Suite管理コンソールでApp MakerのデータベースとしてCloud SQLインスタンスを設定する方法をお伝えしました。

これで、ようやくApp Makerでアプリケーションを作成する準備が整いましたね。

ということで、今回はApp MakerではじめてのCloud SQLのモデルを作成する方法を進めていきます。

では、行ってみましょう!

App Makerで新規アプリケーションを作成する

では、まずApp Makerで新規アプリケーションを作成していきます。

以下アドレスにアクセスします。

Google Developers
Google Developers コミュニティに参加しよう

「CREATE NEW APP」をクリックすると、新たなアプリケーションを作成することができます。

App Makerで新たなアプリケーションを作成する

「Create new app」の画面ではさまざまなテンプレートから新規アプリケーションの作成をすることができます。

ただ、今回は空白のアプリケーションを作っていきます。

ということで「Blank Application」の「SELECT」をクリックです。

App MakerでBlank Applicationを選択する

これで、新規アプリケーションの作成はできました。

App Makerの3つの要素

「Untitled App」という名前のアプリケーションが作成されました。

新規のApp Makerのアプリケーション

ただ、「Blank Application」ですから、中身は空っぽです。

それで、App Makerでは以下の3つの部分を作成し、それぞれを設定したり、連携させたりしてアプリケーションを作成していきます。

  • モデル: 「DATA」。いわゆるデータベース。今回はCloud SQLインスタンスを使用する
  • ページ: 「PAGE」。ユーザーが操作するためのページ。ウィジェットを配置してUIを作成する
  • スクリプト: 「SCRIPT」。UIの操作を受けての処理や、GASで他のGoogleアプリケーションを呼び出したりする

これらは、App Makerの画面左側のメニューからそれぞれ作成したり、アクセスしたりできます。

これまでのシリーズの記事で、Cloud SQLをデータベースとして使用できるようにしましたので、そのインスタンス上にこの新規のアプリケーションの「モデル」を作成していきます。

Cloud SQLによるモデルを作成する

では、Cloud SQLによるモデルを作成していきましょう。

今回は、以下のスプレッドシートに表されるような従業員データをデータベースとして作成してきます。

App Makerのモデルのもととなるスプレッドシート

このスプレッドシートも後で活躍しますので、作っておいてくださいね。

新規モデルを作成する

では、App Makerに戻りまして、「DATA」の右側に表示される「+」ボタンをクリックします。

App Makerでモデルを追加する

ここから新規のモデルを作成することができます。

モデルの種類を選択する

「Create Model」というダイアログが表示されますので、モデルの種類を選択します。

色々な種類がありますが、迷うことなく「Google Cloud SQL(recommended)」を選択して「NEXT」です。

App MakerのCreate ModelでCloud SQLを選択する

モデルの名前を決定する

続く「Create Cloud SQL Model」のダイアログでは、モデル名とオプションを設定していきます。

まずモデル名、すなわち「Model name」には今回は「EmployeeData」としておきます。

そして「IMPOERT FIELDS」をクリックしてください、

App Makerでモデル名を設定する

そうすることで、モデルのフィールドについて既存のスプレッドシートからインポートすることができます。

スプレッドシートのフィールドをインポートする

続いて「Create Model from a CSV file or Google Spreadsheet」というダイアログに遷移します。

先ほどのスプレッドシートからインポートをしたいので、ここのラジオボタンは「Use a Google Spreadsheet」を選択します。

それで「SELECT A SPREADSHEET…」をクリックです。

App Makerのモデルをスプレッドシートをもとに作成する

次の「Choose a spreadsheet to use a template for a model」では、インポート対象のスプレッドシートを検索して選択します。

検索窓に「従業員データ」などと入力すると、候補が出てきますので該当のスプレッドシートを選択した上で「Select」です。

App Makerのモデルのもととなるスプレッドシートを選択する

続いてシートを選択して、見出し行をフィールドとして使ってよいのであれば「Use the first row values as field names」にチェックを入れて「NEXT」です。

App Makerのモデルのフィールド名に最初の行を使用する

これで以下のようにフィールド名がインポートされるので問題なければ「CREATE」としてください。

App MakerでCloud SQLのモデルを作成する

App Makerで作成したモデル

これで、App Makerのはじめてのモデルの作成が完了しました。

左側にモデル「EmployeeData」が表示されていると思います。

また、その左には「SQL」というアイコンがあり、Cloud SQLによるモデルということもわかります。

選択すると、「FIELDS」タブで以下のようにフィールド一覧を確認することができます。

App MakerでCloud SQLのモデルを作成した

データベースとして必要となるPRIMARY KEYとしてフィールド「Id」が自動で追加されているのも確認できますね。

まとめ

以上、App MakerではじめてのCloud SQLのモデルを作成する方法をお伝えしました。

スプレッドシートをインポートしなくてもモデルの作成はできますが、G Suiteユーザーであればこちらのほうが便利なときがありますね。

次回は、ページを作成してアプリケーションを作り込んでいきます。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法
  3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
  4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
  5. App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
  6. App MakerではじめてのCloud SQLのモデルを作成する方法

【エクセルVBA】TextFrameオブジェクトとCharactersオブジェクトでテキストボックスを操作してみよう!

$
0
0

eyecatch,textframe

皆様こんにちは、ノグチです。

エクセルで資料を作るときに何かと使うテキストボックス。

便利で気軽にワークシートに追加できるのですが、数が多くなると手動でテキストを更新するのが少々面倒になりますよね。

VBAを使えば、その面倒臭さが軽減できるかもしれませんよ。

ということで今回は、エクセルのテキストボックスをVBAで操作する方法をご紹介します。

テキストボックスを操作する

TextFrameオブジェクトを取得する

テキストボックスを操作するには、TextFrameオブジェクトを取得します。

TextFrameオブジェクトは、ShapeオブジェクトのTextFrameメソッドで取得することができます。

記述方法はこちら。

Shapeオブジェクト.TextFrame

TextFrameオブジェクトのプロパティ

TextFrameオブジェクトのプロパティには、このようなものがあります。

プロパティ名 指定する内容 指定する定数
HorizontalAlignment テキストの水平方向の表示位置を定数または数値で設定します。 xlHAlignLeft(左揃え)、xlHAlignRight(右揃え)、xlHAlignCenter(中央揃え)
VerticalAlignment テキストの垂直方向の表示位置を、定数または数値で設定します。 xlVAlignBottom(下揃え)、xlVAlignCenter(上下中央揃え)、xlVAlignTop(上揃え)
MarginBottom テキストボックスの下余白のポイントを数値で指定します。
MarginLeft テキストボックスの左余白のポイントを数値で指定します。
MarginTop テキストボックスの上余白のポイントを数値で指定します。
MarginRight テキストボックスの右余白のポイントを数値で指定します。

例えば、ワークシート上にある「テキストボックス1」というテキストボックスを操作したい場合、このようなコードになります。

Sub Text_Box_Change()
    With ActiveSheet.Shapes("テキスト ボックス 1").TextFrame
        .HorizontalAlignment = xlHAlignRight
        .VerticalAlignment = xlVAlignCenter
    End With
End Sub

Charactersオブジェクトでテキストを操作

TextFrameオブジェクトが取得できたところで、テキストボックス内のテキストを更新してみましょう。

テキストボックス内のテキストは、Charactersオブジェクトを取得することで変更することができます。

Charactersオブジェクトは、TextFrameオブジェクトのCharactersメソッドで取得します。

記述方法はこちら。

TextFrameオブジェクト.Characters

そしてCharactersオブジェクトの主なプロパティはこちら。

プロパティ 設定する内容
Text テキストボックス内の、指定した範囲の文字列を設定します。
Font テキストボックス内の文字列のフォントを設定します。
Count テキストボックス内のテキストの数をカウントします。
Caption テキストボックス内で指定した範囲の文字列を取得します。

テキストボックスのテキストを更新してみる

テキストボックスと、テキストボックス内のテキストを更新する方法をご紹介したところで、実際にこちらのテキストボックスのテキストを更新して、上下中央揃え、右揃え表記にしてみましょう。

テキストボックス,更新前

コードはこちら。
Sub Text_Box_Change()
    With ActiveSheet.Shapes("テキスト ボックス 1").TextFrame
        .Characters.Text = "テキスト更新!"
        .HorizontalAlignment = xlHAlignRight
        .VerticalAlignment = xlVAlignCenter
    End With

End Sub

ワークシート上にあるテキストボックスのテキストを、「テキスト更新!」に変更して、中央揃え、右揃え表記にする、というコードです。
上のコードを実行してみると…
テキストボックス,テキスト更新,配置
この通り、テキストボックスのテキストが更新されていますね。

テキストの一部を更新することもできる

上のCharactersオブジェクトのTextプロパティの説明の中で、「指定した範囲の文字列を設定します。」と書いていますよね。

この範囲という言葉の通り、テキストボックス内のテキストの一部を変更することもできます。

Charactersオブジェクトのパラメータに、範囲を開始する文字の位置と文字列の長さを指定することで、その範囲のテキストだけを更新することができますよ。

たとえば、こちらのテキストボックスのテキストのうち、「★★★」の部分だけを更新する場合。

テキストボックス,一部更新

こんなコードになります。

Sub Text_Change_Length()
    With ActiveSheet.Shapes("テキスト ボックス 1").TextFrame
        .Characters(5, 3).Text = "TEXT"
    End With
End Sub

こちらのコードを実行すると…

テキストボックス,更新,一部

このように、Charactersオブジェクトのパラメータで指定した範囲だけ、変更されていますね。

最後に

今回は、エクセルのテキストボックスをVBAで操作する方法をご紹介しました。

テキストボックスのテキスト更新は、手動でやるとなかなか面倒ですよね。数が増えればなおさら大変です。

VBAで更新できれば、この面倒さを軽減できますね。

それでは、最後までお読みいただきありがとうございました!

【GAS×freeeAPI】当日入金予定の取引一覧を毎日自動でチャットワークに送信する

$
0
0

こんにちは!ITライターのもり(@moripro3)です!

クラウド会計ソフトfreeeのAPIを使って経理業務を自動化するネタをシリーズでお届けしています。

このシリーズでは、freeeとチャットワークを連携して「当日入金予定の取引一覧を自動でチャットワークに送信するツール」を作成します。

成果物のイメージがこちら!入金予定のある日に、自動でチャットワークに通知が届きます。

freeeシリーズ2成果物イメージ

前回の記事では、スプレッドシートのデータからチャットワーク通知用の本文を作成しました。

【GAS×freeeAPI】スプレッドシートのデータからチャットワーク通知用の本文を作成する
「当日入金予定の取引一覧を自動でチャットワークに送信する」シリーズの第6回目。スプレッドシートの値を取得して文字列結合し、チャットワークに通知する本文を作成します。

今回の記事はいよいよ最終回です!チャットワークへの送信処理と、トリガーによるスクリプト自動実行の設定をしてツールを完成させますよ!

シリーズを通してfreeeAPIを使いこなし、経理業務の自動化を進めていきましょう!

(この記事はfreee株式会社さまとのコラボ企画です。シリーズを通して、皆さんの働くの価値を上げられるようサポートしていきます!)

(前回のおさらい)チャットワーク通知用の本文をログ出力

前回の記事では、スプレッドシートに書き出した取引データの「ID」の項目を、マスタとVLOOKUP関数で「名称」に変換しました。

チャットワークに送信する項目

そして、赤枠の5項目からチャットワーク通知用の本文を作る関数createBodyで、ログ出力するところまでを確認しました。

/**
 * スプレッドシートのデータからチャットワーク送信用の本文を作成する
 *
 * @param {number} 取引件数
 */
function createBody(total_count) {
  
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('取引');
  var values = sheet.getRange(2, 1, total_count, 9).getValues();//A列~I列の値を格納
  
  var issue_date,amount,partner,account_item,item;
  var body = '';
  
  for (var i = 0; i < values.length; i++) {
    
    //二次元配列の値を変数に格納
    issue_date = values[i][0]; //発生日
    amount = values[i][2]; //金額
    partner = values[i][6]; //取引先
    account_item = values[i][7]; //勘定科目
    item = values[i][8]; //品目
    
    //パイプライン(|)で結合する
    body += issue_date + ' | ' + partner + ' | ' + amount + ' | ' + account_item + ' | ' + item + '\n';
    
  }
  
  //ヘッダー項目を付与
  var header = '[発生日] | [取引先] | [金額] | [勘定科目] | [品目等]\n';
  body = header + body;
  
  Logger.log(body);
  
}

ログ出力結果です。

ログ出力結果

あとはこれをチャットワークに送信するのですが、その前に少し装飾を加えていきます。

本文にメッセージ記法のタグを付ける

チャットワークには、メッセージやタスクの情報を装飾して見やすくするための「メッセージ記法」が存在します。

メッセージ記法の詳細はこちらのチャットワークAPIドキュメントをご覧ください。

これまで作成した文字列に対して、チャットワークのメッセージ記法のタグを付けていきます。

このツールでは2種類のタグを付与します。

  1. [title]タグ = メッセージのタイトル部を表す
  2. [info]タグ = メッセージ全体が特別な情報であることを表す

チャットワークのメッセージ記法

※タイトルの文字列は、「【会計freee】YYYY-MM-DDの入金予定(未入金のみ)」とします。

関数createBodyに処理を加えます。タイトルの文字列を作成して[title]タグで囲み、さらに、titleとbody全体を[info]タグで囲みます。

//タイトルとtitleタグを付与
var date = Utilities.formatDate(new Date(), 'JST', 'yyyy-MM-dd'); //当日日付
var title = '[title]【会計freee】' + date + 'の入金予定(未入金のみ)[/title]';
  
//全体をinfoタグで囲む
body = '[info]' + title + body + '[/info]';

Logger.log(body);

/*

 [info][title]【会計freee】2019-08-15の入金予定(未入金のみ)[/title][発生日] | [取引先] | [金額] | [勘定科目] | [品目等]
2019-07-01 | テスト会社5 | 86400 | 売上高 | ポスターデザイン
2019-06-15 | テスト会社4 | 54000 | 売上高 | サービス料収入
2019-06-01 | テスト会社3 | 108000 | 売上高 | デザイン素材
[/info]

*/

できました!あとは、変数bodyをチャットワークに送信すれば完成です!

取引データをチャットワークに送信する

この項では、GASでチャットワークにメッセージを送信するスクリプトを書いていきます。

チャットワークAPIトークンの取得

GASでチャットワークを操作するために、チャットワークAPIを使用します。

まずは「チャットワークのAPIトークン」を取得します。チャットワークAPIトークンの発行手続きは比較的簡単なので、こちらの記事を参照のうえ、発行してください。

【初心者向けGAS】チャットワークのマイチャットにメッセージを送る最も簡単な例
初心者向けGoogle Apps Scriptのシリーズとして、チャットワークのBotを作成する方法をお伝えしています。今回は、超簡単な例としてマイチャットにメッセージを送る方法と、APIトークンの取得の方法です。

ライブラリ「ChatWorkClient for Google Apps Script」を追加

「ChatWorkClient for Google Apps Script」というライブラリを使うと、チャットワークに簡単にメッセージを送信できます。

ライブラリのプロジェクトキーがこちらです。

プロジェクトキー: M6TcEyniCs1xb3sdXFF_FhI-MNonZQ_sT

ライブラリとは何か、ライブラリの追加方法についてはこちらの記事をご参照ください。

【初心者向けGAS】面倒なことはライブラリに任せよう!その概要と追加の方法
初心者向けGoogle Apps ScriptのシリーズとしてチャットワークのBotの作り方についてお伝えしています。今回はライブラリとは何か、またその追加の仕方についてお伝えしていきます。

送信先のルームIDを確認

チャットワークの送信先ルームを決めます。マイチャット・指定のグループいずれでも送信可能です。

チャットワークにはルーム(グループ)ごとに一意に割り当てられた「ルームID」が存在します。送信処理で「ルームID」が必要になるので、確認しましょう。

送信先ルームのURLの#!ridに続く数字が「ルームID」です。ここでは、当ブログの執筆チームグループに送信してみます。

チャットワークのルームIDを確認する

これでチャットワーク送信の準備が整いました!

チャットワークに送信するスクリプト

引数として受け取った文字列を、チャットワークの指定のルームIDに送信するスクリプトです。

※token, room_id は各自の情報を指定してください。

/**
 * チャットワークの指定のルームIDにメッセージを送信する
 * プロジェクトキー : M6TcEyniCs1xb3sdXFF_FhI-MNonZQ_sT
 *
 * @param {String} 送信するメッセージ
 */
function postChatwork(body) {
  
  var client = ChatWorkClient.factory({token : 'xxxxxxxxxxxxxxx'}); //APIトークンを指定
  
  client.sendMessage({
    room_id : 'xxxxxxxx', //ルームIDを指定
    body : body
  });
  
}

関数postChatworkに文字列を渡して実行すれば、チャットワークに送信できます。「送信者」はAPIトークンの所有者となります。

チャットワークAPIを使って送信

以上で、「当日入金予定の取引一覧をチャットワークに通知する」スクリプトの完成です。(スクリプトのまとめは最後に掲載します)

GASのトリガーを設定する

スクリプトを日次で自動実行するためにトリガーを設定します。

スクリプトエディタ上部の時計マーク「現在のプロジェクトのトリガー」を選択します。

現在のプロジェクトのトリガー

「+トリガーを追加」をクリックします。

トリガーを追加

赤枠の項目を設定します。「実行する関数を選択」は、関数mainです。送信時刻はお好みで指定しましょう。

トリガーの設定

これで、毎日午前6時~7時の間に自動でスクリプトが実行されます。条件に合致する取引が存在する日のみ、チャットワークに通知が届きます。

【まとめ】当日入金予定の取引一覧をチャットワークに送信するスクリプト

シリーズ2で作成した全スクリプトを掲載します。

※このスクリプトを動作させるためには、下記3つの条件が必要です。

  1. シリーズ1の記事「【はじめてのfreeeAPI】GASとfreeeつなぐ!連携認証の手順を一から紹介します」でfreeeAPIの認証を済ませていること
  2. 上記記事内の、freeeAPIのサービスを取得する関数「getService」が同一プロジェクト内に存在すること。また、Client_IDとClient_Secretに各自の値を設定していること
  3. 下記スクリプトの3つの変数に値を設定していること
    1. getDeals関数の「company_id」(事業所ID)
    2. postChatwork関数の「token」(チャットワークAPIトークン)
    3. postChatwork関数の「room_id」(チャットワークの送信先ルーム)

 

もり
もり

不明点や上手く動かないなどありましたら、私もり(@moripro3)にお気軽にお問い合わせください!TwitterのDMで承っております!

※当記事のコメント欄でももちろんOKです!

function main() {
  
  //当日入金予定の取引一覧を取得する
  var response = getDeals();
  
  //JSON形式の文字列をオブジェクトに変換する
  var obj = JSON.parse(response);
  
  //取引件数の確認
  var total_count = obj.meta.total_count;
  
  //取引データが存在する場合のみ、後続の処理を行う
  if (total_count > 0) {
    
    //取引データをスプレッドシートに書き込む
    OutputDeals(obj.deals);
    
    //チャットワーク通知用の本文を作成する
    var body = createBody(total_count);
    
    //チャットワークに送信する
    postChatwork(body);
    
  }
  
}

/**
 * freeeAPIにGETリクエストを送信して取引一覧を取得する
 *
 * @return {object} freeeAPIからのレスポンス
 */
function getDeals() {
  
  var accessToken = getService().getAccessToken();
  
  var company_id = 'xxxxxxx'; //事業所ID
  
  var date = new Date(); //現在日時
  date = Utilities.formatDate(date, 'JST', 'yyyy-MM-dd'); //表示形式を変換
  
  //リクエストURL
  var requestUrl = 'https://api.freee.co.jp/api/1/deals?' + 
    'company_id=' + company_id + 
    '&status=unsettled' +
    '&type=income' + 
    '&start_due_date=' + date +
    '&end_due_date=' + date + 
    '&limit=100';
  
  //リクエスト送信時に付与するオプションパラメータ
  var params = {
    "method" : "get",
    "headers" : {"Authorization":"Bearer " + accessToken}
  };
  
  var response = UrlFetchApp.fetch(requestUrl,params);
  
  return response;
  
}

/**
 * freeeAPIから取得したデータをスプレッドシートに書き出す
 *
 * @param {object} 取引データ
 */
function OutputDeals(objDeals) {
  
  //前回データのクリア
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('取引');
  var lastRow = sheet.getLastRow();
  
  sheet.getRange(2, 1, lastRow, 6).clearContent();//A列~F列の2行目以降をクリアする
  
  var arr = []; //空の配列を用意
  
  for(var i = 0; i < objDeals.length; i++) {
    
    var value1 = objDeals[i].issue_date; //発生日
    var value2 = objDeals[i].due_date; //支払期日
    var value3 = objDeals[i].amount; //金額
    var value4 = objDeals[i].partner_id; //取引先ID
    var value5 = objDeals[i].details[0].account_item_id; //勘定科目ID ※明細行1番目
    var value6 = objDeals[i].details[0].item_id; //品目ID ※明細行1番目
    
    //二次元配列を作成
    arr.push([value1,value2,value3,value4,value5,value6]);
    
  }
  
  //二次元配列をスプレッドシートに書き出す
  var i = arr.length; //タテ
  var j = arr[0].length; //ヨコ
  
  //スプレッドシートのA2セルを起点として、配列arrをセットする
  sheet.getRange(2, 1, i, j).setValues(arr);
  
}

/**
 * スプレッドシートのデータからチャットワーク送信用の本文を作成する
 *
 * @param {number} 取引件数
 */
function createBody(total_count) {
  
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('取引');
  var values = sheet.getRange(2, 1, total_count, 9).getValues();//A列~I列の値を格納
  
  var issue_date,amount,partner,account_item,item;
  var body = '';
  
  for (var i = 0; i < values.length; i++) {
    
    //二次元配列の値を変数に格納
    issue_date = values[i][0]; //発生日
    amount = values[i][2]; //金額
    partner = values[i][6]; //取引先
    account_item = values[i][7]; //勘定科目
    item = values[i][8]; //品目
    
    //パイプライン(|)で結合する
    body += issue_date + ' | ' + partner + ' | ' + amount + ' | ' + account_item + ' | ' + item + '\n';
    
  }
  
  //ヘッダー項目を付与
  var header = '[発生日] | [取引先] | [金額] | [勘定科目] | [品目等]\n';
  body = header + body;
  
  //タイトルとtitleタグを付与
  var date = Utilities.formatDate(new Date(), 'JST', 'yyyy-MM-dd'); //当日日付
  var title = '[title]【会計freee】' + date + 'の入金予定(未入金のみ)[/title]';
  
  //全体をinfoタグで囲む
  body = '[info]' + title + body + '[/info]';

  return body;
  
}

/**
 * チャットワークの指定のルームIDにメッセージを送信する
 * 参照ライブラリ : M6TcEyniCs1xb3sdXFF_FhI-MNonZQ_sT
 *
 * @param {String} 送信するメッセージ
 */
function postChatwork(body) {
  
  var client = ChatWorkClient.factory({token : 'xxxxxxxxxx'}); //APIトークンを指定
  
  client.sendMessage({
    room_id : 'xxxxxxxx', //ルームIDを指定
    body : body
  });
  
}

「当日入金予定の取引一覧を自動でチャットワークに送信する」シリーズの第7回目(最終回)では、チャットワークにメッセージを送信する処理を作成してツールを完成させました。また、これらの処理を紹介しました。

  • チャットワークのメッセージを装飾する「メッセージ記法」の使い方
  • GASからチャットワークにメッセージを送信するライブラリ「ChatWorkClient for Google Apps Script」の使い方
  • GASで指定の日時にスクリプトを自動実行するトリガーの設定方法

シリーズ2は以上です!お読みいただきありがとうございました。

連載目次:【GAS×freeeAPI】当日入金予定の取引一覧を自動でチャットワークに送信する

「クラウド会計ソフトfreee」のAPIをGASで操作して経理業務を自動化するシリーズ。「当日入金予定の取引一覧を自動でチャットワークに送信するツール」の作成を目標とします。

  1. ノンプログラミングでOK!「会計freee連携アドオン」でスプレッドシートにデータを取得する
  2. 【GAS×freeeAPI】指定条件の取引一覧を取得する「リクエストURL」の作り方と仕組み
  3. 【GAS×freeeAPI】GETリクエストで当日入金予定の取引一覧を取得する
  4. 【GAS×freeeAPI】APIリクエストのレスポンスから必要データのみを取り出す
  5. 【GAS×freeeAPI】オブジェクトからデータを取り出してスプレッドシートに書き出す
  6. 【GAS×freeeAPI】スプレッドシートのデータからチャットワーク通知用の本文を作成する

ノンプログラマーのための「三方良し」の社内勉強会開催&プレゼン術

$
0
0
seminar

photo credit: RETTER Seminar Hotel Bio Restaurant Seminarraum Waggerl via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

「ノンプログラマーのためのスキルアップ研究会」は、ノンプログラマーがプログラミングをはじめとするITスキルを学び合うコミュニティです。

ノンプロ研のもっともメインのオフラインイベントである「定例会」が先日開催されました。

テーマは「ノンプログラマーのための勉強会開催&プレゼン術」

せっかく身につけたプログラミングスキルやIT活用のノウハウ…自分だけのものにしておくのはもったいない!

ただ、その方法はわからないし、勇気が出ない… 今回は、そんなノンプログラマーを後押しをする企画です。

お二人のゲストにご登壇いただきましたが、いずれも学びの多いものでした。

ちなみに当日の様子は以下、Togetterのツイートまとめもご覧くださいませ。

ノンプロ研定例会Vol.23「ノンプログラマーのための勉強会開催&プレゼン術」
せっかく身につけたプログラミングスキルやIT活用のノウハウ…自分だけのものにしておくのはもったいないですよね!そのために活用できるのが勉強会やプレゼンの場です。ただ、いずれも準備がたいへんだったり..

では、行ってみましょう!

勉強会開催のススメ

トップバッターは、嘉穂無線ホールディングス株式会社の太田さん

非IT企業ながらも、2017年から社内で地道にGoogle App Scriptの社内勉強会を開催されてきたノウハウとその効果についてお話いただきました。

ノンプログラマーの居心地問題

苦労された点のひとつとして挙げていらっしゃったのが、ノンプログラマーの居心地問題

「こんな質問してもいいのかな?」「わからないっていいづらい…」みたいな遠慮があって、初心者であればあるほど居心地が悪くなってしまうケースがあります。

これは、けっこうあるあるです。

ノンプロ研の講座やSlackでも、この問題はけっこうあるかなと思っていますので、工夫の余地ありと思っていました。

太田さんは、これを「初級コースは本社ではない別の建物で行う」で対策されたようです。

物理的に、ノンプロしかいない心理的に安全な環境にしたということですね。

シンプルながらも、うまい方法ですね。時間帯とか、部屋の雰囲気とかも、工夫の余地はあるかも…と思いました。

まずは小さくても行動してみよう!

この取り込みを通して、得たいくつかのメリットについてお話いただきました。

  • 社内外での情報発信の機会(なんと、今年のGoogle Cloud Next 2019でご登壇されました!)
  • 社内・社外でのネットワークが増えた
  • 「GASなら太田さん」というポジショニングを確立した
  • インプットの動機づけ&理解の深堀り

アウトプットはやっぱり最強の学習法、かつ自らの価値も上げていくという二度・三度もおいしいアクションですよね。

太田さんは、完璧である必要はないので、まずは募集してみるところからやってみるのをおすすめされてました。

最初の一歩踏み出さないと、何も始まりませんもんね。

私も独立したときは、いきなりお金をいただくセミナーを企画してやっちゃいました。

誰でも必ず「はじめて」はあるのですよ…!

ノンプログラマーのためのプレゼン術

次は、ノンプロ研のプレゼンマスター矢野さんのお話

これまで数回のLTがあまりにも上手なので、その極意を教えていただくことになりました。

開始の30秒が勝負!

詳しくは言えないのですが、冒頭からとても魅力的な「石」があるんだよという話から入り、私含めて何人も聴衆が「石」の話ずっと聴きたくなっちゃいました。

やばい、びっくりした。

で、矢野さんが何を伝えたかったかというと、プレゼン開始の30秒で興味・関心を引き出すということなんですね。

というのも、VBAやGASを社内で広めようとしたとき、相手が興味・関心がない状態で一生懸命に話はじめてしまうと、警戒心を増しちゃうと…

そのために、聞き手の想定を裏切って驚きを与えたり、聴衆が知っていることと結びつけてあげたりすることで、まずは興味・関心を引き出せ!と。

ノンプロ研は、ある程度興味・関心が揃っているので、このあたりは恵まれている環境ですね。

アウェイで話すときは気をつけなきゃですね…!

上位者の理解を得ておこう

上位者の理解を得る…これは、私がサラリーマン時代では全然まったくちっともできていなかったのですが、大事ですよね。

普通に考えたら、上司は「自分が知らない」ことが行われていることを強く警戒するのは当たり前。

面倒でも「メリットがある」ことを含めてきちんと話を通しておきます。

そうすれば、勉強会の開催だけでなく、就業時間内での利用、教材の提供などの協力も得られるようになるわけです。

そういえば、ノンプロ研の会費も経費で落としてもらっている変わりに、社内勉強会を開催する、という作戦で参加されている方も何人かいらっしゃいましたね。

全員ハッピーで、うまいな~と思います。

まとめ

以上、「ノンプログラマーのための勉強会開催&プレゼン術」についてのレポートをお送りしました!

お二人とも、会社員としてうまく社内で広めていて、実際に評価も上げていらっしゃていて素晴らしいと思います。

私自身、サラリーマン時代にうまく会社で活躍できた体験がないので、お話いただけてとてもありがたかったです。

今後の定例会イベントもぜひ楽しみにしていただければと思います。

「ノンプログラマーのためのスキルアップ研究会」について

コミュニティ「ノンプログラマーのためのスキルアップ研究会」では、毎月の定例会や勉強会、Slackでのやり取りを通して、皆さんのプログラミング学習の質やモチベーションを高めるための活動をしています。 過去の活動については、以下のページをご覧ください。
コミュニティ「ノンプログラマーのためのスキルアップ研究会」の活動レポートまとめ
コミュニティ「ノンプログラマーのためのスキルアップ研究会」(略して「ノンプロ研」)。このページはその活動レポートまとめページです。コミュニティ活動の一気読みをされたい方、ぜひご活用くださいませ。
ぜひ、皆様のご参加をお待ちしております!
コミュニティ「ノンプログラマーのためのスキルアップ研究会」についてのお知らせ #ノンプロ研
ノンプログラマーがVBA・GAS・Pythonなどのプログラミングを学ぶコミュニティ「ノンプログラマーのためのスキルアップ研究会」が絶賛活動中です!本ページはコミュニティの情報発信をしていく特集ページです。

ファミプロを通して大人が学ぶ機会をもっと作らなきゃと思った話

$
0
0

ファミプロ

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

「ノンプログラマーのためのスキルアップ研究会」は、ノンプログラマーがプログラミングをはじめとするITスキルを学び合うコミュニティです。

先日、10月度の家族向けイベント「ファミプロ」が開催されましたので、そのレポートをお送りします。

ちなみに当日の様子は以下、Togetterのツイートまとめもご覧くださいませ。

ノンプロ研 ファミリー向けプログラミング研究会 Vol.5 親子もくもく会
ノンプログラマーのためのスキルアップ研究会、通称「ノンプロ研」。家族でプログラミングを学ぶイベント「ファミプロ」を開催しています。今回は19年10月の親子もくもく会の様子をまとめました。

諸事情により、私のひとり語り的なツイート群になっております。

ということで、ファミプロを通して大人が学ぶ機会をもっと作らなきゃと思った話です。

さ、では、行ってみましょう!

ファミプロをなぜ始めたのか?

そもそも「ノンプロ研」は、働く大人がプログラミングを学ぶコミュニティですが、今年の5月から、家族で参加できるイベントを開催していまして、それが「ファミプロ」です。

小学生でのプログラミング教育が必修化となったこともあり、世の中では子どもたちにプログラミングを学ばせる場、教材などがブームになりつつあります。

それ以外にも、進学塾はもちろん、プログラミング、英語など、日本の大人はとても教育熱心です。

それ自体はいいことだと思うのです。

が、大人側にすごく課題があると感じてます。

先日の発表されたパーソル総合研究所による「APACの就業実態・成長意識調査」で、衝撃的なレポートがありました。

勤務先以外での学習や自己啓発について、日本は「特に何も行っていない」が46.3%で、14の国・地域で最も高い。2位のニュージーランドと比べて24.2ポイントも差があり、断トツで自己研鑽していない。

パーソル総合研究所、日本の「はたらく意識」の特徴を国際比較調査で明らかに国際競争力低下の懸念。日本で働く人の46.3%が社外で自己研鑽せず - パーソル総合研究所
パーソル総合研究所、日本の「はたらく意識」の特徴を国際比較調査で明らかに 国際競争力低下の懸念。日本で働く人の46.3%が社外で自己研鑽せず 日本で働く人で管理職志向があるのは21.4%にとどまり、14の国・地域で最下位ダイバーシティ受容度も最低。日本は女性上司や外国人と働く抵抗感が最も高い 総合人...

肌感では、そんな気がするとは思っていましたが、定量的に出されるとショックですね…。

せっかく子どもたちにプログラミングを学習してもらうなら、大人たちが意欲を持って学習している環境で一緒にやるのがいいのでは?

というのが、ファミプロの発端となっています。

ファミプロもくもく会

今回の内容は「ファミプロもくもく会」

前半は各々が持ち寄った課題を発表後、もくもくとそれに取り組みます。

未就学児はプログラミングおもちゃ、小学生はScratchがメインでした。

大人もGoogleドキュメントやスライドで資料作成をしたり、Pythonをやったり。

おやつタイム(今回はわらび餅と大判焼き)を挟んで、ショートプレゼンと全員発表です。

ショートプレゼンは きのぴぃ からの主に小学生向けで、「好き」と「得意」が増えると大人になると楽しいよ、というお話

好き・得意の掛け算…子どもたちも一生懸命聴いてましたが、大人にも役立つ内容でした。

タカハシが未就学児を担当する作戦

さて、前回までのファミプロで、なんとなく以下のような課題があったように感じていました。

  • 奥さまやパートナーなど女性陣(特に未就学児を子供に持つ)が子守担当になりがち
  • タカハシ、いつもの大人のもくもく会と同じようなことをやりがち

特に、育児中の奥さんたちは、スキルアップしようと思っても、なかなか自由な時間がないと思います。

なので、今回は私タカハシが未就学児を見るので、他の皆さんはそれぞれのやりたいことに打ち込んでもらおうという作戦です。

これで、全体としてイベントの価値が、よりいっそう高まるのではないかと。

ただ、今回は未就学児は3歳と4歳のお二人で、しかもけっこう常連(w)なので、そんなに手がかからないというのもありました。

あと、1人くらいはいける…!

ファミプロに参加しているお父さんたちは猛者ばかりなので、子供はタカハシに預け、その間にいろいろとITスキルを上げるのに良い機会になるかと思います。

初参加、お待ちしていますよ~。

小学生たちはScratchが主戦場に

小学生は3年生と、5年生がScratchにチャレンジしていました。

ふたりともはじめたばかりですが、それなりにゲームとしてかたちになってきていて、ばっちり成長しているなと感じました。

発表もきちんとしていますし、 きのぴぃ のプレゼンにも質問やギャグなど混ぜながら、きっちりついて来ていました。いい体験です。

しかし、Scratchはもう、プログラミング教育ではデファクトスタンダードのポジションを取りつつありますね。

プログラミング学習の導入でScratchが一番使われている理由
~無料で手軽に利用できるScratch(スクラッチ)の特長とメリット~ ユーバー プログラミングスクール 代表 中村里香 小学校でのプログラミング教育必修化が目前に迫りました。目覚

先日、NHKの「Why!?プログラミング」のフェスが開催されていた放送を観たのですが

  • 機械学習による動画認識で手話を通訳する
  • ざるにセンサーをつけてどじょう救いゲームを作る
  • スクランブル交差点の交通シミュレーション

とか、本当に小学生?というようなアイデアが登場していて衝撃を受けました。

ワイワイプログラミング | NHK for School
NHKは、学校放送番組やウェブサイト、アーカイブス、イベントなど、学校向けのさまざまなサービスを展開しています。

Scratchができるのはもう当たり前で、みんな「課題」をちゃんと見つけてきて、それ対してScratchでどう解決するかというストーリーがきちんとありました。

その先、自分なりのカラーをいかに出していくか、もう小学生たちはそういう戦いをしてます。

大人のみなさん、ちゃんと「課題」に向き合ってます?その解決に必要なスキルを身に着けようとしています?自分なりのカラー、ありますか?

ということで、子どもたちはもちろん、大人たちがちゃんと学べる、そういう場にしていきたいという思いをより強く固めた次第です。

次回は「小学生ロボコン」ノンプロ研バージョン

次回のファミプロは11/17(日)ですが、スペシャルイベント『「ユカイな生き物ロボット」で遊ぶ小学生ロボコン ノンプロ研Ver.』です。

前回、ユカイ工学さんにお邪魔した夏休みスペシャルで遊んだ「ユカイな生きものロボットキット」による、小学生ロボコンにチャレンジするという企画です。

小学生ロボコンはこちら。

小学生ロボコン
日本全国のロボコン好きの小学生のみなさん、お待たせしました! ついに君たちのための大会が始まります。アイデアを生かして「ものづくり」に取り組みながら、プログラミングも学べる初めての大会です。

前回のファミプロ夏休みイベントのレポートはこちらです。

ノンプロ研のファミプロで「ロボット作り体験&ロボット操作もくもく会」を開催しました
先日開催されたノンプロ研の家族向けイベント「ファミプロ」は、株式会社ユカイ工学さんの全面協力のもと「ロボット作り体験&ロボット操作もくもく会」を開催することができました。今回はそのレポートをお送りします。

みなさまの参加をぜひお待ちしております~

まとめ

以上、先日のファミプロレポート、ファミプロを通して大人が学ぶ機会をもっと作らなきゃと思った話でした。

いずれにしても、参加している子どもたちはキラキラしてて楽しそうなので、その才能がのびのびできるようにサポートしていきます。

そして、子供連れの大人は来るだけでもヘトヘトになるので、それ以上に価値の高い場にしないとなと気を引き締めて、見守りおじさん頑張ります。

これからのファミプロもどうぞお楽しみにしてくださいませ!

「ノンプログラマーのためのスキルアップ研究会」について

コミュニティ「ノンプログラマーのためのスキルアップ研究会」では、毎月の定例会や勉強会、Slackでのやり取りを通して、皆さんのプログラミング学習の質やモチベーションを高めるための活動をしています。 過去の活動については、以下のページをご覧ください。
コミュニティ「ノンプログラマーのためのスキルアップ研究会」の活動レポートまとめ
コミュニティ「ノンプログラマーのためのスキルアップ研究会」(略して「ノンプロ研」)。このページはその活動レポートまとめページです。コミュニティ活動の一気読みをされたい方、ぜひご活用くださいませ。
ぜひ、皆様のご参加をお待ちしております!
コミュニティ「ノンプログラマーのためのスキルアップ研究会」についてのお知らせ #ノンプロ研
ノンプログラマーがVBA・GAS・Pythonなどのプログラミングを学ぶコミュニティ「ノンプログラマーのためのスキルアップ研究会」が絶賛活動中です!本ページはコミュニティの情報発信をしていく特集ページです。

【エクセルVBA】ユーザーフォームを作ってみよう!VBEでフォームを挿入する方法

$
0
0

ユーザーフォーム,eyecatch

皆様こんにちは、ノグチです。

エクセルでツールを作っていると、入力がし易かったり、特定の項目以外触れないような構成であるといった、専用の画面が欲しくなること、ありませんか?

エクセルにもユーザーフォームという、そんな願いを叶えてくれる機能があります。

「なんだか難しそう…」と思われる方もおられるかもしれませんね。

今回からはこのユーザーフォームを作って、動かしてみるまでを連載形式で順を追ってご紹介していきますので、一緒に作ってみませんか?

初回の本稿では、エクセルでのユーザーフォーム作成の第一歩、ユーザーフォームの挿入と基本的な設定や操作方法をご紹介します。

ユーザーフォームを使うことで得られるメリット

ユーザーフォームは、フォーム上にテキストボックスやチェックボックス、コンボボックスといった項目を用いて、ユーザーにとって使い勝手の良い画面を作ることができます。

各コントロールができることや、VBAでどう操作できるのか?は理解する必要がありますが、使いこなせば、作業効率を大幅にアップさせるような画面を作ることも夢ではありません。

ユーザーフォームを使うことで、例えばこんなイイコトがあります。

ユーザーとって分り易い画面にできる

まず、ユーザーフォームでユーザーにとって分かりやすい画面を作ることができます。

ユーザーが分かりやすい言葉で項目を作ることができ、入力しやすい順序で項目を並べられるのですから、入力作業のストレスはかなり軽減しますよね。

入力作業効率を向上できる

ユーザーフォームは、各項目間のタブ順序(カーソルが当たる順番)を設定したり、項目の値が変更された時や、エンターキーが押された時などのイベントに、VBAで任意の処理をセットすることもできます。

項目AとBが入力されたら、項目Cには自動的にマスタから項目AとBに対応する値を持ってきて表示させる…といったこともできるわけです。

つまり、入力が楽かつ入力作業効率をアップさせられます

「うっかり」を軽減してくれる

ワークシート上でも関数を使えば入力作業は効率化できるでしょう。

しかしワークシートは、関数が入力されているセルを誤って消してしまったり、ワークシートを消してしまったりというリスクがあります。

ユーザーフォームは、フォーム自体を消したりしない限り、ユーザーがフォームにセットされた処理を消すことはできませんので、ワークシートでの入力作業にありがちな「うっかり」を大幅に減らしてくれます

実際にユーザーフォームでの画面を使えば、上記に挙げた以外のメリットも感じられるかもしれませんよ。

ユーザーフォームを作成する

VBEでユーザーフォームを挿入する

ユーザーフォームが何となく良さ気なものであることを知って頂いたところで、早速ユーザーフォームを作っていきましょう。

ユーザーフォームは、VBEで作っていきます。

VBEを開いて、メニューの「挿入」をクリックするか、プロジェクトエクスプローラー上で右クリック>「挿入」をクリックします。

ユーザーフォーム,挿入

表示されるメニューの中から、「ユーザーフォーム」をクリックします。

すると、VBEの画面上に「UserForm1」と書かれた灰色の範囲が出現しますね。

これがユーザーフォームです。

ユーザーフォーム,初期

プロパティでフォームをカスタマイズする

新たに挿入したユーザーフォームを、プロパティシートで更新していきましょう。

ユーザーフォームのプロパティシートは、プロジェクトエクスプローラーに表示されているユーザーフォーム名をクリックするか、VBEの画面上に表示されているユーザーフォームをクリックすることで、表示されますよ。

プロパティシート,表示

フォームに名前を付ける

上で挿入したユーザーフォームには、「UserForm1」のように、自動的に名前が付けられています。

もちろんこのまま使用することができますが、後々VBAで操作するときなどの分り易さを考慮して、判別し易い名前に変えておくとよいでしょう。

ユーザーフォームの名前は、プロパティシートの「(オブジェクト名)」で変更することができますよ。

ユーザーフォーム,オブジェクト名

今回は、「MyForm」に変えておきます。

フォームのタイトルを変更する

次は、ユーザーフォームに表示されているタイトルを変えてみましょう。

タイトルは、プロパティシートの「Caption」で変更します。

ユーザーフォーム,プロパティ,キャプション

今回は、「フォームタイトル123」に変えておくことにします。

プロパティシートの「Caption」の値を変えると、画面上に表示されているユーザーフォームのタイトルも変更されますね。

ユーザーフォーム,キャプション,プロパティ

フォームの背景を変更する

お次は、フォーム全体の背景色を変えてみましょう。

背景色は、プロパティシートの「BackColor」で変更できます。

ユーザーフォーム,背景,プロパティ

値にカラーコードを入力するか、カラーパレットから任意の色を指定することができますよ。

ユーザーフォーム,プロパティ,カラーパレット

 

ユーザーフォームで複数画面を作りたい場合などは、背景色を変えておくと、どの画面なのかを判別しやすくなりますので、オススメです。

フォームのサイズを変更する

ユーザーフォーム全体の大きさも変えておきましょう。

初期値は180×240の大きさになっています。

フォームの大きさを変えるには、画面上のユーザーフォームを囲っている点線上にある、四角をドラッグするか、

ユーザーフォーム,プロパティ,大きさ

プロパティシートのHeight」(高さ)、「Width」(幅)の値を変更します。

プロパティシート,大きさ

ここで設定したサイズがユーザーフォームで作成する画面の大きさになるので、フォーム上に加えたい項目の数や幅などを考慮して大きさを決めましょう

大きすぎても小さすぎても使いにくかったり、画面が見難いということになってしまうかもしれませんからね。

プロパティシートが表示されない!

ユーザーフォームをクリックしてもプロパティシートが表示されない場合は、プロパティウインドウが非表示になっているかもしれません。

VBEのメニューにある「表示」から「プロパティウインドウ」をクリックすれば、プロパティシートが表示されます。

ユーザーフォーム,プロパティウインドウ

最後に

今回は、エクセルのユーザーフォームを作成する第一歩として、ユーザーフォームをVBEに挿入する方法と、基本的なプロパティをご紹介しました

ワークシートでも入力できるような作業であっても、ユーザーフォームなら入力項目のカーソル移動順序などもカスタムできるので、より入力作業が楽になりますよ。

次回は、今回作成したフォームをVBAを使って開いていきますよ。

それでは、最後までお読みいただきありがとうございました!

App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法

$
0
0
table

photo credit: marcoverch Goldbraune Muffins via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

前回の記事はこちらです。

App MakerではじめてのCloud SQLのモデルを作成する方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回はApp MakerではじめてのCloud SQLのモデルを作成する方法を進めていきます。

App MakerでCloud SQLのモデルを作成する方法をお伝えしました。

今回は加えて「ページ」を作成することで、アプリケーションを作り込んでいきたいと思います。

ということで、App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法をお伝えします。

では、行ってみましょう!

前回のおさらい

Cloud SQLをデータベースとしたはじめてのApp Makerアプリケーションとして、従業員データを管理するアプリを作ってみるべく進めています。

前回は、スプレッドシートをもとにCloud SQLによるモデルを作成しまして、以下の「EmployeeData」を作成しました。

App MakerでCloud SQLのモデルを作成した

App Makerアプリは、モデル(いわゆるデータベース)と、アプリの操作やデータの閲覧をするUIとしてのページが必要になります。

今回は、そのページの作り方を見ていきましょう。

ページをリネームする

App Makerのアプリには最低1つ以上のページが必要です。

ですから、新規のApp Makerアプリには「NewPage」というページが既に用意されていますね。

このページをリネームした後、ウィジェットを追加してページを作成していきましょう。

まず、左側のナビゲーションメニューの、「NewPage」の三点リーダーアイコンをクリックすると、メニューが表示されます。

その中から「Rename」を選択します。

App MakerのNewPageについてRenameを選択する

「Rename Page」というダイアログが開くので、「TablePage」というページ名にして「OK」とします。

App Makerでページをリネームする

これで、ページのリネームは完了です。

テーブルを追加する

次に「TablePage」に、テーブルを追加していきます。

ウィジェットとその配置

App Makerでは、さまざまな機能を持つUIパーツがウィジェットとして揃っていて、ドラッグ&ドロップでページ上に配置することができます。

テーブルはその一種で、データの一覧を閲覧したり、並び替えたり、編集したり、削除したりといった機能を提供するウィジェットです。

まず、「Table」ページを開いている状態で、左上の「Widgets」アイコンをクリックします。

すると、Widgetsパレットが開き、各種ウィジェットがズラーッとならんでいます。

そのうちの「Table」がテーブルなので、これをページ上にドラッグ&ドロップして配置をします。

App Makerでテーブルをページに配置する

テーブルの設定

続いて、いくつかのダイアログが表示されてテーブルについての設定をしていきます。

まず、「Choose datasource」ですが、テーブルにどのモデルのデータを表示するか選択します。

ここは前回作成した「EmployeeData」一択なので、それを選択して「NEXT」です。

App Makerでテーブルのデータソースを選択する

次の「Choose table columns」では、モデルのどのフィールドを「列」としてテーブルに表示するかを選択します。

ここでは、デフォルトの全選択のまま「NEXT」としましょう。

App Makerでテーブルに表示するフィールドを選択する

なお、ここでEditableは「Id」以外のフィールドにチェックを入れることが可能ですが、チェックを入れるとテーブル上で編集が可能となります。

続く「More option」は、以下を有効にするかどうかを選択できます。

  • Paginated: ページ送り機能
  • Sortable: 並び替え
  • Deleteable rows: 行の削除

ここでは、すべて選択のまま「FINISH」としましょう。

App Makerのテーブルの各種オプション設定

ここまで進むと、以下のようにページ上にテーブルの配置が完了します。

App Makerで配置したテーブル

モデルの各フィールドが列として表現されていることがなんとなくわかりますね。

作成したページをプレビューする

では、ここまで作成したApp Makerのアプリをプレビューして動作確認してみましょう。

右上の「PREVIEW」というボタンをクリックします。

App MakerアプリをPREVIEWする

アプリのアクセス権を許可する

初回のプレビュー時には、アカウントの選択→許可という手順が二回必要になります。

アカウントを選択して…

アカウントを選択

「外部サービスへの接続」を許可します。

外部サービスへの接続を許可する

もう一回アカウントを選択して…

アカウントを選択

今度は、「Google SQL Serviceインスタンスのデータ管理」を許可します。

Google SQL Serviceインスタンスのデータ管理を許可する

これらのプレビュー時の許可の手順は、アプリに対して初回に行えば、次回以降は不要です。

プレビューを確認する

少し待つと、以下のようにプレビュー画面が表示されます。

App MakerのプレビューでTablePageを確認

配置したテーブル通りの表示にはなっていますが、データがないのでなんとも言えませんね…

まとめ

以上、App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法をお伝えしました。

ウィジェットと、その一種であるテーブルの配置について確認できたと思います。

ただ、まだデータがないのでなんとも言えませんよね…

次回は、データを追加するフォームの追加をしていきます。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法
  3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
  4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
  5. App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
  6. App MakerではじめてのCloud SQLのモデルを作成する方法
  7. App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法

App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法

$
0
0
input

photo credit: shixart1985 Pedalboard in progress via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

前回の記事はこちらです。

App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、App Makerでテーブルをページに配置する方法をお伝えします。

いよいよApp Makerでアプリの作成を進めていまして、データ一覧を表示するテーブルを配置したページを作成しました。

今回は、データ追加用のフォームを配置したページを作っていきますよ。

ということで、App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法です。

では、行ってみましょう!

前回までのおさらい

では、作成しているApp Makerについておさらいをしておきましょう。

まず、モデルですが、以下のようなフィールド構成の「EmployeeData」つまり従業員データをCloud SQLモデルとして作成しました。

App MakerでCloud SQLのモデルを作成した

また、そのモデルのデータを表示するテーブルを作成して、以下のように「TablePage」というページに配置しました。

App Makerで配置したテーブル

ただ、「EmployeeData」にはデータが何も入っていないので、データを追加するためのフォームを作ろう!というのが今回の目標となります。

データ追加用ページを作成する

では、まずデータ追加用のページを作成していきます。

ナビゲーションメニューの「PAGES」の「+」アイコンから、新しいページを作成できますので、クリックします。

App Makerで新しいページを作成する

「Create Page, Page Fragment, or Popup」というダイアログが表示されます。

App Makerのページには種類がありますが、今回は通常のページを作成しますので「Page」を選択して「NEXT」です。

App Makerで新しいPageを作成する

続く「create page」の画面では、ページ名と関連づけるデータソースを設定します。

Page nameは「EditPage」に、データソースrPage datasourceを「EmployeeData」に変更して「CREATE」です。

App Makerで新しいPageを作成する

これで、新たなページ「EditPage」が作られます。

ページにフォームを配置する

では、作成したページにフォームを配置していきます。

「Widgets」アイコンをクリックして、ウィジェットパレットを開きます。

「Form」がフォームを表すウィジェットになりますので、ドラッグしてページに配置します。

App Makerでフォームをページに配置する

「Choose datasource」というダイアログが開きますので、使用するデータソースは「inherited: EmployeeData」のままで「NEXT」とします。

App Makerで追加するフォームのデータソースを選択する

ちなみに「inherited」は「継承された」という意味ですね。ページからその配置された子要素であるフォームに継承されているというニュアンスでしょうか。

次の「Choose form type」ではフォームが「Insert」つまり挿入用か、挿入、閲覧、編集、削除が行える編集用の「Edit」かを選択します。

ここは、「Edit」を選択して「NEXT」としておきましょう。

App Makerで追加するフォームのタイプを選択する

続く「Choose form fields」では表示するフィールド、編集可能なフィールドを選択します。

ここは、デフォルトのまま、つまりすべてのフィールドを表示し、「Id」以外を編集可能として「FINISH」です。

App Makerで表示・編集するフィールドを選択する

これで以下のようにページ「EditPage」にフォームを追加することができました。

App Makerでページに編集用のフォームを追加した

プレビューして動作を確認する

では、プレビューをして配置したフォームの動作確認をしていきましょう。

「PREVIEW」ボタンをクリックしてプレビューを開きます。

App Makerでプレビューをする

プレビュー画面では左上のプルダウンでページを切り替えることができますので、ページを「EditPage」に切り替えて「CREATE」ボタンを押します。

すると、新しいデータを入力できるようになりますので、各フィールドを入力していきます。

App Makerのフォームで新しいデータを入力する

「保存」などしなくてもフィールドからフォーカスを外せば入力内容が自動で保存されていきます。

ページを「TablePage」に切り替えると、入力したデータが反映されていることを確認できます。

App Makerのフォームで入力した内容をテーブルで確認

「EditPage」で各データの編集や削除なども行うことができますので、確認してみてくださいね。

まとめ

以上、App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法をお伝えしました。

テーブルとフォームを配置するだけで、それっぽいアプリが完成しますね。

App Makerすごいっす。

次回は、App Makerがデフォルトでやってくれている便利機能について考察していきます。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法
  3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
  4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
  5. App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
  6. App MakerではじめてのCloud SQLのモデルを作成する方法
  7. App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
  8. App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法

App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解く

$
0
0
default

photo credit: CreditDebitPro default via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

前回の記事はこちらです。

App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法です。

App MakerでCloud SQLをデータベースとした簡単なアプリを作成しました。

これで完成!

というわけなのですが、なぜこんなにドラッグ&ドロップだけでアプリが作れちゃうと思います?

それは、デフォルトでアプリとして機能するように、色々な工夫が仕込まれているからなんですね。

すなわち、「バインディング」と「イベント・アクション」です。

ということで、今回はApp Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解いていきます。

では、行ってみましょう!

前回までのおさらい

前回までで作成したアプリを題材に進めますので、紹介しておきましょう。

作成したアプリは「従業員データ」を追加、編集するアプリです。

モデルはCloud SQLモデルを使用していて、以下のような構成になっています。

App MakerでCloud SQLのモデルを作成した

また、そのモデルのデータをテーブル表示するページ「TablePage」を作成しました。

App Makerで配置したテーブル

データの追加や編集を行うページとして、以下の「EditPage」も用意しました。

App Makerでページに編集用のフォームを追加した

以上が、アプリの全体像になります。

挙動については改善の余地はありますが、データの追加、閲覧(並び替えやページングも可)、編集、削除などの機能が既に使える状態です。

しかし、メニューをポチポチとドラッグ&ドロップだけの作業で、なぜここまでの機能が実装できるのか…?

今回はその点について考えていきましょう。

バインディングとは

まず、ページ「EditPage」を選択して、フォーム上の「Name」のテキストボックスをクリックします。

右側のサイドバーに「Property Editor」と表示されていますが、これは選択している要素についてのさまざまな項目=プロパティを確認したり、設定したりすることができる画面です。

App Makerのバインディング式を確認する

ここで、valueプロパティとlabelプロパティの設定を確認していくのですが、何やらコードが記述されていますね。

これは「バインディング式」とよばれるもので、ウィジェットのプロパティと他のプロパティとを双方向で結びつけるものです。

以下で詳しく見ていきましょう。

valueプロパティのバインディング式

valueプロパティはそのテキストボックスに表示する値を表すものですが、以下のようなコードが入力されています。

@datasource.item.Name

例えば、valueプロパティであれば、コードを構成する各ワードは以下のような意味があります。

  • datasource: ウィジェットのデータソースを参照する
  • item: 現在選択されているアイテム(レコード)を参照する
  • Name: Nameフィールドの値を参照する

ですから「データソースの現在選択されているアイテムの、Nameの値」とバインドされているということになります。

labelプロパティのバインディング式

labelプロパティはそのラベル部に表示する値を表しますが、それぞれ何やらコードのようなものが記載されています。

@models.EmployeeData.fields.Name.displayName

  • models: モデル群を参照する
  • EmployeeData: EmployeeDataモデルを参照する
  • fields: フィールド群を参照する
  • Name: Nameフィールドの値を参照する
  • displayName: 表示名を参照する

つまり「EmployeeモデルのNameフィールドの表示名」を表しています。

フィールドとその表示名は、Cloud SQLモデルを作成するときに設定をしたものでしたね。

このように、App Makerでは基本的なバインディングがあちこちにデフォルトで仕込まれています。

ですから、ただポチポチ作成しただけで、モデルやデータソースと、UIがインタラクティブに連動するのです。

イベントとアクションとは

次にイベントとアクションについて見ていきましょう。

イベントとは「ボタンをクリックした」とか「プルダウンを選択した」とか、そのようなときに発生するものです。

App Makerでは、それらのイベントに応じて、何らかの動作つまりアクションが発生するようにすることができます。

では、その例を見ていきましょう。

CREATEボタンのイベントとアクション

ページ「EditPage」の「CREATE」ボタンを選択します。

Property Editorでそのプロパティを確認できますが、ここでは「onClickプロパティ」に注目します。

onClickプロパティはボタンをクリックしたときの動作を指定するものです。

App MakerのボタンのonClickプロパティ

onClickプロパティをクリックすると、以下のように「Custom action」というダイアログが展開されます。

App MakerのボタンonClickイベントによるCustom actionのコード

抜粋すると以下のとおりです。

// GENERATED CODE: modify at your own risk
widget.datasource.createItem(function() {
  var formName = widget.name.slice(0, -12);
  widget.root.descendants[formName + "Body"].focusFirstWidget();
});

これはちょっとややこしそうですが、簡単にいうと以下のような動作です。

  1. データソースにアイテムを追加する
  2. フォーム上のボディ部分のうち最初のフィールドにフォーカスを当ててね

このような便利なボタンとそのイベントによるアクションが、フォームを配置した時点ですでに搭載されているということです。

ありがたいことですよね。

まとめ

以上、App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解いてまいりました。

デフォルトの機能として、バインディングとイベント&アクションが随所に仕込まれているというのが、ポイントです。

もちろん、オリジナルのバインディング式やスクリプトを仕込むこともできますが、活用できるところは、なるべくデフォルトの機能を活用したいですよね。

次回は、アプリの公開について見ていきたいと思います。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法
  3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
  4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
  5. App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
  6. App MakerではじめてのCloud SQLのモデルを作成する方法
  7. App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
  8. App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法

【エクセルVBA】Showメソッドでユーザーフォームをコマンドボタンから開いてみよう!

$
0
0

ユーザーフォーム,コマンドボタン,アイキャッチ

皆様こんにちは、ノグチです。

前回記事から、ユーザーフォームを作る方法をご紹介しています。

ユーザーフォームは、何となく難しそう、敷居が高そう、と思ってしまうかもしれませんが、順を追っていけば特別難しいことはありません。

今回は、前回作成したユーザーフォームにいくつかコントロールを追加して、ワークシートから開く方法をご紹介します。

ユーザーフォームにコントロールを追加する

前回のユーザーフォームがこちら。

ユーザーフォーム,前回

フォームのタイトルと背景を、「Caption」プロパティと「BackColor」プロパティで変えたのでしたね。

では、このフォームにコントロールを追加してみましょう!

コントロールはを追加するには、VBEでユーザーフォームを表示した時に画面上に現れる、ツールボックスから追加したいコントロールをクリックします。

テキストボックスを追加したい場合は、ツールボックスの中からテキストボックスのアイコンをクリックして…

ツールボックス、テキストボックス

フォーム上でドラッグすると…

テキストボックス追加

この通り、コントロールが追加できます。

同じ要領で、ラベルや、コマンドボタンも追加してみましょう。

出来上がったユーザーフォームがこちら。

ユーザーフォーム,コントロール追加

ツールボックスが表示されていない!

「VBEでユーザーフォームが表示されているのに、ツールボックスが画面上に無い!」という場合でも慌てることなかれ。

メニューの「表示」をクリックして、表示されるメニューの中から「ツールボックス」をクリックすれば、画面上に現れますよ。

ツールボックス表示

Captionプロパティでテキストを変更する

テキストボックスや、コマンドボタンも、ユーザーフォームと同じように、「Caption」プロパティ画面上に表示されるテキストを変更することができます。

例えば、ラベル。

フォーム上に配置した直後は、「Label1」と表示されていますよね。

これを、好きな文字列に変えることができます。

プロパティシートの「Caption」プロパティの値を、変えると…

ラベル,caption

この通り、ラベルのテキストも変わりますね。

同じ要領で、残りのラベルやコマンドボタンも同様に、テキストを変えてみましょう。

こんな感じのフォームができました。

ユーザーフォーム,完成

ワークシートからユーザーフォームを開く

さあ、ここまででユーザーフォームができました。

まだVBAのコードを追加していないのでガワの状態とも言えますが、作ったユーザーフォームをワークシートから開いてみましょう

UserFormオブジェクトを取得する

ユーザーフォームは、UserFormオブジェクトを取得することで操作ができます。

UserFormオブジェクトは、ユーザーフォームのオブジェクト名をコード上で指定することで取得できますよ。

例えば、こちらのユーザーフォームのオブジェクトを取得するなら、こんな風に記述できます。

MyForm.プロパティまたはメソッド

Nameプロパティでオブジェクトを名を取得してみる

試しに、UserFormオブジェクトのNameプロパティを使って、コード内にユーザーフォームのオブジェクト名を記述することで、ユーザーフォームのオブジェクト名が取得できるのか(ユーザーフォームが操作できるのか)を、試してみましょう。
コードはこちらです。

Sub Get_Userform_Name()

    MsgBox MyForm.Name

End Sub

これを実行すると…

Userformオブジェクト,Nameプロパティ

この通り、ユーザーフォームの名前が取得できているので、オブジェクトを取得できているということですね。

Showメソッドでユーザーフォームを開く

では、ユーザーフォームのオブジェクトが取得できたところで、いよいよワークシートからユーザーフォームを呼び出してみましょう。

ユーザーフォームを開くには、UserFormオブジェクトのShowメソッドを使います。

記述方法はとてもシンプル。

UserFormオブジェクト.Show

このメソッドで、上で作成したユーザーフォームを開いてみます。

コードはこちら。

Sub Open_Myform()

  MyForm.Show

End Sub

このコードを実行すると…

ユーザーフォーム,開く

この通り、ユーザーフォームを開くことができました!

ワークシートからユーザーフォームを呼び出す

では、ワークシートからもユーザーフォームを呼び出してみましょう。

ワークシートからユーザーフォームを呼び出すには、例えばこのような方法があります。

  • ワークシート上のコマンドボタンクリックで呼び出す
  • ワークシートイベントで呼び出す
  • ワークブックのイベントで呼び出す

先ほどのShowメソッドを含むプロシージャが実行されればよいので、ユーザーフォームの使い方によって、呼び出し方を選択すればよいでしょう。

今回はワークシート上にコマンドボタンを配置して、ボタンをクリックしたら呼び出す、という方法を試してみましょう。

ワークシートにコマンドボタンを配置して、「マクロの登録」で、Showメソッドを含むプロシージャをセットして…ワークシート,コマンドボタン配置

コマンドボタンをクリックすると…

コマンドボタン,ユーザーフォーム

この通り、ワークシートからユーザーフォームを呼び出すことができました!

ちなみに、コマンドボタンの挿入方法と、マクロの登録方法については、下記記事で紹介されていますので、併せてご覧くださいね。

エクセルVBAのボタン設置で引数を渡してマクロを呼び出す方法
エクセルVBAでプログラムを動かす際にボタンを設置しますよね。今回はボタンに登録したVBAマクロを引数を渡しながら実行する方法についてお伝えします。また、引数の記述方法や省略の仕方についても触れます。

最後に

今回は、ユーザーフォームにコントロールを追加する方法と、ワークシートのコマンドボタンからユーザーフォームを開く方法をご紹介しました。

自分が作ったユーザーフォームが動くと、嬉しくなりますよね。

次回は、今回フォームに追加したコントロールのイベントを使って、ユーザーフォームを動かしていきますよ。

それでは、最後までお読みいただきありがとうございました!

連載目次:【エクセルVBA】ユーザーフォームを使ってみよう!

ユーザーフォームは、ちょっとした画面なら作れてしまう、便利な機能です。

何となく敷居が高いように感じてしまいますが、順を追っていけば難しいことはありませんよ。

  1. 【エクセルVBA】ユーザーフォームを作ってみよう!VBEでフォームを挿入する方法

はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法

$
0
0
deploy

photo credit: wyoguard 190730-Z-QG327-1116 via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

前回の記事はこちら。

App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解く
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回はApp Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解いていきます。

App Makerがドラッグ&ドロップだけでどうしてアプリを作れるのか、その秘密について解説しました。

さて、今回はいよいよアプリを「公開」していきますよ。

はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法です。

では、行ってみましょう!

App Makerアプリを公開する

では、さっそくApp Makerで作成したアプリを公開していきましょう。

ちなみに、公開するアプリは前回までに作ったやつなので、まだの方はぜひシリーズをさらって作成してみてください。

App Maker右上の「PUBLISH」ボタンをクリックすると、「App settings」の「DEPLOYMENTS」タブの画面が開きます。

「DEPLOYMENT」というのは「配備」とか「展開」って意味ですね。

その画面中央の、いかにも押して欲しそうな「PUBLISH NEW DEPLOYMENT」をクリックします。

App Makerの新しいDEPLOYMENTを公開する
「Publish new deployment」という画面が開き、いろいろと設定できそうな雰囲気です。

ここで設定するのは、Deployment nameだけですね。

Enter a name that helps you identify different deployments. For example, “test” or “production”. The deployment name can’t be changed after you create the deployment.

さまざまな展開を識別するのに役立つ名前を入力します。たとえば、「test」または「production」。展開を作成した後、展開名を変更することはできません。

今回はテスト用のアプリなので「Test」として「PUBLISH」します。

App Makerでアプリの新しいDeploymentを公開する

もし本番用であれば「Prod」などとすれば良さそうです。

あと、一応チェックしておきたいのが「Google Cloud SQL Address」の項目ですね。

デフォルトでは

  • Use Default Domain Cloud SQL database

が選択されています。つまり「デフォルトのドメインCloud SQLデータベースを使用する」ということです。

小さい説明書きで以下のようにあります。

Note this will create a new Database for each deployment

これにより、展開ごとに新しいデータベースが作成されます。

つまり、これまでプレビューでいくつかのデータを投入したのですが、それとは別の公開用のデータベースがCloud SQLに作成されるということ、本番公開したら改めてデータを再投入する必要があるということですね。

App Makerアプリ公開の認証をする

次に「Deploying this application requires authorization」というダイアログが開きます。

つまり、このアプリケーションをデプロイするには認証が必要ということですね。

これもプレビューのときにやった作業ですが、公開の際には別途必要になります。

ということで「AUTHORIZE」をクリックして進めます。

App Makerのアプリをデプロイする際の認証

アカウントを選択して…

App Makerの認証のためにアカウントを選択

「Allow」をクリックします。

App Makerのアプリの公開の認証をする

もう一回アカウントを選択して…

App Makerの認証でアカウントを選択

「許可」をクリックします。

App Makerのアプリ公開で許可をクリックする

公開したアプリのURLにアクセスする

これで、公開が完了しました。

「App settings」の「Deployments」タブの画面に戻ると、以下のようにURLが発行されます。

これが「Deployment URL」です。

この公開用のDeployment URLにアクセスすることでアプリを開くことができます。

このURLを利用者に配布してアクセスしていただければOKということですね。

「コピー」アイコンからURLをクリップボードにコピーできます。

App MakerのDeployment URLの発行

Deployment URLにアクセスしてみましょう。

公開したApp Makerアプリ

おや…?

プレビューのときにあった、ページ切り替えのプルダウンがなく、何もできない…

そうなんです。

ページ切り替えのプルダウンはプレビュー専用の機能なので、本番アプリに必要であれば別途搭載する必要があるんですね。

この課題は次回以降で解決していきます。

まとめ

以上、はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法をお伝えしました。

実際には、もう少しアプリを作りこむ必要がありましたね。

次回以降、ヘッダー&ナビゲーションメニューを追加していきたいと思います。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法
  3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
  4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
  5. App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
  6. App MakerではじめてのCloud SQLのモデルを作成する方法
  7. App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
  8. App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法
  9. App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解く
  10. はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法

App Makerで使い回しパーツを作るPage Fragmentを作成するはじめの一歩

$
0
0
flagment

photo credit: michael kogan Lucca via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方についてシリーズでお伝えしています。

前回の記事はこちらです。

はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法
ノンプログラマー向けにCloud SQLのはじめかた&App Makerアプリの作り方についてシリーズでお伝えしています。今回は、Cloud SQLをデータベースとしたApp Makerアプリを公開していきます。

App Makerアプリの公開の方法についてお伝えしました。

ただ…ページの切り替えができないという問題があったんですね。

ということで、何回の記事にわたって、App Makerアプリのヘッダーにナビゲーションメニューを追加していきたいと思います。

今回は、App Makerで使い回しパーツを作るPage Fragmentを作成するはじめの一歩です。

では、行ってみましょう!

ページが切り替えできない問題を解決する

さて、前回までで作成してきたApp Makerアプリですが、簡単に概要をお伝えしましょう。

アプリとしては「従業員データ」を扱うアプリです。

2つのページから構成されていて、まず以下のデータ一覧を表示するテーブルを配置した「TablePage」があります。

App Makerで配置したテーブル

別のページとして、データの追加や編集を行う「EditPage」があります。

App Makerでページに編集用のフォームを追加した

App Makerでポチポチページを作り、そこにウィジェットをドラッグ&ドロップするだけで、これらの機能は実現できちゃいます。

ただし、一つ問題があって、公開をすると以下のようになります。

公開したApp Makerアプリ

わかります??

つまり、他方のページに遷移できないんですね。

他方のページに遷移する導線を作る

これを解決する方法の一つとして、それぞれのページにボタンを配置する方法が考えられます。

  1. 各ページにボタンを追加
  2. ボタンのonClickプロパティに他方のページに遷移するように設定

ただ、もしアプリにページを増やした場合はどうですかね…?

3つになるとちょっとややこしいですね。

ということで、今回はヘッダーを用意してナビゲーションメニューを追加する方法を採用していきます。

Page Fragmentとは

App Makerで作成できるページには3つの種類があります。

  • Page: いわゆる通常のページ
  • Page Fragment: ページに埋め込める再利用可能なUI
  • Popup: ダイアログやメニューを作る

この「Page Fragment」を使うと、例えば「ヘッダー」や「フッター」など多くのページで再利用して共通に使用するページの一部分を作ることができます。

flagmentとは「断片」などという意味がありますね。

これで作成したヘッダーに各々のページに遷移可能なナビゲーションメニューを仕込んでおけば、共通のパーツを使いまわしできるというわけですね。

便利そうですよ…!

Page Fragmentページを作成する

では、Page Fragmentページを作成していきましょう。

ページを追加する

まずページの追加です。

Page Fragmentは「ページ」ですから、PAGESの「+」アイコンのクリックから作成していきます。

App Makerで新たなページを追加する

ダイアログ「Create Page, Page Fragment, or Popup」では、「Page Fragment」を選択して「CREATE」ですね。

App MakerでPage Fragmentを作成する

ページをリネームする

ページの名前がデフォルトでは「PageFragment」となっていますので、ページのリネームをしていきましょう。

「PageFragment」の三点リーダーアイコンをクリックして、「Rename」を選択します。

App Makerでページの名前を変更する

「Rename Page」ダイアログが開きますので、ここはわかりやすくページ名を「Header」と入力して「OK」です。

App Makerでページ名を「Header」とする

ヘッダーのウィジェット配置と設定

続いて、作成したPage Fragmentをヘッダーとして機能するようにウィジェットの配置と設定をしていきましょう。

ボタンを配置する

まず、ナビゲーションメニューを開くためのボタンを配置していきます。

「Widgets」アイコンをクリックして開き、「Button」ウィジェットをHeaderのパネル上にドラッグします。

App MakerでButtonウィジェットをドラッグして配置

バリアントを設定してスタイルを変更する

「Widgets」アイコンの隣に「Regular」と表示されているプルダウンメニューがありますよね?

これは「バリアント」メニューといい、現在選択されているウィジェットのスタイルを設定できる便利なメニューです。

App Makerのバリアントメニュー

配置したボタンを選択した状態で「バリアント」メニューを開いて「IconDark」に設定しましょう。

App Makerのバリアントメニューでスタイルを変更する

文字表示が消えちゃいますが、ダイジョブです。

表示テキストを変更する

続いて、ボタン表示に魔法をかけますよ。

ボタンについて、Property Editorのtextプロパティを「menu」に変更しましょう。

App MakerでButtonのtextプロパティをmenuに変更する

本来、textプロパティはボタンの表示テキストを表すプロパティなのですが、サイズが小さくなった感じですね。

パネルのプロパティを変更する

先ほどの魔法が何だったのかを明かしていきましょう。

Headerのパネル「Panel」について、右下のハンドルをつかんでドラッグするとサイズを変更することができます。

サイズを横長にして、バリアントを「Primary」に設定しましょう!

App Makerでパネルのサイズとバリアントを変更する

ほら!

ボタンの表示がハンバーガーアイコンになっていますね。

Buttonウィジェットのバリアントを「IconDark」にして、そのtextプロパティを「menu」にすると、白抜きのハンバーガーアイコンになるのです。

かっこいいっすよね!

まとめ

以上、App Makerで使い回しパーツを作るPage Fragmentを作成するはじめの一歩についてお伝えしました。

Page Fragmentとは何か、またButtonウィジェットの便利なバリアントの設定方法について解説しました。

次回は、作成したヘッダーを各ページに配置していきますよ。

どうぞお楽しみに!

連載目次:Cloud SQL&App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた&それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。
  1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
  2. Google Cloud Platform(GCP)に無料トライアル登録をする方法
  3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
  4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
  5. App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
  6. App MakerではじめてのCloud SQLのモデルを作成する方法
  7. App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
  8. App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法
  9. App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解く
  10. はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法
Viewing all 2076 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>