無料でここまでできる！ Googleフォームで作るセミナー受付システム
1. 本システムの機能
=================================
1). セミナー申し込みフォーム
2). 参加者リスト自動生成
3). 受講票兼自動返信メール作成・送信
4). 関係者宛 受付通知メール送信
5). リマインドメール送信
2. システムの流れ
=================================
1). Googleフォームでセミナー申し込みフォームを作成・送信 (参加者)
2). Googleスプレッドシートで参加者リストを自動作成 (システム)
3). 受講票兼自動返信メール送信 (システム)
4). 関係者宛受付通知メール送信 (システム)
5). リマインドメール送信 ( 管理者 + システム )
3. 作業手順
=================================
1). セミナー申し込みフォームを作成
（参加者リスト自動生成機能付き、通知機能付き）
2). 受講票兼自動返信メール機能作成
3). リマインドメール送信機能作成
1). セミナー申し込みフォームを作成
（参加者リスト自動生成機能付き、通知機能付き）
1). Googleフォームでセミナー申し込みフォームを作成
参加者リスト自動生成機能付きのGoogleフォーム作成は、
以下、a). b). の通り、
a). Googleフォームから作成、
b). Googleスプレッドシートから作成
の2通りがあります。
a). Googleフォームから作成
1.1. Googleドライブにアクセス
1.2. 「新規」-「その他」-「Googleフォーム」を選択
1.3. フォーム右横(質問を追加)ボタンから、参加者のお名前、連絡先メールアドレスなど、必要項目を作成
1.4. 「設定」ボタンから、送信時「確認メッセージ」を作成、保存。
※確認メッセージの文章については、以下サイトの文章をそのまま使用させていただきました。
【参考サイト】
ASCII.jp：30分で作れる！セミナー受付がラクになる自動システム (1/4)｜Web制作をちょっと便利にするGoogle Apps Script入門 : http://ascii.jp/elem/000/000/884/884133/
【参加者リスト自動生成機能を追加】
1.5. 画面上「プレビュー」ボタンをクリックし、Googleフォームをテスト送信します。
(Googleフォームに「テスト送信」という機能があるわけではありません。テストとして必要項目を入力し、通常通り「送信」ボタンをクリックします)
1.6. 再度 GoogleドライブからGoogleフォーム編集画面に戻り、「回答」タブをクリックします。
1.7. フォーム右上の「スプレッドシートの作成」ボタンをクリックします。
1.8. 以下設定画面より、回答(参加者申し込みリスト) の記録先を設定します。
※スプレッドシートが新規作成の場合には、上図のように、適宜シート名を設定します。
以上の手順により、Googleフォームによる申し込み受信結果がすべて自動でGoogleスプレッドシートに記録されます。
(参加者リスト自動生成機能 作成完了)
【関係者宛受付通知メール送信機能を追加】
1.9. 以下箇所をクリックします。
1.10. 「新しい回答についてのメール通知を受け取る」をクリックします。
上記設定により、Googleフォームから申し込みがある都度、メールで通知されます。
1.1. Googleドライブにアクセス
1.3. 新規シート上で、「ツール」-「フォームを作成」を選択
1.4. フォーム右横(質問を追加)ボタンから、参加者のお名前、連絡先メールアドレスなど、必要項目を作成
Googleスプレッドシートからの以上の手順でGoogleフォームを作成することで、Googleフォームによる申し込み受信結果がすべて自動でGoogleスプレッドシートに記録されます。
【関係者宛受付通知メール送信機能を追加】
1.5. 前述、a. Googleフォームから作成 1.9.～1.10を参考に、関係者宛受付通知メール送信機能を追加します。
2). 受講票兼自動返信メール作成・送信機能作成
回答を記録するGoogleスプレッドシートにスクリプトを設定します。
2.1. 対象のGoogleフォームを編集画面で開きます。
2.2. 以下ボタンをクリックし、「スクリプトエディタ」をクリックします。
「スクリプトエディタ」画面を開きます。
2.3. 以下のコードを入力します。
function submitForm(e){
var itemResponses = e.response.getItemResponses();
var username = '';
var mail = '';
for (var i = 0; i < itemResponses.length; i++) {
var itemResponse = itemResponses[i];
var question = itemResponse.getItem().getTitle();
var answer = itemResponse.getResponse();
if (question == 'お名前'){ username = answer; }
if (question == 'メールアドレス'){ mail = answer; }
}
var title = 'セミナー名';
sendMailToUser(title, username, mail);
}
function sendMailToUser(title, username, mail){
var png = getMapImage("Googleマップで表示する場所(会場住所)");
var message = '<html><body><p>' + username + '様<br><br>'
+ 'この度は弊社主催のセミナーに'
+ 'お申込みいただき、誠にありがとうございます。<br>'
+ '当日ご来場の際は本状を印刷して受付にご提出ください。<br><br>'
+ '――お申込みのセミナー情報――<br><br>'
+ '【セミナー名】セミナー名を記述<br>'
+ '【開催日時】開催日時を記述<br>'
+ '【開催場所】開催場所を記述<br>'
+ '【開催住所】開催住所を記述<br>'
+ '（最寄り駅：最寄り駅名を記述）<br><br>'
+ '【Googleマップ】<br>'
+ '<img src="cid:map" width="400px" height="300px"><br>'
+ '――――――――<br><br>'
+ '【セミナー運営事務局】<br>'
+ '会社名、担当者名を記述 ( 例. 株式会社●●● 担当：△△ )<br>'
+ '電話番号を記述<br>'
+ 'メールアドレスを記述</body</html>';
MailApp.sendEmail({
to: mail,
subject: title,
htmlBody: message,
inlineImages:{ map: png},
attachments:[png],
from:'送信元メールアドレスを記述',
name:'〇〇事務局など、送信者名を記述',
replyTo:'返信先メールアドレスを記述'
});
}
function getMapImage(point) {
var map = Maps.newStaticMap().setSize(800, 600)
.setCenter(point).setZoom(18).setLanguage('ja')
.setMapType(Maps.StaticMap.Type.ROADMAP);
map.addMarker(point);
return map.getBlob().getAs(MimeType.PNG);
}※上記スクリプトについては、以下サイトのスクリプトをそのまま使用させていただきました。
【参考サイト】
ASCII.jp：30分で作れる！セミナー受付がラクになる自動システム (1/4)｜Web制作をちょっと便利にするGoogle Apps Script入門 : http://ascii.jp/elem/000/000/884/884133/
2.4. スクリプトエディタ画面のメニュー 「編集」-「現在のプロジェクトのトリガー」をクリックします。
⇒ 現在のプロジェクトのトリガー」ダイアログが表示されます。
2.5. 上記ダイアログで「submitForm」「フォームから」「フォーム送信時」 を設定し、保存します。
※承認を求める画面が表示されたら、「続行」「承認する」ボタンをクリックし、スクリプトのトリガー設定を完了します。
(これでスクリプトの実行が許可されました)
2.6. Googleフォーム作成画面に戻り、テスト送信を実行します。
※受講票兼自動返信メールの送信が確認できればOKです。
3). リマインドメール送信機能作成
Google Chrome 拡張機能の「Yet Another Mail Merge」を利用する方法です。
こちらの詳細については、後日記事でご紹介します。
【本日記事で参考にさせていただいたサイト】
ASCII.jp：30分で作れる！セミナー受付がラクになる自動システム (2/4)｜Web制作をちょっと便利にするGoogle Apps Script入門 : http://ascii.jp/elem/000/000/884/884133/index-2.html
Googleフォーム機能で応募フォームやアンケートフォームを手軽に作成する | ワークスタイル変革サービス【MasterApps】 : http://www.master-apps.jp/document/google-document-form.html
プラグインなし WordPressにカスタム投稿タイプを作成する
カスタム投稿タイプ作成方法
WordPressのカスタム投稿タイプという機能を活用すると、
通常の投稿タイプとは区別して記事を作成・掲載していきたい場合に便利です。
、
カスタム投稿タイプの作成には、以下、「Custom Post Type UI」といった有名で非常に便利なプラグインもありますが、今回は、プラグインなし、function.php に追記する形式で実現する際の手順をご紹介します。
Custom Post Type UI — WordPress プラグイン :
https://ja.wordpress.org/plugins/custom-post-type-ui/
カスタム投稿タイプ作成方法 (プラグインなし)
【手順】
1. custom.php を作成
カスタム投稿タイプ作成のためのコードを記述
2. function.php で上記を読み込み
function.php に、custom.php 読み込みのためのコードを追加
カスタム投稿タイプを追加するには、
以下のコードを funciton.phpに記述すれば良いのですが、
function.phpの後々の肥大化を避けるため、今回は custom.phpという別のファイルを作成し、function.phpで読み込むことにします。
《custom.php》
<?php /*カスタム投稿タイプ*/ // カスタム投稿タイプを作成する add_action('init', 'add_websites_post_type'); function add_websites_post_type() { //カスタム投稿タイプ（"custom"） register_post_type( 'custom1', array( 'label' => 'カスタム記事', //ラベル名 'hierarchical' => false, //falseの場合、階層構造なし 'public' => true, //通常はtrue 'has_archive' => true, //trueでindexページを生成 'supports' => array( 'title', //タイトルの表示を有効に 'editor' //本文の表示を有効に ) ) ); //カスタム投稿タイプ（ここまで） }
《function.php》
function.php には、以下コードを追記して、custom.phpを読み込むようにします。
require_once locate_template('lib/custom.php'); // その他カスタマイズの関数
※今回は、libフォルダを新規作成し、フォルダ内にcustom.phpを格納しています。
パスワード認証による閲覧制限 ２つの方法
＜目次＞
パスワード認証によるページ閲覧制限方法
1) 基本認証による方法
2) JavaScriptによる方法
1).基本認証による方法
1).基本認証による方法は、4/7の内容をご参照ください。
times-diary.hatenablog.com
2)、JavaScriptによる方法
2)、の方法は、以下の通りです。
【用意するファイル】
(1) 閲覧制限をかけるためのhtmlファイル
(2) 閲覧制限をかける対象となるhtmlファイル
1. index.htmlファイルを新規作成し、以下を記述します。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScriptによる閲覧制限</title> <script type="text/javascript"> function gate() { var UserInput = prompt("パスワードを入力して下さい:",""); location.href = UserInput + ".html"; } </script> </head> <body> <input type="button" value="パスワードを入力して秘密のページへアクセスする" onclick="gate();"> </body> </html>
2. 閲覧制限をかけたいhtmlファイルのファイル名を、
「パスワードにしたい文字列」.html とします。
たとえば、今回の場合、
パスワード：glass
なので、ファイル名を glass.htmlとします。
3. 上記2つのファイル※を同じディレクトリに配置します。
※(1)閲覧制限パスワード入力用ページ、(2)閲覧対象ページ
これで、準備ができました。
対象のディレクトリにブラウザでアクセスします。
【動作確認】
1. 以下ボタンが表示されますので、クリックします。
⇒パスワード入力を求めるインプットボックスが表示されます。
2. パスワード「glass」を入力します。
⇒閲覧制限付きページが表示されました。
（パスワード入力後、以下習作ページにジャンプ）
※パスワード入力後、上記習作ページにジャンプします。
上記方法は、以下サイトを参考にさせていただきました。
【参考サイト】
2/3 簡単に閲覧制限！JavaScriptでパスワード認証を設定 [ホームページ作成] All About : https://allabout.co.jp/gm/gc/23839/2/
「.htaccess」ファイルを設置する（基本認証編）
サイトに「.htaccess」ファイルを設置しました。
「.htaccess」とは
Webサーバーに設置すると、設置したディレクトリ以下に対して制御することができます。
※Webサーバーに「Apache」を使用していることが前提
「.htaccess」ファイルでできること
主な用途としては、以下の通り
- 基本認証によるアクセス制御
- リダイレクト
- 404エラーページの作成
今回の私の設置目的としては、基本認証によるアクセス制御(ID、パスワードを入力しないとページが表示されないようにすること)でした。
「.htaccess」ファイルの作成方法（基本認証編）
1. メモ帳など、エディタを使い、以下のコードを記述します。
以下、「.htaccess」ファイルに記述する内容です。
《基本認証のための作成例》
<Files ~ "^\.(htaccess|htpasswd)$"> deny from all </Files> AuthUserFile /home/(フルパス)/.htpasswd AuthGroupFile /dev/null AuthName "Please enter your ID and password" AuthType Basic require valid-user order deny,allow
[補足]
ちなみに、.htaccessファイルの作成支援サイトもたくさんあります。
一から記入するのが心配な方は、こうしたサイトを利用すると簡単に作成できます。
.htaccess ファイルを簡単作成「.htaccess Editor」 :
http://www.htaccesseditor.com/
よく使うhtaccess作成（生成） :
http://htaccess.cman.jp/
※以下ベーシック（基本）認証専用
ベーシック認証用 .htacess 作成ツール | Softel labs :
https://www.softel.co.jp/labs/tools/basic-auth/
ベーシック認証のページ、htaccessサンプルのダウンロード、暗号化も。アクセス制限にご利用下さい。 :
http://www.chama.ne.jp/access/
Basic認証｜.htaccess :
https://w3g.jp/others/htaccess/basic_authentication
2. ファイル名を「.htaccess」として保存します。
※拡張子がない状態で保存できない場合には、
.txtなどの形式でいったん保存し、エクスプローラー画面で「名前の変更」から.以下の拡張子部分を削除すればOK。
※注意点としては、ファイル内の最後に必ず改行を入れること。
3. 以上の手順で作成した「.htaccess」ファイルを、制御を有効化したいWebサーバーのディレクトリに配置します。
なお、上記コード作成時、
「サイトのフルパスが分からない」
という場合があります。
実は、私も今回そのような状態でした。
そのため、最初そのことに気づかず、ファイルを設置しても思ったように機能せず、しばらく悩みました。
というのは、サイトのフルパスは、ブラウザで見ているURLとは違うからです。
ということで、以下フルパスの確認方法についても併せて記載しておきます。
【WordPress】カスタムフィールド活用術：記事ごとにCSSを設定する
個別の記事にCSSを設定する
カスタムフィールドを活用すると、作成中の記事に独自のスタイルを設定することができます。
WordPressの記事単体に独自のスタイルを設定したい場合、
エディタ内でCSSを書いてもスタイルを設定することはできますが、
これは推奨できる方法ではありません。
なので、ここではカスタムフィールドを活用したCSS設定方法をシェアしますね。
手順
1. カスタムフィールドを作成
1.1. 投稿の編集画面から、カスタムフィールドを作成します。
カスタムフィールド追加欄が表示されていない場合は、投稿画面上部、「表示オプション」から、カスタムフィールドにチェックがない可能性があります。未チェックなら、チェックを入れ、表示させます。
1.2. カスタムフィールドを作成します。
※フィールド名は任意です。ここでは、「custom_CSS」で作成します。
2. functions.php の編集
※functions.php 編集前には念のためバックアップを取りましょう。
2.1. functions.php に2.2.以下のコードを追記します。
ただし、ここでは functions.php の今後の管理を考慮し、別のファイルを新規作成し、以下を記述することにします。
こうして外部ファイル化すると、functions.php があまりごちゃごちゃせず、シンプルかつ効率的です。
また、functions.php自体は極力編集しないで済むので、functions.phpファイル破損のリスクが避けられます。
2.2. ここでは、widgets.phpというファイルを新規作成し、下記コードを記述することにします。
また、functions.phpからの外部参照を一箇所にまとめたいので、「lib」フォルダを新規作成し、そのフォルダ内にwidgets.phpファイルを配置します。
《widgets.php》
<?php /* * Custom CSS Widget */ function custom_css_hooks() { add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high'); add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high'); } function custom_css_input() { global $post; echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />'; echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>'; } function save_custom_css($post_id) { if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; $custom_css = $_POST['custom_css']; update_post_meta($post_id, '_custom_css', $custom_css); } function insert_custom_css() { if (is_page() || is_single()) { if (have_posts()) : while (have_posts()) : the_post(); echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>'; endwhile; endif; rewind_posts(); } } add_action('admin_menu', 'custom_css_hooks'); add_action('save_post', 'save_custom_css'); add_action('wp_head','insert_custom_css'); ?>
2.3. functions.php には、上記コード参照用に以下コードを追記します。
《functions.php》
/*widgets.php を読み込み*/
require_once locate_template('lib/widgets.php'); // サイドバー、ウィジェットの関数
以上で、「Custom CSS」ウイジェットが追加され、custom_CSSフィールドに個別記事ページごとのCSSを設定することができるようになりました。
あとは、該当の記事編集画面を開き、custom_CSSフィールドの値欄にCSSを記述すればOKです。
【参考サイト】
Custom CSS Per Post | Digging Into WordPress :
https://digwp.com/2010/02/custom-css-per-post/
【CSS3】 アニメーションボタン
CSS3によるアニメーションボタン No.2
拡大・縮小するアニメーションボタンを作成しました。
Demo css3 アニメーションボタン(拡大・縮小) | WebStock
以下、ソースを記載します。
[ソース] html
<a href="#"><img class="area-main-topbtnr" src="http://サイト/パス/画像ファイル名" width="100%"></a>
※上記、サイト名、パス、画像ファイル名は適宜変更してください。
[ソース] css
.area-main-topbtnr{ z-index:1;animation:a 1.4s;animation-iteration-count:infinite; -webkit-animation:a 1.4s; -webkit-animation-iteration-count:infinite } @keyframes a{ 0%{transform:scale(0.7,0.7)} 0%,50%{opacity:1} 50%{transform:scale(1.0,1.0)} to{transform:scale(0.7,0.7)} } @-webkit-keyframes a{ 0%,to{opacity:1} 0%{-webkit-transform:scale(0.7,0.7)} 50%{ -webkit-transform:scale(1.0,1.0)}50%, to{opacity:1}to{-webkit-transform:scale(0.7,0.7) }
[捕捉]
ちなみに、以下のようなボタンジェネレーターサイトを利用すると、
画像不要、CSSだけで簡単にボタンが作れます。
CSS Button Generator - imageless css buttons maker :
http://css-button-generator.com
グローバルナビのテキストをhoverで切り替える方法
グローバルナビのテキストをhoverで切り替える方法
グローバルナビにマウスを重ねた時、文字を変更する方法を確認、実装してみました。
ここでは、下図のように、
↓
標準時英語表記のグローバルナビメニュー
↓
(マウスホバー)
↓
日本語表記する
という動作を実現してみました。
実現方法は、以下の通りです。
【方法】onMouseOverでメニューのテキストを変更する
[コード例]
<li class="mission_statement"><a href="#" data-nav-section="mission_statement"><span class="en" onMouseOver="this.innerText='ミッション'" onMouseOut="this.innerText='Mission Statement'">Mission Statement</span></a></li>
[補足]
CSS調整用に英語表記と日本語表記のそれぞれにクラス名を付けています。
マウスが重なった時のみ表記される日本語テキストをonMouseOverで指定、マウスが離れると表記される英語メニューをonMouseOutで指定しています。
以上、マウスオーバー(hover)でテキストを変更する方法でした。
Sass の編集にはこれがオススメ「Koala」
今日は、Sass編集時に役立つ、こちらのツールをご紹介させていただきます。
ダウンロード先： http://koala-app.com/
Sass (サス) とは
Syntactically Awesome Stylesheets の略だそうです。
一言で言うと、拡張版CSSといったところでしょうか。
CSSが入れ子にできるなど、Sassを使うと、とっても効率的にCSSが書けます。
なので、管理もしやすく、保守性も高まります。
従来のStyleにありがちな、
- 記述が冗長になる ( コードの記述量が増える )、
(ゆえに)
- コードが見にくい、
- コードが直しにくい
といった問題を解決できるところがSassのメリットと言えます。
Bootstrapのテンプレートを利用させていただいたりすると、CSSがSassで作られていることがあります。
最近は一般的に広く利用されるようになってきているSass、
自分で書くにも、既成のファイルを編集するにも、
その編集方法を心得ておくのはオススメです。
「Koala」の使い方について
使い方は、こちらの記事が参考になりました。
ぜひご参照ください。
GUIアプリケーション「Koala」でSass、Compassを楽に扱う – WebCake : http://webcake.no003.info/webdesign/koala-sass-compass.html
[ 参考記事 ]
tarahako.com
DreamweaverでSassファイルを編集するには？ | Webデザインのタネ
qiita.com
以上、ご参考まで。
Bootstrap テンプレート 「UNION」でコーポレートサイトを作りました
今日は、Bootstrapテンプレートでコーポレートサイト(デモサイト)を作成しました。
使用したのは以下のUNIONというFreeのテンプレートです。
で、作成したデモサイトがこちらです。↓
SAMPLE PRESS
こういったテンプレートを利用すると、
シングルページのスタイリッシュなサイトがサクッとできてしまうのでとっても便利！
ありがたいですねぇ！
>> UNIONの公式サイトはこちら ↓
https://freehtml5.co/union-free-html5-bootstrap-template/
また、今回デモサイトで使用しているダミーテキストは、
以下サイトを利用して生成させていただきました。
ダミーテキストジェネレータ | Web制作小物ツール - dounokouno.com : https://webtools.dounokouno.com/dummytext/
このようなテキストジェネレータのおかげで、ページ内に必要なボリュームテキストがただちに挿入できます。
デモサイト制作時などに重宝してありがたいです。
以上、ご参考まで。
【現場テク】カンバスサイズから画像を指定サイズに加工(縮小)する方法
カンバスサイズから画像を指定サイズに加工(縮小)
Photoshopの「イメージ」-「カンバスサイズ」から、画像を指定サイズに変更(縮小)する方法です。
【手順】
準備：
※この作業時、「選択したレイヤーのバウンディングボックスを表示」はチェックしておいてください。
「選択したレイヤーのバウンディングボックスを表示」アイコンは、メニューバー直下にあります。
1. Photshop で、対象の画像を開きます。
ここでは、幅1600pxの以下画像（幅 1600 pixel 高さ 1066 pixel）を開いてみました。
2. 対象画像のロックを外します。
「レイヤー」の対象画像レイヤーにある鍵マーク部分をダブルクリックすると外れます。
「レイヤースタイル」の設定画面が開きますが、×ボタンで閉じてOKです。
3. メニューの「イメージ」-「カンバスサイズ」を選択（Windowsのショートカットキーでは「Alt」+「Ctrl」+「C」）し、変更後のファイルサイズ「幅」「高さ」を変更します。
ここでは、画像サイズを、幅 600 pixel 高さ 350 pixel に設定してみます。
※この時、サイズの単位がpixel以外になっている場合、メニューの「編集」-「環境設定」-「単位・定規」で単位「定規」の値を変更します。
この時、以下のような警告メッセージが表示されますが、かまわず「続行」します。
結果、画像が一部切り取られた以下のような状態となります。
4. メニュー「編集」-「自由変形」(Windowsのショートカットキーでは「Ctrl」+「T」)を選択します。
5. 指定サイズに画像を収めるため
「Shift」キーを押しながら、バウンディングボックスの角を画像範囲内に向かってドラッグします。
右側に余白が少しできますが、左に寄せてみます。
こんな感じになります。
小さすぎると操作しづらいので、「Ctrl」+「+」で少し大きい表示に変更します。
6. 画面を確認し、うまく収まっているようなら、変更を確定します。
7. 長方形選択ツールを選択した状態で、以下水色箇所あたりを選択します。
8. 移動ツールを選択します。
9. 画像内の先程の選択範囲に表示されるハンドルをドラッグして横に広げます。
10. 右側の余白部分が右端部分と同色で塗りつぶされます。
作業は以上で完了です。
ヒートマップ一覧
< 目次 >
ヒートマップを利用する
「ヒートマップ」ってご存知ですか？
ヒートマップとは？
サイト訪問者がページのどこを見ているのか、
暖色(多)←→寒色(少)で表すツールです。
サイト運用者にとっては、サイトの解析ツールとして役立ちます。
以下、ヒートマップのサービス一覧をまとめてみました。
無料でも使えるサービス
無料ヒートマップ解析ツール User Heat : どこが読まれているか見えるアクセス解析 :
http://userheat.com/
【無料】ヒートマップ分析ツール - MIERUCA（ミエルカ） :
https://mieru-ca.com/heatmap/
ヒートマップ - [無料]GA連携でらくらくセグメント別分析｜brick : https://www.brick.tools/applications/heatmap/
スマホからPCまで解析できるヒートマップツールとは｜Ptengine : https://www.ptengine.jp/
自作しようと思う時に参考になる情報
ヒートマップツールを無料でとても簡単に自作してWebサイトに導入する方法（heatmap.js＋Milkcocoa） | Milkcocoa Engineers' Blog :
http://blog.mlkcca.com/frontend/heatmap-with-milkcocoa/
はてなブログユーザーなら使いたいヒートマップツール「Ptengine」
以下記事が参考になります。
こんなのがあったとは嬉しい！
ヒートマップツール「Ptengine」がはてなブログ限定特典で無料で使える - 攻めは飛車角銀桂守りは金銀三枚 : http://www.fair-skinned-monster.com/entry/2017/01/06/070000
Ptengine（外部サービス） - はてなブログ ヘルプ :
http://help.hatenablog.com/entry/partners/ptengine
WordPressでヒートマップを使おうと思う時に参考になる情報
wordpressプラグイン『Ptengine』が超便利すぎる！アクセス解析やら色々できるよ！ | ブログマーケッターJUNICHI :
https://junichi-manga.com/plugin-ptengine/
Google Apps 更新日自動入力
更新日自動入力機能をGoogleスプレッドシートに追加
Googleスプレッドシートは、最近仕事でチーム利用することが多くなりました。
今日は、スプレッドシートで管理している表中の値が更新された場合、その更新日を記録したいとのメンバー要望により、該当行に最終更新日が入るスクリプトを設定しました。
スクリプトは下記記事を参考にさせていただいております。
【参考記事】
[超簡単] spreadsheetを更新したら自動で更新日付を入れるGAS - Qiita : http://qiita.com/Yamotty/items/888ae6f93a05a8cfc16f
手順
1. Google スプレッドシートを起動
2. メニューの「ツール」-「スクリプトエディタ」を選択
3. エディタに下記コードを入力
4. トリガーを「値の変更」で設定します。(下図参照)
⇒ これで、値を更新した行にその最終更新日が設定されます。
サンプルスクリプト 紹介
[コード]
function insertLastUpdated() { var ss = SpreadsheetApp.getActiveSheet(); var sheet_name = ''; sheet_name = ss.getName(); //Browser.msgBox(sheet_name); var currentRow = ss.getActiveCell().getRow(); var currentCell = ss.getActiveCell().getValue(); var updateRange = ss.getRange('A' + currentRow) //更新日をいれる列をstringで指定。この場合はA列 var str = "注意点" Logger.log(updateRange); //更新日の記入 if (str.indexOf(sheet_name) == -1) { if(currentRow>4){ if(currentCell) { updateRange.setValue(new Date()); } } } }
[トリガー]
(2019/01/14 追記)
補足説明：
上記スクリプトでは、
「注意点」という名前のシート以外で、5行目以下で値が入力・変更された場合、その行のA列に更新日を自動設定するという動作を実現しています。
なので、入力行が5行目より上、あるいは、もっと下の場合、
if(currentRow>4){
の 4の数字を適宜変更してください。
また、更新日時を設定したいシートが複数あるうちの特定のシートのみの場合、
if (str.indexOf(sheet_name) == -1) {
の箇所を書き換えて以下のようなスクリプトにします。
function insertLastUpdated() { var ss = SpreadsheetApp.getActiveSheet(); var sheet_name = ''; sheet_name = ss.getName(); //Browser.msgBox(sheet_name); var currentRow = ss.getActiveCell().getRow(); var currentCell = ss.getActiveCell().getValue(); var updateRange = ss.getRange('A' + currentRow) //更新日をいれる列をstringで指定。この場合はA列 var str = "注意点" Logger.log(updateRange); //更新日の記入 if (sheet_name === "注意点") { if(currentRow>4){ if(currentCell) { updateRange.setValue(new Date()); } } } }
"注意点"のところはここでのシート名を表しているので、ここを必要なシート名に適宜変更してください。
[結果]
バッチリ、思った通りの動作となりました。
【CSS3】 アニメーション(ゆらゆらバナー)
ECサイト設置用 CSS3のアニメーションバナー
ECサイト設置用にCSS3のアニメーションバナー、
作りました。 ※以下はDemo用ダミーです。
以下、サンプル用のソースを共有します。
<style> /* 基本設定 */ html, body { margin: 0; padding: 0; } body { font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size:16px; -webkit-text-size-adjust: 100%; } img{ border-width:0px; } .article{ font-size:16px; line-height:170%; } /*記事・カテゴリ中の画像調整*/ img.slide_arrow { max-width:100%; height:auto !important; } /* レイアウト設定 */ #arrowbutton { float: left; box-sizing: border-box; background-color:#fff; border-radius: 4px; margin-bottom: 30px; } .clear{ clear:both; } /*** ゆらゆらアニメーションバナー設定 ***/ @-moz-keyframes skew_button { 0% { -moz-transform: skewX(9deg); } 10% { -moz-transform: skewX(-8deg); } 20% { -moz-transform: skewX(7deg); } 30% { -moz-transform: skewX(-6deg); } 40% { -moz-transform: skewX(5deg); } 50% { -moz-transform: skewX(-4deg); } 60% { -moz-transform: skewX(3deg); } 70% { -moz-transform: skewX(-2deg); } 80% { -moz-transform: skewX(1deg); } 90% { -moz-transform: skewX(0deg); } 100% { -moz-transform: skewX(0deg); } } @-o-keyframes skew_button { 0% { -o-transform: skewX(9deg); } 10% { -o-transform: skewX(-8deg); } 20% { -o-transform: skewX(7deg); } 30% { -o-transform: skewX(-6deg); } 40% { -o-transform: skewX(5deg); } 50% { -o-transform: skewX(-4deg); } 60% { -o-transform: skewX(3deg); } 70% { -o-transform: skewX(-2deg); } 80% { -o-transform: skewX(1deg); } 90% { -o-transform: skewX(0deg); } 100% { -o-transform: skewX(0deg); } } @-webkit-keyframes skew_button { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); } } @-moz-keyframes skew_arrow { 0% { -moz-transform: translateX(0px); } 45% { -moz-transform: translateX(20px); } 50% { -moz-transform: translateX(25px); } 55% { -moz-transform: translateX(20px); } 95% { -moz-transform: translateX(0px); } 100% { -moz-transform: translateX(0px); } } @-o-keyframes skew_arrow { 0% { -o-transform: translateX(0px); } 45% { -o-transform: translateX(20px); } 50% { -o-transform: translateX(25px); } 55% { -o-transform: translateX(20px); } 95% { -o-transform: translateX(0px); } 100% { -o-transform: translateX(0px); } } @-webkit-keyframes skew_arrow { 0% { -webkit-transform: translateX(0px); } 45% { -webkit-transform: translateX(20px); } 50% { -webkit-transform: translateX(25px); } 55% { -webkit-transform: translateX(20px); } 95% { -webkit-transform: translateX(0px); } 100% { -webkit-transform: translateX(0px); } } .a-btn { position: relative; display:block; width:100%; max-width:600px; padding:10px; padding-left:10%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-left:auto; margin-right:auto; } .shake { -webkit-animation-duration:2s; -moz-animation-duration:2s; -ms-animation-duration:2s; -o-animation-duration:2s; animation-duration:2s; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; margin-left:auto; margin-right:auto; z-index: 8; -webkit-animation-name: skew_button; -moz-animation-name: skew_button; -o-animation-name: skew_button; animation-name: skew_button; width:90%; } .slide_arrow { position: absolute; top:30%; left:-5px; -webkit-animation-duration:1s; -moz-animation-duration:1s; -ms-animation-duration:1s; -o-animation-duration:1s; animation-duration:1s; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: skew_arrow; -moz-animation-name: skew_arrow; -o-animation-name: skew_arrow; animation-name: skew_arrow; z-index: 9; width:20%; max-width:100px; } .a-btn:hover img{ opacity:1; } p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } </style>
<div id="arrowbutton"> <p><a class="a-btn" href="#" target="_blank" rel="nofollow"><img class="slide_arrow" src="画像ファイル01" alt="" width="100"><img class="shake aligncenter" src="画像ファイル02[f:id:sntkk3:20170406231359p:plain]" alt="" width="500" height="120"></a></p> </div><!--#arrowbutton-->
バナーデザイン 参考サイト
ついでにと言っては何ですが、
以下、バナーデザインの参考になるサイトです。
バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ） :
http://aka-design.sub.jp/bd/
Webサイト解析の第一歩、Google Analyticsの設置・導入方法
今日は、新しく作ったサイトに Google Analytics を設置するなどの作業を行っておりました。
Google Analyticsとは
公式サイト： https://analytics.google.com
Googleが提供するアクセス解析ツールのことです。
サイトに導入(※)すると、サイト訪問者の動向・属性などを知ることができるようになる、とても便利なマーケティングツールです。
※トラッキングコードと呼ばれる専用のコードをサイトに埋め込むと、自身のAnalyticsサイトで各種データを確認することができるようになり、サイトの効果測定・改善に大いに役立ちます。
有料版もありますが、無料からでもサイト分析に充分すぎるほどのデータが得られます。
たとえば、アナリティクスの収集結果から、次のようなことが明らかになります。
例).
- どれくらいの人がサイトに訪問しているか
- どのページがどれくらい閲覧されているか
- どういったデバイスからサイトが閲覧されているか
- サイトを訪問しているユーザー属性(年齢層、性別)はどうか
- サイトの滞在時間はどれくらいか
など、
では、以下よりその設置方法についてお伝えします。
取得・設置方法
前提：Googleアカウントが必要です。
1) トラッキングID・コードの取得
1. ブラウザで以下アドレスにアクセスhttps://analytics.google.com
2. Googleアカウントでログイン
3. Googleアナリティクス使用開始申し込みを実行(初回のみ)
4. 設置サイトのための新しいアカウントを作成
4.1. 以下必要項目を入力
①アカウント名 ： 好きなアカウント名を設定
②ウェブサイトの名前 ： サイトタイトル
③ウェブサイトのURL ： サイトのURL(http://は入力不要)
④業種 ： サイトのジャンルを設定
⑤レポートのタイムゾーン： 「日本」を設定
「データの共有設定」は初期設定のままでOK
4.2. 「トラッキングIDを取得」ボタンをクリック
5. 利用規約確認画面の内容を確認し、「同意」ボタンをクリック
※利用規約画面左上の国名で「日本」を選択すること
以上を経て、晴れてトラッキングID、トラッキングコードの取得完了です。
2)トラッキングコードをサイトに設置
1. 以下管理アイコンをクリックし、管理画面を表示
2. 先程作成したアカウントのプロパティで「トラッキングコード」をクリック
3. 「ウェブサイトのトラッキング」にある、トラッキングコードをコピー
4. 設置したいサイトのheadタグ終了直前の箇所に貼り付け
設置は以上で完了です。
補足
上記設置作業に問題がなければ、設置から1～2日後にはサイトのデータが確認できるようになります。
ちなみに、このはてなブログの場合、
ダッシュボード ＞ 設定 ＞ 詳細設定 ＞解析ツール の 「Google Analytics 埋め込み」にトラッキングIDを入力するだけで設置完了です。
以上、ご参考まで。
CSSのみで簡単実装 ハンバーガーメニューの作り方
スマホサイトでおなじみ、ハンバーガーメニュー
今日は、CSSのみで実装可能、
開閉動作付きハンバーガーメニューを作成しました。
以下、このたびのソースを公開しておきます。
ソース公開
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="/css/style.css" type="text/css" /> <script></script> </head> <body> <div id="search"> <h2 class="search">条件を選んで絞り込む</h2> <input type="checkbox" name = "checked"class="menuopen" id="checked"> <div class="codecontent"> <fieldset class="members"> <legend>条件</legend> <ul> <li><input id="members01" type="checkbox" name="members[]" value="members01"><label class="check" for="members01">条件1</label></li> <li><input id="members02" type="checkbox" name="members[]" value="members02"><label class="check" for="members02">条件2</label></li> <li><input id="members03" type="checkbox" name="members[]" value="members03"><label class="check" for="members03">条件3</label></li> <li><input id="members04" type="checkbox" name="members[]" value="members04"><label class="check" for="members04">条件4</label></li> </ul> <span class="select"> <select name="members_sp"> <option value="members_all">こだわらない</option> <option value="members01">条件1</option> <option value="members02">条件2</option> <option value="members03">条件3</option> <option value="members04">上記以外</option> </select> </span> </fieldset> </div><!--.codecontent--> </div><!--search--> </body> </html>
CSS
<style> ul { list-style: none; } /******************** search ********************/ #search { width: 100%; margin: 0; padding: 15px 0 2px; background: #bafef8; box-sizing: border-box; } #search h2.search{ background: #fff; border-radius: 10px; box-sizing: border-box; font-size: 26px; font-weight: bold; padding: 16px; margin: 0 auto; position: relative; width: 800px; } #search h2.search:before { content: ""; border: 15px solid transparent; border-top: solid 20px #fff; position: absolute; left: 20px; bottom: -35px; } /***************** menuopen button ********************/ /*@media screen and (max-width: 480px){*/ #search_form{ width: 90%; } div.codecontent { display:none; } #checked:checked ~div.codecontent { display:block; } input.menuopen { display: block; position:absolute; top: 48px; right: 60px; } /*チェックボックスを消す*/ .menuopen { -webkit-appearance: none; -moz-appearance: none; border-width: 0; width: 0; height: 0; outline:0; } .menuopen:focus{ outline:0; } .menuopen:before,.menuopen:after{ position: absolute; content: ""; display: block; height: 8px; width: 40px; border-top-style: solid; border-bottom-style: solid; } .menuopen:before{ top: 2px; border-top-width: 4px; border-bottom-width: 2px; border-color: #000; } .menuopen:after{ top: 16px; border-top-width: 2px; border-bottom-width: 4px; border-color: #000; } /*閉じるボタン*/ .menuopen:checked:before, .menuopen:checked:after { top: 14px; height: 0; } .menuopen:checked:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg) } .menuopen:checked:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } </style>
《参考サイト》
jQueryを使った開閉式スライドトグル＆フェードトグル（slideToggle, fadeToggle） – Diglog :
http://diglog.org/javascript/943.html
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ | NxWorld :
http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html
メニューの三本線「ハンバーガーメニュー」を HTML と CSS だけで実装する方法 :
https://jquery.nj-clucker.com/humberger-menu-by-html-css/
ハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」！ ｜ Web Design Magazine :
http://webdesignmagazine.net/html-css/hamburgers/
CSS3とjQueryで作る「開閉に合わせて×ボタンに変化させる」ハンバーガーメニュー | クリエイタークリップ :
https://creatorclip.info/2015/06/css3-jquery-hamburger-menu-cross-mark-toggle/
