アンケートなどをとる事のできるGoogle｢フォーム｣で見栄えなどのカスタマイズができる様に(2)

前回よりも少し複雑なアンケートを作成します。最初の回答に対してそれぞれ毎に次の質問内容を変えるようにします。まず1ページ目の質問がこちら。

GoogleForm_12.jpg (JPEG 画像, 984x920 px) via kwout

この回答が｢日本国内｣であれば2ページに、北アメリカであれば3ページに、ヨーロッパであれば4ページへ移動します。更に2ページ・3ページ・4ページでの回答が終わったら最終の5ページに進むという流れを実現します。


1ページの質問アイテムでラジオボタンとリストから選択の場合には、｢回答に基づいてページに移動｣する指定ができます。チェックすると内容テキストの右で次に進むページの指定ができます(こちらを参照)。

GoogleForm_10.jpg (JPEG 画像, 1024x912 px) via kwout

この場合、リンク先のページができている必要があります。ですからリンク先のページができてからここに戻ってきてリンク先のページを編集します。

更にリンク先でも最終ページに移行する指定をします(こちらを参照)。

GoogleForm_11.jpg (JPEG 画像, 1024x920 px) via kwout

完成したフォームがこちら。ここではフォームを送信した後、次のサービスをする指定にしています。

• 別の回答を送信するためのリンクを表示
• フォームの結果への一般公開リンクを公開して表示する
• 回答者に送信後の回答の編集を許可

 

アンケートなどをとる事のできるGoogle｢フォーム｣で見栄えなどのカスタマイズができる様に(1)

Google Drive公式ブログによると、アンケートなどをとる事のできる｢フォーム｣で見栄えなどのカスタマイズができる様になりました。

• Your Forms, your way【2014/09/02】

フォームについては(かなり･･･)以前にこちらで紹介していますが、大きく改良されていたり環境が変わったりしていますので、改めて基本的な機能から使って見る事にしました。

• Google スプレッドシートでフォーム機能を追加【2008年02月09日】

実際に以前の投稿時に作ったフォームと同じ内容にしてみました。

まず、Googleドライブで新規作成からフォームを選択します(こちら)。

GoogleForm_01.jpg (JPEG 画像, 1058x946 px) - 表示倍率 (98%) via kwout

フォームのファイル名を(変更)指定するとフォームのタイトルがファイル名と同じになります。そこでフォームのタイトルを変更すると共に、フォームの説明や質問内容を入力しした所がこちら。

GoogleForm_02.jpg (JPEG 画像, 1058x950 px) - 表示倍率 (98%) via kwout

ここまでが前回投稿時の基本的なアンケートの作成です。リスト形式の場合に以前は1項目を表示していたものが、今は何ら表示をしていない点について対応して欲しい。



質問入力の中で形式を各種選択できますが、上掲の画面の様に更に多くの形式を選択できます。アンケート内容を追加する為に改ページのアイテムを選択し、セクションヘッダーと画像などを追加した所がこちら。

GoogleForm_03.jpg (JPEG 画像, 1022x1607 px) - 表示倍率 (58%) via kwout

追加のアイテムとして日付・スケール・グリッドを追加した所がこちら。

GoogleForm_04.jpg (JPEG 画像, 1058x942 px) - 表示倍率 (99%) via kwout

次に今回の追加機能は上部メニューに｢テーマを変更｣として追加され、クリックするとこちらの様に用意されたデザインテーマを選択できます(こちらを参照)。

GoogleForm_05.jpg (JPEG 画像, 1060x948 px) - 表示倍率 (98%) via kwout

特にテーマを選択すると、更に｢カスタマイズ｣をクリックすると画像の変更やテキストのフォントなどを変える事ができます(こちらを参照)。

GoogleForm_06.jpg (JPEG 画像, 1058x948 px) - 表示倍率 (98%) via kwout

画像の変更では予め用意された画像を利用したり、独自の画像をアップロードできます(こちらを参照)。

GoogleForm_07.jpg (JPEG 画像, 1058x948 px) - 表示倍率 (98%) via kwout

フォームの背景色を変えたり、ページの背景画像を変更した所がこちら。

GoogleForm_08.jpg (JPEG 画像, 1054x928 px) via kwout

ここまでに出来上がったアンケートフォームでは質問の順序が必ずしも適切とは限りませんので、ドラッグ&ドロップでアイテムを移動して整理した(デモ用の)完成したフォームがこちら。




作業の途中で上部メニューで｢ライブフォームを表示｣できるので出来具合を確認しながら進められるのは便利。


 

Googleドライブのスライド機能と「図形描画」で、画像の直接切り抜きが可能に

Google Drive公式ブログによると、Googleドライブにおける｢プレゼンテーション｣のスライド(Slides)機能と「図形描画(Drawings)」で、画像を直接切り抜き編集できる様になりました。

• Edit images right in Google Slides and Drawings【2014/03/25】

実際に｢プレゼンテーション｣のスライド起動時には、メニューにそれらしきアイコンはありませんが(こちらを参照)、画像を挿入するとこちらの様に切り抜きツールのアイコンが現れます。

GoogleSlides_Crop01.jpg (JPEG 画像, 1272x926 px) - 表示倍率 (99%) via kwout

この切り抜きツールのアイコンには2つの機能があります。１つは切り抜きアイコンを直接クリックすると、事前に画像内部に指定したエリアだけを取り出します。他の1つはサブメニューから抜き出す記号を選択する事で、画像全体から指定|の形にマスクを掛けて取り出します。

第1の切り抜きでは、切り抜きアイコンをクリックすると表示する四隅と四辺の太い線(こちらを参照)を操作して指定場所をドラッグで設定し、Enterキー(又は画像エリアの外をクリック)します。

GoogleSlides_Crop02.jpg (JPEG 画像, 1272x926 px) - 表示倍率 (99%) via kwout

第2のマスク処理では、サブメニューのマスク記号を選択すると例えばこちらの様になります。

GoogleSlides_Crop03.jpg (JPEG 画像, 1270x924 px) - 表示倍率 (99%) via kwout

青色■を使って画像全体のサイズを変更できるだけでなく、黄色◆を使って更に変形できます。青色●で回転もできます。



順次にこれらの組合せを適用する事で面白いイメージを作り出せます。例えば、切り抜き⇒マスク⇒回転・変形でできたのがこちら。

GoogleSlides_Crop04.jpg (JPEG 画像, 1272x928 px) - 表示倍率 (99%) via kwout

但し、マスクを二重に操作できません(後のマスクが有効になる)。


画像などは事前に画像処理ソフトで編集処理していた事が、プレゼンテーションの思考の中でできるのは便利です。


 

Googleドライブの「アドオン」サービスから、住所ポイントを一括してGoogle地図上に登録する「Mapping Sheets」を使ってみる

Googleドライブの｢文書｣と｢スプレッドシート｣に機能を拡張する「アドオン」サービスを公開したので、こちらの投稿で、サービス内容と1つのアドオンである「Maps for Docs」を使ってみました。こちらではネットワーク図・フローチャート図といった各種ダイアグラムを作成できる「Gliffy diagrams」を使ってみました。何れも｢文書｣に対する｢アドオン｣でした。今回は｢スプレッドシート｣に対する｢アドオン｣で、スプレッドシート上の住所ポイントを一括してGoogle地図上に登録する「Mapping Sheets」です。



まず、こちらの様に｢アドオン｣の一覧から「Mapping Sheets」を選択・インストールします。

GoogleDrive_Add-on_Mapping Sheets01.jpg (JPEG 画像, 1168x830 px) via kwout

こちらの都道府県の県庁所在地を一覧にしたスプレッドシートを使います。

GoogleDrive_Add-on_Mapping Sheets03.jpg (JPEG 画像, 1168x820 px) via kwout

メニュー｢アドオン｣→「Mapping Sheets」→「Start Mapping」を選択すると、右側にメニューフレームを表示します(こちらを参照)。

GoogleDrive_Add-on_Mapping Sheets02.jpg (JPEG 画像, 1166x478 px) via kwout

そこの「CREATE」アイコンをクリックすると、「Data」というシートを作りますので、｢シート1｣にあるデータをコピーした所がこちら。

GoogleDrive_Add-on_Mapping Sheets04.jpg (JPEG 画像, 1164x942 px) - 表示倍率 (97%) via kwout

右下の｢BUILD｣をクリックして(準備処理が行われ)、更に「View」をクリックするとこちらの様にGoogle地図に県庁所在地をプロットします。

GoogleDrive_Add-on_Mapping Sheets05.jpg (JPEG 画像, 1166x940 px) - 表示倍率 (97%) via kwout

「東京都」で検索すると、こちらの様に都庁の場所を示します。

GoogleDrive_Add-on_Mapping Sheets06.jpg (JPEG 画像, 1166x944 px) - 表示倍率 (97%) via kwout

Categoryをチェックで選択して特定地方だけを表示する事ができます(こちらを参照)。

GoogleDrive_Add-on_Mapping Sheets07.jpg (JPEG 画像, 1166x899 px) via kwout

アレ･･･鹿児島県と山口県にピンが立っていない･･･兵庫県や滋賀県がない?盛岡県と秋田県にピンが立っている！　そこで「Show List」をクリックすると、こちらの様に山口県も兵庫県・滋賀県も抽出されている･･･(こちらを参照)。リストの見えない部分に鹿児島県もある(盛岡県と秋田県は無い)。

GoogleDrive_Add-on_Mapping Sheets08.jpg (JPEG 画像, 1166x946 px) - 表示倍率 (97%) via kwout

上記のデータでは距離的に遠いポイントばかり(10㎞以上)ですが、DEMOデータなどのように一覧のポイントが近い距離に多数ある場合は、こちらの様に特定の地点を中心に一定距離(1㎞、5㎞、10㎞)にあるポイントを抽出できます(こちらを参照)。

GoogleDrive_Add-on_Mapping Sheets09.jpg (JPEG 画像, 1166x938 px) - 表示倍率 (98%) via kwout

GoogleDrive_Add-on_Mapping Sheets10.jpg (JPEG 画像, 1164x940 px) - 表示倍率 (97%) via kwout

まだ若干のバグはあるようですが、一覧からGoogle地図表示を簡単にしてくれるのは使い勝手も良く便利に使えそうです。


　

Googleスプレッドシートの新版がここ何週間で自動的に全ユーザへ適用に

Google+における｢Google Drive｣アカウントの投稿によると、ここ何週間かの内にGoogleスプレッドシートの新版を自動的に全ユーザへ適用します。



新版は先駆けてプレビュー版を公開していて、こちらで紹介している通りChrome限定ですがオフライン編集を可能とし、こちらで(主要なブラウザで可能な)｢アドオン｣機能を追加しています。

前回は使ってみませんでしたが、フィルタビュー(Filter views)の新機能や「セルの結合とテキストの折り返し」、「関数の編集ツール」、「条件付き書式設定」などの新機能も追加しています。



今回は特にフィルタビューを使ってみました。こちらのような日本全国の都道府県別温泉データを使います。

GoogleDrive_Sheet_Filter 1.jpg (JPEG 画像, 1263x768 px) via kwout

関東地方の都県に限定してみます。まず、フィルタビューで使いたいフィールドをマークし、メニュー｢データ｣→「フィルタ表示」→「新しいフィルタ表示を作成」をクリックします(こちらを参照)。

GoogleDrive_Sheet_Filter 2.jpg (JPEG 画像, 1250x768 px) via kwout

結果はこちらの様になります。

GoogleDrive_Sheet_Filter 3.jpg (JPEG 画像, 1174x768 px) via kwout

フィルタ指定のウィンドウで(全てのチェックを外した後)限定したい都県のチェックをして表示したのがこちら。

GoogleDrive_Sheet_Filter 4.jpg (JPEG 画像, 1171x768 px) via kwout

右側の歯車アイコンのメニューからフィルタ名の変更や削除などが可能で、右側の×マークでフィルタを解除して全体表示にできます。



登録済みのフィルタはこちらの様に表示しますので、その選択でフィルタの再利用ができます。

GoogleDrive_Sheet_Filter 5.jpg (JPEG 画像, 1165x768 px) via kwout

 

Googleドライブの「アドオン」サービスから各種ダイアグラムを作成できる「Gliffy diagrams」を使ってみる

こちらの投稿で、Googleドライブの｢文書｣と｢スプレッドシート｣に機能を拡張する「アドオン」サービスを公開したので、サービス内容と1つのアドオンである「Maps for Docs」を使ってみました。今回はネットワーク図・フローチャート図といった各種ダイアグラムを作成できる「Gliffy diagrams」を使ってみます。



まず、｢アドオン｣から「Gliffy diagrams」を選択し、インストールが完了したら｢アドオン｣→「Gliffy diagrams」→「Open sidebar」をクリックすると、こちらの様に右側にこれまでに作成したダイアグラム(diagram)などをサムネイル表示します。

GoogleDrive_Add-on_Diagram01.jpg (JPEG 画像, 1284x942 px) - 表示倍率 (96%) via kwout

既存のダイアグラムを利用する場合には、文書の挿入する位置をクリックで指定した後、サムネイルにマウスを置くと表示する「Insert」をクリックすれば挿入ができます(こちらを参照)。

GoogleDrive_Add-on_Diagram02.jpg (JPEG 画像, 1286x938 px) - 表示倍率 (97%) via kwout

既存のダイアグラムを編集する時は上述操作で「Edit」をクリックしますが、新規作成の場合は「Create diagram」アイコンをクリックします。新規作成の場合はこちらの様に「Gliffy diagrams」のページになり、作成ダイアグラムの種類を選択します。

GoogleDrive_Add-on_Diagram03.jpg (JPEG 画像, 1284x942 px) - 表示倍率 (96%) via kwout

今回はネットワーク図(Network diagram)を選択しています。

左フレームから必要なアイテムをドラッグ&ドロップでエリアに配置していきます。更に上部メニューにある接続アイコンをクリックしてドラッグ&ドロップで機器間の有線接続を示します(こちらを参照)。

GoogleDrive_Add-on_Diagram04.jpg (JPEG 画像, 1284x940 px) - 表示倍率 (97%) via kwout

右上にある｢Save｣アイコンでファイル名を指定して保存をします(こちらを参照)。

GoogleDrive_Add-on_Diagram05.jpg (JPEG 画像, 1286x942 px) - 表示倍率 (96%) via kwout

「Gliffy diagrams」のページは更に編集できる状態になっていますがそのままにしておいて(或はページを終了して)、Googleドライブのページに戻ると右フレーム内に直前に作成・編集したダイアグラムのサムネイルを表示しています。それを上述のように文書内に配置します(こちらを参照)。

GoogleDrive_Add-on_Diagram06.jpg (JPEG 画像, 1282x936 px) - 表示倍率 (97%) via kwout

本記事は「Gliffy diagrams」の操作を使ってみるのが趣旨ではないので、ここまでの操作で停めておきますが、更に幾つかの｢アドオン｣を使ってみた後に、別途「Gliffy diagrams」の機能を使ってみたいと思います。


 

Googleドライブの｢文書｣と｢スプレッドシート｣に機能を拡張する「アドオン」を追加

Google Drive公式ブログによると、Googleドライブの｢文書｣と｢スプレッドシート｣に機能を拡張する「アドオン」を追加しました。但し、｢新しいGoogleスプレッドシート｣にアップデートしておく必要があります(こちらを参照)。

• Bring a little something extra to Docs and Sheets with add-ons【2014/03/11】

早速Googleドライブで｢文書｣を作成で立ち上げると、こちらの様に「アドオン」のメニューが増えています。

GoogleDrive_Add-on_01.jpg (JPEG 画像, 1238x284 px) via kwout

｢アドオンの取得｣を選択すると、こちらの様に一覧を表示します。

GoogleDrive_Add-on_02.jpg (JPEG 画像, 1236x836 px) via kwout

プルダウンメニューの分類やアドオンの概要記述を見ると、翻訳・目次作成などの「文書」自体への機能拡張の他、印刷などの周辺機能への拡張、コミュニケーション機能との連携まで幅広い事が判ります。今後も「アドオン・ストア」として増えていくそうです。



拡張サービスの部分だけを単独でとってみても使ってない機能もあるので、興味のある幾つかを使ってみようと思いますが、今回は「Maps for Docs」をインストールして使ってみます。


上掲の一覧で「Maps for Docs」を選択すると、アプリのアクセス許可を求められ(こちらを参照)、「承認する」とインストールが始まります。

GoogleDrive_Add-on_Maps01.jpg (JPEG 画像, 1246x780 px) via kwout

実際にGoogle地図を挿入するには、住所を「文書」内に入力してマークした状態で、こちらの様に｢アドオン｣→「Maps for Docs」→「Get location」を選択します。

GoogleDrive_Add-on_Maps02.jpg (JPEG 画像, 1242x926 px) - 表示倍率 (98%) via kwout

「Paste to Doc」で「文書」に挿入します。この地図には縮小したりテキストの配置指定もでき、｢テキストを折り返す」指定の時は(こちらを参照)、こちらの様にテキストを配置できます。

GoogleDrive_Add-on_Maps04.jpg (JPEG 画像, 1240x640 px) via kwout

アドオンを一度インストールすると、そのアドオンは全ての｢文書」・｢スプレッドシート｣で適用でき、｢文書」と｢スプレッドシート｣の何れでも使える「Workflows」のようなアドオンもあります。

尚、インストールした｢アドオン｣はこちらの様に｢アドオン｣→「アドオンを管理」で削除する事ができます。

GoogleDrive_Add-on_03.jpg (JPEG 画像, 1242x206 px) via kwout

 

Googleドライブ上の新しいスプレッドシートを公開、オフラインでの利用も可能に

グーグル社公式ブログ(日本語訳はこちら)によると、Googleドライブ上の新しいスプレッドシートを公開し、機能の改善や高速化をすると共に、インターネットに接続していないオフラインでの利用も可能になりました。

• New Google Sheets: faster, more powerful, and works offline【2013/12/11】

早速オフラインでの利用をしてみました。オフライン機能の利用はChromeに限定され、事前の設定が必要です。事前設定は、オフラインの有効化と新しいバージョンを使う宣言です。



オフラインの有効化はこちらの日本語版ヘルプの通りで、2段階に分けて行います。

Googleドライブの左メニューにある「展開」をクリックし、その中にある「オフライン」を選択する(ステータスの初期化で時間が掛かる時がある･･･ブラウザの「更新」で状態が分かる時がある)とこちらの様に最初に「アプリケーションをインストール」できる様になります。

GoogleSheets_OfflineUse_Setting1.jpg (JPEG 画像, 1045x401 px) via kwout

ここでWebからアクセスする時の注意：日本語版ヘルプでは｢アプリを取得｣という青いボタンとなっていますが、画像で分かる通り「アプリケーションをインストール」のボタンです。またChromeウェブストアでは｢Chrome に追加｣ボタンはなく「＋無料」ボタンをクリックします。


第2のステップとして、これまで｢オフラインを有効にする｣と薄く表示されていたボタンをクリックします(Chromeウェブストアから戻る時の操作で、上掲のページに戻らない場合は再度｢オフライン｣を選択する様にします)。



新しいバージョンを使う宣言はGoogleドライブの右上の歯車アイコンのプルダウンメニュー(こちら)で、｢設定」→「編集」タブから「新しいGoogleスプレッドシートを試してみる｣にチェックします(こちら)。

GoogleSheets_NewAppUse_Setting1.jpg (JPEG 画像, 286x252 px) via kwout

GoogleSheets_NewAppUse_Setting2.jpg (JPEG 画像, 1072x368 px) via kwout

これは未だ現行バージョンの機能を完全に包含していない(こちらを参照)為にプレビュー版の位置付けです。



準備ができた所で早速、インターネットに接続している状態で新しいシートを作りました。シートの右下には「新しいGoogleスプレッドシート」の文字がでます。

次にインターネットに接続されていない状態で新しいシートを起動するとローカル用のGoogleドライブモジュールがロードされ、シートの内容を表示できました。しかし、データの更新(追加、編集)をすると「ファイルが使用できません」のエラーになります(状況の分析はできていません)。


　

Google Driveでファイル内容のプレビューが拡大可能に

Google Drive公式ブログによると、Google Driveでフォルダレベルでのファイル内容プレビューで拡大して見る事ができるようになりました。

• Preview files in Google Drive【2013/02/21】

通常のフォルダレベルでのファイル内容プレビューでは、こちらのようにサムネイルによる概略のイメージしか掴めません。

GoogleDrive_DISP_Thumbnail.jpg (JPEG 画像, 1209x460 px) - 表示倍率 (98%) via kwout

そこで全選択のアイコンをクリックすると目マークのプレビューアイコンが追加表示されます(こちらを参照)。

GoogleDrive_DISP_PreviewIcon.jpg (JPEG 画像, 1204x417 px) - 表示倍率 (99%) via kwout

プレビューアイコンをクリックすると、こちらのように拡大して表示されます。

GoogleDrive_DISP_Preview.jpg (JPEG 画像, 1205x869 px) - 表示倍率 (99%) via kwout

プレビューしたい文書のサムネイルに右クリックしてメニューからプレビューする事もできます(こちらを参照)。

GoogleDrive_DISP_PreviewMenu.jpg (JPEG 画像, 1202x599 px) - 表示倍率 (99%) via kwout

文書が複数ページの場合にはマウスのホイールでページの移動、左右の＜や＞マークでプレビューする文書の移動もできます。必要によってプレビューの拡大・縮小などができ、文書を開くなどの操作もできます。

特定の文書だけ(複数)選択してプレビューする事もできますので、効率的に対応する文書を見つける事ができます。



この機能をサポートするファイルは以下の通りです(全ての形式を確認した訳ではありません･･･)。

• Google Docs
• Google Sheets
• Google Slides
• Google Forms
• Google Drawings
• Image files (.JPEG, .PNG, .GIF, .TIFF, .BMP)
• Raw Image formats
• Video files (WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV, .ogg)
• Microsoft Word (.DOC and .DOCX)
• Microsoft Excel (.XLS and .XLSX)
• Microsoft PowerPoint (.PPT and .PPTX)
• Adobe Portable Document Format (.PDF)
• Tagged Image File Format (.TIFF)
• Scalable Vector Graphics (.SVG)
• PostScript (.EPS, .PS)
• TrueType (.TTF)
• XML Paper Specification (.XPS)

尚、こちらのように「すべて表示」アイコンで下部にサムネイルを表示し、そのクリックで直接に対応文書のプレビューができます。

GoogleDrive_DISP_PreviewPlusThumbnail.jpg (JPEG 画像, 1206x855 px) - 表示倍率 (99%) via kwout

　

Google Drive上Webホスティング機能が可能に、使ってみる(2) － JavaScript、jQuery【改訂】

【注意】本Webホスティングサービスは、2016年8月31日をもって停止になります。こちらを参照。


前回は１つのhtmlファイルのアプリでしたが、今回はJavaScriptで記述したり、複数のファイルを使ったり、jQueryというライブラリーを使ったアプリを動かしてみます。



まず1つのhtmlファイルのアプリですが、JavaScriptという言語で記述した動的な動きをするアプリ(清野克行著｢PHPによるWebアプリケーション入門」から借用)です。このアプリへはこちらからアクセスします。

HTML5サンプル via kwout

数量に入力して｢計算｣をクリックすると合計と総合計が計算されます。例えばこちら。

GoogleDrive_AppCalculate.jpg (JPEG 画像, 372x321 px) via kwout

次にjQueryというライブラリーを使ったアプリ(山田祥寛著[jQuery入門教室」より借用＆改訂。画像は「足成」より借用)です。こちらからアクセスします。

イベント via kwout

上部のサムネイル画像をクリックすると、下部に対応する拡大画像が表示されます。



cssファイルを別のフォルダに格納・参照し、画像ファイルも別フォルダに格納、更にJaveScriptの記述を別ファイルとすると共に、jQueryライブラリモジュールもGoogle Driveにアップロードしています。

ｊQuery ライブラリーについてはCDN(contents delivery network)を参照できるとよいのですが、セキュリティの確保の為か、外部からJavaScriptロジックをGoogle Drive自体がロードして持ち込む事を避けているようです。jQueryライブラリモジュールは軽量なのでアップロードして参照すれば動作するようになります。



【改訂】　2015年09月13日　21：00　サービス停止の案内追記