Google Maps JavaScript APIでプラスαなコーディングするのに役立ちそうなサンプルコード集まとめたよ

f:id:fwww:20180326231743p:plain

どうもふうや(@fwww0707)です！

最近は仕事柄、Google Maps JavaScript APIで色々とコーディングしてました。

そしてGoogle Maps JavaScript APIは意外と用意されているオプションも多彩で思うようなコーディングが出来満足できました！

そこで役に立ったオプション設定や外部ライブラリを含めサンプルコードを備忘録代わりに残しておきます！

Google Maps JavaScript APIを利用した時に役に立った外部ライブラリとサンプルコードをまとめるよ

マップのタイプを変更することの出来るコントロールボタンを非表示にする

f:id:fwww:20180326214802p:plain

マップの左上に表示されるこのコントロールボタン。

非表示にするには、new google.maps.Mapクラスを生成するときのオプションに、mapTypeControl:falseとすれば動きます。

gist60632f319d2e88722ece4f7b1f6be8ae

 

コントロールキー（コマンドキー）を押しながらや日本指でないと地図を操作できない設定を解除する

Google Maps JavaScript APIのバージョンが上がった際に地図の操作性を良くするためにデフォルトで追加された設定ですが、これもnew google.maps.Mapクラスを生成する際のオプションで解除可能です。

gistda5912344e6491d2f9f3aef094a41057

 

住所から経度緯度を求める

通常地図にマーカを立てる際に必要な情報として軽度と緯度の値が必要ですが、これをnew google.maps.Geocoderクラスで求めることが出来ます。

gistcd86112fb3c32bf09b43adb6848b3d1a

実際の住所はaddressの箇所に入力します。

経度緯度情報はresults[0].geometry.locationに入っています。

この経度緯度情報でマーカを立てるなり、センターの位置を決めるなり色々カキカキしてみてください！

 

infowindowを拡張する外部ライブラリの利用

Google Maps JavaScript APIにはマップ上でマーカーを立てた場所でのイベント発火時にその場所の詳細を表示させることが出来るinfowindowがデフォルトでサポートされています。

そのinfowindowを拡張する外部ライブラリを利用することで、DOM管理ができるという優れものです。

github.com

 

まずinfoboxライブラリの呼び出しはこちらから↓

gist3582d32e3faf7213cbd85a7ba0766048

 

infoboxを生成する際の最低限のオプションと生成まで。

gist04fb0947144e9aec3826d1510793e195

 

詳しいオプションに関しては公式リファレンスを参考にして下さい！

InfoBox公式リファレンス

 

infoboxを操作するために最低限必要なメソッドを紹介します。

本当に最低限です笑

ごめんなさい！笑

gistc5c6da68605f389e88694bd4530afd0f

 

Google Maps JavaScript APIでよく利用するイベント発火の方法一覧

 マウスホバー時やマウスホバー解除時のイベント発火方法などなどサンプル程度に使って下さい笑

gistd67bb4d92a598f1a96f156611760483b

 

 マーカークリック時には先ほど紹介したinfoboxを表示させてもいいですね。

ホバー時、ホバー解除時にinfoboxを開閉するのも出来ますよ！

まとめ

Google Maps JavaScript APIは仕事柄で利用したためサンプルコード程度になりましたが、応用すればマップ外のDOM要素をクリック時、ホバー時にマップ内にイベントを発火させたりなどなど、考え方次第でページの表現性は無限大です！

 ありがとうございました！

【第一回】Wordpressでプラグイン開発をする時に知っておくべきことを備忘録\(o ･_･)＝＝○

どうもふうや(@fwww0707)です！

今日はおぎ君(@atk420t)とヒラサワさん(@kaishi_hirasawa)が運営してる学生ブログ部(@GakuseiBlogger_)に参加しました！

招待してくださったおぎ君！

ありがとうございます！

そしてそして！

アドベントカレンダーに沿って今日は記事を書かせて頂きます！

内容はWordpressでプラグインを開発する上でのコアな内容ですが、万人には需要が無いと思います笑

よろしくおねがいしまっす！

Wordpressでプラグイン開発をしよう！！

Wordpressにプラグインを認識させるための必要最低限なこと

gist9cb6feac6ccb65672d6715fdb1c0996d

こちらはWordpressにプラグインを認識させるために必要最低限なコードです。

上記例は僕が販売しているWP Rankinger Proのコードです。

Plugin Nameにはプラグインの名前を、

Descriptionにはプラグインの説明を記述します。

Versionにはバージョンを記述しますが1.0.0以下でも構いません。

Authorは開発者の名前を記述し、Author URIに開発者のサイトを記述します。

Licenseは特別な理由がない場合は"GPL2"とし、その下に上記例のようなコメントを記述する必要があります。

Copyrightの箇所には西暦、Authorの順に記述し、emailには連絡先のメールアドレスを記述します。

この状態でもプラグインをインストールすることが可能ですが、無のプラグインです笑笑

Wordpressの管理画面にメニューを追加する

gist5dc178e64c0aee94d7bd7b54721fbc47

Wordpressの管理画面にメニューを追加する場合は上記のように関数を作成し、admin_menuにフックさせる必要があります。

もちろん関数名は独自の名前に設定してくださいね！

 

下記からはプラグイン独自のメニューを作成する場合の解説をしますね！

 

add_menu_page(①,②,③,④,⑤,⑥,⑦)

①プラグインのメインページでのタイトルタグに充てられる文字列になります

②Wordpress上のメニューで表示される文字列です

③アクセス可能なユーザー権限

④Wordpressに認識させるメニューの名前（スラッグ）です。すでにスラッグが使われているとエラーを吐きます。

⑤そのメニューを操作する関数名です

⑥メニューに表示させるアイコンです。画像も可能ですが割愛させていただきます。

メニューに利用可能なアイコンリストはこちらです。

⑦僕のプラグインでは設定していませんがメニュー一覧の任意の位置に表示させることが可能です。

f:id:fwww:20171222204631p:plain

例えば3を指定すれば、ダッシュボードと投稿の間に表示されます。

同じ数値ですと片方が上書きされるので、そのような場合には小数値で衝突の回避をすることが一般的です。

 

add_submenu_page(①,②,③,④,⑤,⑥)

①親のメニュースラッグ名

②そのサブメニューのタイトルタグ

③Wordpress上のサブメニューに表示させる名前です

④アクセス可能なユーザー権限

⑤Wordpressに認識させるサブメニューのスラッグ名

⑥サブメニューを操作する関数名

 

各メニューページを作ろう

gist41b3876b9541686f336bc6603a77bd15

上記"add_menu_page"や"add_submenu_page"で設定した関数名を指定してphpファイルをインクルードさせます。

自分はいちいち"plugin_dir_path(__ FILE__)"を記載するのが面倒なのでdefineでプラグインディレクトリを定義しています。

このインクルードするphpファイルにフロントエンドなりバックエンドなり書くことでチェックボックスやテキストエリアの状態を保存したり出来ます。

基本関数はメインファイルで定義します。

まとめ

次回の記事ではメニューページで各inputタイプの内容を保存する方法を解説します！

ありがとうございました！

 

fwww.hateblo.jp

 

ポケモン図鑑ジェネレーターを2日かけて作ったよ！！

どうもふうや(@fwww0707)です。

昨日こんなことをつぶやいて、、、、

 

サービスの開発に１日以上かかってしまいました。

宣言通りジェネレーター作りましたよジェネレーターを！！

fwww-lab.com

ポケモン図鑑ジェネレーターで初代ポケモン図鑑が自作できる

サンプル

ポケモン図鑑ジェネレーターで作ったサンプルがこちら↓

f:id:fwww:20171212152448p:plain

使い方

お手本がこちらのピカチュウのポケモン図鑑なのですが、

f:id:fwww:20171212152713p:plain

それに従って下記画像にある通りフォームに必要事項を入力していくだけです。

f:id:fwww:20171212152815p:plain

また上記画像に書いてあるとおり漢字や特殊文字には対応していませんのでご注意下さい。

ひらがなとカタカナ、英語の大文字、小文字が使用できます。

また画像は特殊な形式で読み込むためサーバーには一切アップロードされません。

もちろん作成したポケモン図鑑画像もです。

各種フォームの注意事項ですが、

Numberは3文字まで、右側は10文字まで、下側の説明は18文字までそれぞれ入力できます。

それ以上入力しても反映されないのでご注意下さい。

画像は初代ポケモン図鑑に少しでも近づけるために画質を悪く仕上げるように施しています笑

完成イメージを確認する

左カラム（スマホの場合はフォーム上）で随時ポケモン図鑑の完成イメージを確認することが出来ます。

作成したオリジナルなポケモン図鑑を保存する方法

フォームの右下にあるダウンロードボタンを押下することでダウンロードできます。

またスマホでは新規タブで作成した画像が開くと思いますので長押しで保存して下さい。

使い方まとめ

需要がありそうで無いようなポケモンずかんジェネレーターですが、皆様のご要望にその都度出来る限り答えてこれから少しずつ機能を追加していこうと思います。

開発秘話

ポケモン図鑑のDOM要素作るの大変だった笑

元々は型となる画像に字や画像を重ねる仕様で良かったのですが、それでは完成イメージをユーザーが確認できないので、DOM要素仕立てで施しました。

html2canvasにCSSのfilterが効かない

html2canvasはDOM要素をcanvas仕立てに出力するjQueryのライブラリですが、どうもCSSのfilterが効かず2、3時間苦戦しました。

どうしても出力画像をグレースケールにしたかったため、最終的にはhtml2canvasをローカル管理して少しばかり改造しました笑

File APIがものすごく便利だった

基本画像はアップロードするものですが、ローカルからの画像をBASE64形式でサーバーにアップロードせずとも読み込むことが出来たのは感動しました。

一番心配だったのがアップロードされた画像の管理(Cronで定期的に削除する予定だった笑)だったのでものすごく今回の開発に助かりました！

やっぱりサービス開発はBootstrapベースだなあ

今回は標準のBootstrapとマテリアル化するbootstrap-material-designライブラリを使っています。

特に後者！

Bootstrapを一発でマテリアル化してくれるのでホント便利です。

MAMP上で開発していたのにPHPを使わなかった

PHPを使うだろうと想定してMAMP上で開発していたのですが、html、css、javascript（jQuery）だけで済みました。

正直サーバーサイド触りたかったなと、、、笑

まとめ

１日で作ると宣言したものの２日かかってしまいました笑

しかし、こんな猛スピードでサービス開発を成し遂げたのはこれが初めてだったのでとても勉強になりました！

これからもこのような形で何か思いついたらサービス開発してみようと思います！

ありがとうございました！！

fwww-lab.com

Wordpress上でajax経由で関数をactionさせる時はadmin-ajax使うといいよ！

どうもふうや(@fwww0707)です！

昨日こんな記事を書きました！

 

fwww.hateblo.jp

 自分用に備忘録したためかなり乱雑な記事になっていますが、その記事の末尾にちょろっとお話したWordpressのadmin-ajaxについて今日は言及、コードの解説、使い方についてお話しようと思います。

f:id:fwww:20171124140956p:plain

※間違った表記、理解がありましたらご指摘して頂けると幸いです

※はてなブログの仕様なのか配列の括弧が正常に表示されていない箇所がありますが文章に表記していますのでご理解ください

Wordpressのadmin-ajaxとは何か？通常のajaxとは何が違うのか

通常のajaxについての説明は割愛させていただいて、Wordpressには独自のajaxシステムが存在します。

そのファイルは

/wp-admin/admin-ajax.php

に存在します。

github.com

このファイルのソースコードを読めば分かる通りadmin-ajax.phpにリクエストを投げれば、Wordpressに登録されている任意の関数をactionさせることが出来ます。

javascript及びjQueryなどで扱う通常のajaxはPHPファイルにリクエストを投げて処理結果を保存したり受け取ったりと出来る訳ですが、Wordpress標準装備のadmin-ajaxはそれ以上に利便性が高くて便利です！

予めWordpressに登録させている関数をactionできる

通常のajaxだと別途phpファイルを用意しなければなりません。

ajaxさせるために個別のphpファイルを毎回用意するのは別に面倒ではありませんが、ajax専用のphpファイルを多数管理していると話は別です。

ファイル数が多くなると管理も面倒になってしまいます。

なのでadmin-ajaxはWordpressを利用しているユーザーにとって必見な訳です。

前述したとおりadmin-ajaxは予めWordpressに登録されている関数をactionするシステムですので、functions.phpやプラグインファイルに記述されていても（どこからでも）呼び出せる訳です。

要するにajax専用のphpファイルを用意する必要が無くなり、一つのファイル（関数単位）で処理を管理することが出来るようになります。

admin-ajaxはどんな時に利用するのか

admin-ajaxは、FormをsubmitさせてPOSTをしupdate_option()などでWordpressのDB（データベース）へデータを格納する処理の場合や、ajaxを利用しリアルタイムでデータベースへアクセスしその結果に応じた表示をさせたい場合などに利用することが多いです。

admin-ajax経由でデーターベースにデータを保存する利便性

admin-ajax（通常のajaxでも同様）はDOM要素としてformタグなどを用意する必要がありません。

よって、ページ内に散らばっている任意の要素や文字列を自由にデータとして扱うことができるようになります。

またsubmitボタンをクリックさせてデータを投げる必要がありませんので、ページをリロードさせたくない場合でもその利便性を発揮します。

実際にWordpressのadmin-ajaxを利用してみよう

リクエスト送信先は決まって"admin-ajax.php"です。

個人で利用する場合は直接リクエスト先のurlを記述すれば問題ありませんが、プラグインやテーマとして配布する場合はホスト名が同じではありませんので、phpファイル上にインラインで次のように"admin-ajax.php"へのurlを定義することを推奨します。

gist67aced28afe3fff5064ad7f885b65e5d

 ここからはサンプルコードを提示します。

使用用途に応じてコードを編集しご利用ください。

任意のテキストをadmin-ajax経由でリクエストしたい

配列ではなく任意のテキストをadmin-ajaxにリクエストしたい場合は、次のようにカキカキします。

gist83c8e793ce480ea95ffcc2716d5d3fbb

 dataTypeはtextでtype（メソッド）は指定しません。

urlは先程定義したadmin_ajax_urlで、actionにはWordpressに登録させている関数名を記述します。

text_testというのはphp側で受け取ったときの変数名で、textはjavascript上で定義されている変数（配列ではない）のことを指します。

secureに記述されている

<?php echo wp_create_nonce('text_test_ajax ') ?>

については後で解説します。

これはCSRF対策でセキュリティ上定義することを推奨するものです。

テキストではなく配列をadmin-ajax経由でリクエストしたい

テキストではなく配列をadmin-ajaxにリクエストする場合は、次のように利用します。

gistf02cb1ef40404c8298f8b7f87ff5147d

urlは先程と同じくこの記事で既に定義したadmin_ajax_urlを指定しています。

action、secureについてはテキストをadmin-ajax経由でリクエストを送信する時と仕様は変わりありませんので割愛させていただきます（詳しくはテキストをadmin-ajax経由でリクエストする際の解説をお読みください）

配列をajax経由でphpファイルにリクエストを投げる場合と同じく、phpで認識させる変数には配列の括弧を付与する必要があります。

javascript側のarrayは配列で定義された変数です。

admin-ajax経由で関数をactionする方法はこれ！

プラグインファイル内でもテーマ内のfunctions.phpでも良いので次の関数を定義します。

giste66b0e423832b73ba9930c326fe62dd3

上記の例ではテキストをadmin-ajax経由でリクエストされ、関数がactionされた場合のコードです。

check_ajax_referer('text_test_ajax','secure');

というのはadmin-ajaxにリクエストを送信する場合に定義した

<?php echo wp_create_nonce('text_test_ajax ') ?>

でCSRF対策（セキュリティ対策）でリクエストのチェックを行っています。

※CSRF対策の解説は割愛させていただきます

check_ajax_refererの第一引数はwp_create_nonceで定義したチェック用の文字列を、

第二引数にはチェックする際の認識文字列を定義します。

第二引数がsecureで無い場合はadmin-ajaxでリクエストを送る際のdata配列のsecureの箇所を任意の文字列にします。

admin-ajaxでリクエストを送る際にtype（メソッド）を指定しなかった理由はPHP側でメソッドをREQUESTとしてデータを受け取るためです。

少なくとも僕の環境ではjavascript側でtypeをPOSTやGETに指定しても、PHPへのデータの受け渡しが正常に行なえませんでした。（もちろんPHP側で$_POSTや$_GETで受け取ろうとしてでもです）

上記のコードの場合

$_REQUEST['text_test']

にjavascriptから受け取ったデータが格納されていますので、

$text = $_REQUEST['text_test'];

などとし柔軟にデータを扱いましょう。

admin-ajax経由で受け取ったデータが配列の場合は次のように扱います。

$array= $_REQUEST['array_test'];（$arrayの後に配列の括弧が必要です）

PHP側でも配列として定義する必要がありますので注意が必要です。（既に解説した「配列をadmin-ajax経由でデータを受け渡しする」でリクエストをする際に定義したarray_testの例です）

PHP側で受け取る際は、

array_testとする必要がありませんのでこちらも注意が必要です。（配列の括弧は必要ないということ）

アクションフックには

wp_ajax_関数名

及び

wp_ajax_nopriv_関数名

を登録します。

wp_ajax_はログインユーザーが関数をactionさせる場合に利用し、wp_ajax_nopriv_は非ログインユーザーが関数をactionさせる場合に利用します。

github.com

詳しくはadmin-ajax.phpの83行から113行目に記述されています。

関数名というのはこの処理を施している関数を指します。

上記の例の場合だと関数名が"text_ajax_test"ですのでアクションフックには、

wp_ajax_text_ajax_test

と

wp_ajax_nopriv_text_ajax_test

を登録しています。

このように指定しないといけないのは、Wordpressのadmin-ajaxの仕様ですので注意してください。

github.com

詳しくはadmin-ajax.phpの74行目から79行目に書いてあります。

 

まとめ

長々とWordpress独自のadmin-ajaxについてのコード解説や言及を行ってしまいましたが、これほどまでに丁寧に解説されているサイトはあまり無いと思います笑笑

←自画自賛してしまいすみません！

Wordpressのadmin-ajaxを利用したかったけれど挫折してしまった方や今後プラグイン開発やテーマ開発などで導入して利用されたい方は是非この記事を参考にしてください。

最後まで読んでいただきありがとうございました！！

普段ウェブのお仕事してる身として備忘録しておきたいことまとめてみた！

WEBツール その他

f:id:fwww:20171123233301j:plain

どうもふうや(@fwww0707)です！

最近記事書くのをサボってました、、、

今日も前回と同じように記事ネタがたくさん思いついたのでボリューミーな記事になりますが、ウェブにご興味ある方に読んで頂けると幸いです。

途中途中変な解釈や理解、知識があるかもしれないですが温かく見守ってください！

ウェブに関する話題を8つ用意しました！

便利なツールから関数、初心者が良くするミス、CSSやjavascriptをカキカキする上で知って頂きたいことなどをまとめ、需要がありそうな順につづっています！

どうぞよろしくお願いいたします！

※自分用の備忘録ですので乱雑な記事ですが予めご了承ください

カラーコードの選定に迷うならコレ使ってみよう！！

2年ほど前までは自分自身CSSでカラーコードを選定する時はカラーピッカーをグリグリして、良さそうな色を選んでいました笑

がしかし！

便利なサイトを見つけてからはここでカラーコード選定しています♪

https://www.materialui.co/colors

このサイトにはマテリアルカラーが並んでいて、ブロックをクリックすると＃なしのカラーコードをコピーできます！

f:id:fwww:20171123222238p:plain

 

色彩感覚の無い自分でしたがこのサイトでカラーコードの選定をするようになってからは、前よりもマシなデザインがカキカキできるようになりました笑

 

Above the foldのお話

普段皆さんはCSSやjavascriptを書く際何か意識していることはありますか？

ここではそんな時に意識してほしいAbove the foldについてお話します。

Above the foldというのは、ファーストビューを出来るだけ早くユーザーに見せましょうというような意識または試みのことを指します。

いわゆるPageSpeed Insightsで指摘される

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」

のことです。

要するにCSSはデザインを司るものでjavascriptはDOM操作を行うスクリプトだからユーザビリティの向上を図る（レスポンスを早くする）ために、CSSはjavascriptより上に書きましょうということです。

もちろんGoogle先生が指摘しているのはファーストビューに必要なCSS、javascriptのことです。

ですが意識的にCSSを上に書くことでページの体感速度が向上し、離脱率も減少することに繋がりますので是非お試しください！

jQueryでヘッダーに設置したスクリプトが動かない時

2年ほど前にこの事象を経験してから、jQueryを書く際に意識するようになったことがあります。

それはどんな場面でも"$(function(){"と"});"で囲むようになったことです。

上記コードで囲まないと、ヘッダーにスクリプトを設置している場合DOMが読み込まれていないタイミングでスクリプトが実行されてしまいます。

よって何も実行されないわけです。

このコードはDOM要素が全て読み込まれた段階で実行されるのでヘッダーに設置していてもフッターに設置していても実行タイミングは変わりありません。

コードを圧縮したり元に戻したりするのに便利なサイト

巷で配布されているCSSファイルやjavascriptファイルの中にはminファイル（圧縮バージョン）が存在しない場合がよくあります。

どうしてもファイルを手動で圧縮させて読み込み速度の向上に繋げたい場合は下記のサイトを利用すると良いでしょう。

https://www.cleancss.com/

Minifyというのは縮小という意味で、Formatterというのは縮小されたファイルを元に戻すという意味です。

CSSやjavascript以外にもHTMLやPHP、XML、JSONファイルなども同様（一部）に操作可能です。

CDNのお話

CDNとはContent Delivery Networkの略称で、外部リソースを予め設置されたサーバーから高速に読み込ませることが出来ます。

例えば、bootstrapのファイルやfontawesome、jQueryファイルなどは有名所でありますから、CDNが存在します。

ですので、いちいちFTPで内部リソースとして扱わなくても、CDNから読み込んでしまえばその手間が省けるというお話です。

有志の方が配布されているファイル群なども「ファイル名 CDN」で検索すれば出てくることが多いです。

いつもjQueryプラグインなどをFTPで内部リソースとして扱っていた方！

この機会にCDNデビューしてみませんか？？

CSSで高さを％指定できないってときはコレ！

CSSで高さを％指定したい時よくありますよね！

殆どの場合、inline要素（画像）などに効くようですがblock要素でも高さを％指定したいって方に是非是非使っていただきたい関数をご用意しました！

 自分が過去にツイートした内容の引用になりますが、このheight_percent関数を利用すれば例えブロック要素でも高さを%指定できます。

第一引数

・親要素のセレクタ

第二引数

・子要素のセレクタ

第三引数

・%指定（1は100%）

のようにご利用ください！！

Wordpressの外観→カスタマイズ→CSSの編集って扱いにくいよね

前々から思っていたのですが、自分はCSSを追記する殆どの場合「外観→カスタマイズ→CSSの編集」を利用していません。

かといってCSSファイルに直接書き込んでいるわけでもありません。

←OPCacheやmod_pagespeedなどを利用していて即時反映しないからです。

じゃあどうしているのか！

これはSimplicityで利用されているテクニックなのですが、「header-insert.php」を作成しwp_head()の直後にget_template_part()でこのファイルを読み込みます。

このPHPファイルの使い方として自分は上にCSS、下にjavascriptをインラインで書いています。

もちろんlinkタグを使ってfontawesomeを読み込んだりするのもこのファイルです。

←外部リソースの読み込みもこのファイルで管理しています。

よってheader.phpに直接インラインで記述するより専用のファイルを用意することで、管理が楽になります。

javascriptのアラートってなんだか好かない、、、

自分javascriptのアラートあんまり好きじゃないんです。

なんか個人的に最近流行りの悪質サイトみたいなイメージが湧いてしまいます、、、、

なので自分はQiitaで見つけたこの記事の関数をいつも利用しています。

qiita.com

有志の方がカキカキされたみたいですが、実用性抜群です！！

利用者にちょっとしたお知らせをする場合などに用いています。

おまけ

jQueryで生成した動的要素にクリックイベントが発火しない場合

onを利用しましょう！

qiita.com

つぶやき備忘録

 

 

 

最近の出来事備忘録

先月から活発に動き回っています笑

ここ2ヶ月間で香川には2回行き、東京には3泊4日滞在し、高知に1泊2日滞在しました。

どの場面でも自分がインプットすることがたくさんあり、益々意識が高まりました！

これからはその熱を冷まさず何事も行動に移していき日々限界突破してまいります。

まとめ

自分専用に備忘録をまとめてしまいましたが、誰かのお役に立てると幸いです！

専門的なことはあまり触れていないですが、機会があればWordpressプラグイン開発なりWordpressのadmin_ajaxなりに触れてみようと思います！

ありがとうございました！！

Google Apps Scriptで社内勤務時間管理システム作ったので便利だったものを備忘録代わりに挙げる

WEBツール

f:id:fwww:20171012152229p:plain

どうも！巷ではMacbookチルドレン第一号と言われている19歳のFwww（ふうや）です(((((((((((っ･ω･)っ

 

9月から地元の動画メディアを運営している会社でバイトさせてもらってます。

元々勤務時間は専用の紙に書いて申告するという形態でした。

それを一新させたいという想いで、Google Apps Script(以後GASと略します)とスプレッドシートを連携させて勤務時間管理システムを開発しました。

開発時間は10時間ほどと少し時間はかかったものの次のようなことができるシステムを作り上げました。

  • 名前を選択して勤務開始ボタンを押すとスプレッドシートに勤務開始時間を挿入
  • 名前を選択して行ったタスクを選び勤務終了ボタンを押すとスプレッドシートに退勤時間とその日の勤務時間、行ったタスクを挿入
  • 毎日夜中の2〜3時に今日の日付と曜日を挿入
  • 月初めにそれぞれの人の勤務時間と合計勤務時間、給与を計算して行ったタスクを記述して（働いた日だけ抜き取る）、それぞれのシートを社長にエクセル形式でメールで送信

ざっくり言えばこれだけのことですが、社長からすれば月初めに紙に書かれた勤務時間を合算して計算する作業を短縮できるので結構喜んでいただいてます。

 

とこんな話は置いといて、GASを利用したに当たって便利だった関数や処理等を紹介させていただきます。

GASで便利な関数・処理をまとめてみた

GASの中でウェブアプリケーションを立ち上げる

function doGet(){
var html = HtmlService.createTemplateFromFile("page"); 
return html.evaluate(); 
}


GASの中で内部扱いのウェブアプリケーションを立ち上げる場合は既定のdoGet()関数を利用します。
上記のようなコードだとpage.htmlをウェブアプリケーションとして開くようになります。
常に最新のコードでテストしたい場合は「公開→ウェブアプリケーションとして導入→最新のコード」で行えます。

セルに値を挿入する

SpreadsheetApp.getActiveSheet().getRange('A1').setValue("あいうえお");

次のように処理すればA1にあいうえおという文字列を挿入することが出来ます。

また変数を利用したい場合は次のようにします。

var i = 1;
var text = "あいうえお";
SpreadsheetApp.getActiveSheet().getRange('A'+i).setValue(text);

こうすれば前者と同じ処理を行えます。

GASのシートの中でデータが記入されている最終行を取得する

var last_row = SpreadsheetApp.getActiveSheet().getLastRow();

通常はこんな処理でデータが記入されている最終行を取得することが出来るのですが、GAS付属の関数を使いすぎると重くなるため、jsでデータが記入されている最終行を取得する方法も書いておきます。

var last_row = 2;
  while(SpreadsheetApp.getActiveSheet().getRange('A'+i).getValue()){
    last_row++;
  }

この処理の場合だとA行と指定してデータが記入されている最終行を種痘することが出来ます。

 曜日付きで今日の日付を取得する

これはjavascriptのお話になりますが、

var dayNames = [
  '日曜日',
  '月曜日',
  '火曜日',
  '水曜日',
  '木曜日',
  '金曜日',
  '土曜日'
];
  
  var date = new Date ();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var dayOfWeek = date.getDay();
  var dayOfWeekStr = [ "日", "月", "火", "水", "木", "金", "土" ][dayOfWeek];
  var day_and_dayname =　month+'月'+day+'日'+'('+dayOfWeekStr+')';

このようにすると、day_and_daynameを出力した時は次のような形になります。

10月12日(木)

その日の日付を毎日挿入したい場合はトリガーを設定するといいですね。

内部ウェブアプリケーションからgsファイルの関数を実行する

google.script.run.withSuccessHandler().fn();

このような場合はfnという関数を内部ウェブアプリケーションから実行することが出来ます。

また引数も渡すことが出来るため便利ですよね！

私はjQueryを内部ウェブアプリケーションで読み込んである要素がクリックされたときなんかにgsファイルの関数を実行するようにしています。

 内部アプリケーションから引数として受け取った数字の処理

内部アプリケーションからgsファイルの関数を引数付きで数字を受け取ったときは文字列となっているので、引数を使って演算を行う場合は次のように数字に変換する必要があります。

var hikisu = Number(hikisu);

あるセルに値があるかどうか判定するとき

先述したコードを利用して次のようにセルに値があるかどうか判定することが出来ます。

if(SpreadsheetApp.getActiveSheet().getRange('A1').getValue()){
//値があるとき
}else{
//値がなかったとき
}

要は指定したRange(セル)でgetValue(値をゲット)できるかどうかってことです。

関数の中で関数を実行する

これはどの言語でも当たり前のことですがまれに悩まされる人を見かけるので書いておきます。

fn(hikisu);

この場合fnという関数にhikisuという引数付きで実行させることが出来ます。

 

セルを範囲指定する

getRangeを使えば一つのセルだけでなく範囲指定してセルを指定することが出来ます。

SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange("A1:B3")

上記コードはA1からB3を指定してます

また次のようなコードでも同様なセル指定を行えます

SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(1, 1, 3, 2)//A1:B3を指定

 

セルを範囲指定して一気に値をゲットする

セルを範囲指定した場合はgetValueではなくgetValuesを利用します。

SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange("A1:B3").getValues();

このようにすればA1からA3までの値を一気にgetValues(ゲット)できます。

※getValuesした値は連想配列になっているので注意が必要です

セルを範囲指定して一気に値をセットする

この場合はsetValueではなくsetValuesを利用します。

SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange("A1:A3").setValues("values");

注意することとしては自分で作り出した配列をsetValuesする場合は連想配列に変換してから処理させる必要があることです

次のようにして配列を連想配列に変換させることが出来ます

var values = [];
for (var i=0; i<value.length; i++) {
    values.push([value[i]]);
}

すでにvalueという配列が存在する場合上記コードを利用して連想配列化させることが出来ます。

セルの値を削除する

セルの値を削除したいときよくあります笑

そんなときはこうします。

SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange("A1:A3").clear();

このように範囲指定してセルの値を一気に削除させることが出来ま。す

もちろん単一のセルを削除させることも出来ますよ。

シートを作成する

様々なデータをスプレッドシートで扱う場合は新たなシートをよく作成すると思います。

SpreadsheetApp.getActiveSpreadsheet().insertSheet("シート2");

上記コードの場合シート2を作成することができます。

※自動的にアクティブシートになるので注意が必要

シートを削除する

一時的な処理の場合シートを削除することがあります。

var sheet2 = SpreadsheetApp.getActive().getSheetByName("シート2"); 
SpreadsheetApp.getActive().deleteSheet(sheet2);

ちょっと面倒な書き方になりますが上記のようにしてシート2を削除させることが出来ます。



アクティブシートを変更する

2つ以上のシートを扱うようなプログラムだとアクティブシートを変更しないと予期しない結果が生まれてしまいます。

var set_sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート1");
SpreadsheetApp.setActiveSheet(set_sheet);

このようにすればシート1をアクティブシートに変更できます

演算してセルに時間形式の値が挿入されてしまった

演算した結果をセルに表示させた場合極稀に0:00のように時間形式の値が挿入されてしまう場合があります。

今回の開発でもこの現象に遭遇して無事に解決できたのでメモしておきます。

setNumberFormat("0")

setValueまたはsetValuesの手前に上記のようなコードを差し込むことで書式設定を行い正常に表示させるようにできます。

小数点を表示させたい場合は0.00のように手動で設定する必要があるので注意が必要です。

メールを送信する

トリガーなんか利用してメールを送信する場合があります。

MailApp.sendEmail('メールアドレス', 'メールの件名です', "メールの内容です");

次のような形でメールを送信することが可能です。

メールの送信元はスプレッドシートでログインしているGoogleアカウントになります

スプレッドシートをエクセル形式に変換

バックアップのためにスプレッドシート（全シート）をエクセル形式に変換する時があります。

var fileId = SpreadsheetApp.getActiveSpreadsheet().getId();
var fetchUrl = "https://docs.google.com/feeds/download/spreadsheets/Export?key=" + fileId + "&exportFormat=xlsx";
UrlFetchApp.fetch(fetchUrl).getBlob().setName("ファイル名.xlsx");

特定シートをエクセル形式に変換する

メールなんかで特定シートのみエクセル形式に変換して送る場合があります。

var fileId = SpreadsheetApp.getActiveSpreadsheet().getId();
var set_sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("シート2");
var sheetId = SpreadsheetApp.setActiveSheet(set_sheet).getSheetId();
var fetchUrl = "https://docs.google.com/feeds/download/spreadsheets/Export?key=" + fileId + "&exportFormat=xlsx&gid="+sheetId;
UrlFetchApp.fetch(fetchUrl).getBlob().setName("ファイル名.xlsx");

処理としてはスプレッドシートのフィールドIDを取得（先程と同様）し、シートIDを取得。

その後専用のurlにfetchさせています

メールでエクセル形式のファイルを添付する

エクセル形式のファイルをメールで添付する場合は次のようにします

var fileId = SpreadsheetApp.getActiveSpreadsheet().getId();
var fetchUrl = "https://docs.google.com/feeds/download/spreadsheets/Export?key=" + fileId + "&exportFormat=xlsx;
var fetch = UrlFetchApp.fetch(fetchUrl).getBlob().setName("ファイル名.xlsx");
MailApp.sendEmail('メールアドレス', 'メールの件名です', "メールの内容です",{attachments:fetch});

メールでファイルを添付する場合はsendEmail関数のオプションで{attachments:フェッチさせたもの}を指定する必要があります。

おまけ：GASでAjax

GASではjsのXMLHttpRequestオブジェクトを生成することができません。

なのでUrlFetchApp.fetchを利用します。

これに関しては深掘りしていないのでググって実装してください笑

まとめ

GAS弄るのは初めてだったんですけど、ググればなんとかなるものだなあと実感しました笑

なのでこれからはGAS案件なども募集しようと思います！

ありがとうございました！！