Bloggerを使って、会社のホームページを作る場合の、構築できる機能を紹介します。
カレンダー/スケジュール
Googleカレンダーを使う方法は非常に簡単で、そのGoogleアカウントのGoogleカレンダーの設定をして、iframeタグを記事や固定ページに貼り付けるだけです。
1. Googleカレンダーを開いて設定に移動する
左下にリストアップされているカレンダーリストから、公開したいカレンダーの縦三点リーダーをクリックして、「設定と共有」を選択します。
2. カレンダーの書き込みができる他のアカウントを共有する
「ユーザーやグループを追加」をクリックして、複数のアカウントが登録できます。
普段自分が使っているGoogleアカウントなどがあれば、共有に登録をしておくと、便利にカレンダーの書き換えができるようになります。
「権限」の箇所を「変更および共有の管理権限」にしておくと、管理者としての作業ができるようになるので便利です。
3. 公開設定
公開設定をして、表示を整えると、設定完了です。
カレンダーの設定画面の「予定のアクセス権限」の「一般公開して誰でも利用できるようにする」にチェックを入れます。
警告ダイアログが出ますが、「OK」を押します。
次に「カレンダーの統合」箇所の「埋め込みコード」のすぐ下にある「カスタマイズ」をクリックすると別タブに画面が切り替わります。
一緒に表示するカレンダーを選択して、表示を切り替えて整えると完了です。
画面上部に表示されているiframeタグをコピペして、記事や固定ページに貼り付けましょう。
登録したページでiframeのstyleでwidthを100%にしておくことで、スマートフォンでみても画面からはみ出ることはなくなります。
出来ないこと
残念ながら、柔軟なデザインに対応することはできません。
その場合は、API連動するプログラミングで対応する方法などがありますが、今回は簡易な方法のみの紹介をしておきます。
アクセスマップ
言わずとしれた、GoogleMapをホームページ内に埋め込むだけなのですが、非常に簡単にできるので、やり方だけは覚えておきましょう。
1. GoogleMapサイトにアクセス
GoogleMap
2. 地名や住所で地図を表示
他にも、郵便番号や会社名などでも表示される場所もあるので、改めてGoogleMapの検索幅の凄さがわかります。
3. ピンをクリックして共有ボタンをクリック
4. 地図を埋め込むタブのHTMLをコピをクリック
5. コピーしたiframeタグを記事に貼り付け
最後は、カレンダーと同じく、記事や固定ページに、iframeタグを貼り付ければ、ページ内の埋め込みは完了です。
お知らせ
お知らせ機能は、運用担当者の人が使いやすいように、記事リストを使って対応します。
1. お知らせ記事を登録する。
「お知らせ」ラベルを必ず付けてください。
2. お知らせ記事取得をするjavascript処理を追加
<script>/*<![CDATA[*/
function feed(url){
const s = document.createElement('script')
s.src = url
document.body.appendChild(s)
}
function get_info_elm(){
return document.getElementById('info')
}
function info(json){
if(!json || !json.feed || !json.feed.entry || !json.feed.entry.length){return}
const elm = get_info_elm()
if(!elm){return}
for(const data of json.feed.entry){
if(!data.link || !data.link.length){continue}
const href = data.link.find(e => e.rel === 'alternate')
if(!href){continue}
const title = data.title['$t']
const html = '<li><a href="'+ href.href +'">'+ title +'</a></li>'
elm.insertAdjacentHTML('beforeend' , html)
}
}
/*]]>*/</script>
テーマカスタマイズのxmlのheadタグ内に、このソースを追記してください。
3. お知らせスクリプトを起動する処理を追記
<ul id='info'></ul>
<script>
feed('/feeds/posts/default/-/%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B?alt=json&callback=info&orderby=published')
</script>
記事ページに上記のソースを書くと、id='info'の箇所に、お知らせ記事のタイトルが表示されます。
（ページ読み込みから1秒ほど時間差で読み込まれます）
お問い合わせ
1. GoogleFormでお問い合わせフォームを作成
全ての項目を、「記述式」にして、必須は付けないようにしましょう。
※改行が入るtextareaの項目は、「段落」のセットをしてください。
ラジオボタンやチェックボックス、セレクト項目などは、ホームページ内で記述して、必須項目はHTMLのinputタグなどに、required属性をつけて対応できるので、GoogleFormでは、シンプルな構造で作成しておきます。
回答をスプレッドシートに書き出す設定をしておきますしょう。
2. 固定ページにお問い合わせページを作成
<div class='contact'>
<h1>お問い合わせフォーム</h1>
<form method='post' name='contact'
action='%ご自身のGoogleFormのアドレス/formResponse'
target='complete'
onsubmit='window.submitted=true'>
<div class='group' data-require="1">
<div class='require'></div>
<span class='caption'>何に関するお問い合わせですか？</span>
<div class='form'>
<div class='inputs'>
<select name='entry.972129934' required>
<option value='このサイトの内容について'>このサイトの内容について</option>
<option value='誤字脱字の報告'>誤字脱字の報告</option>
<option value='技術的な質問'>技術的な質問</option>
<option value='その他'>その他</option>
</select>
</div>
</div>
</div>
<div class='group' data-require="1">
<div class='require'></div>
<span class='caption'>名前</span>
<div class='form'>
<div class='inputs'>
<input type='text' name='entry.1939968703' placeholder='名前' required>
</div>
</div>
</div>
<div class='group' data-require="1">
<div class='require'></div>
<span class='caption'>メールアドレス</span>
<div class='form'>
<input type='text' name='entry.628554344' placeholder='yourname@example.com' required>
</div>
</div>
<div class='group' data-require="1">
<div class='require'></div>
<span class='caption'>お問い合わせ内容</span>
<div class='form'>
<textarea data-name='message' placeholder='お問合せ内容を記入ください。' required></textarea>
<!-- <div class='caution'>お問い合わせ内容が入力されていません</div> -->
</div>
</div>
<div class='submit-area'>
<button class='submit-button' type='submit'>送信する</button>
</div>
</form>
</div>
<script type="text/javascript">
window.submitted = false;
</script>
<iframe
id="complete"
name="complete"
style="display:none;"
onload="if(window.submitted){location.href='/p/thanks.html'}">
</iframe>
<style>
form{
display:block;
width:90%;
max-width:800px;
border-radius:8px;
box-shadow:4px 4px 20px rgba(0,0,0,0.3);
margin:10px auto;
padding: 0 20px;
}
form > *{
/* margin:20px 10px; */
padding:20px 0;
}
form > * + *{
border-top:1px solid rgb(200,200,200);
}
form .group{
display:flex;
}
form .group > *{
margin:0 10px;
}
form .group .require{
width:70px;
}
form .group .require::before{
content:"";
display:inline-block;
width:60px;
padding:5px;
border-radius:4px;
color:white;
text-align:center;
font-size:0.8rem;
}
form .group[data-require="1"] .require::before{
content:"必須";
background-color:red;
}
form .group[data-require="0"] .require::before{
content:"任意";
background-color:#337ab7;
}
form .group .caption{
display:inline-block;
width:120px;
padding:5px 0;
white-space:pre-wrap;
word-break:break-all;
font-size:0.9rem;
}
form .group .form{
width:calc(100% - 120px - 60px);
-webkit-flex-grow: 1;
flex-grow: 1;
font-size:0;
}
form .group .form *{
width:100%;
font-size:16px;
}
form .group .form .inputs{
display:flex;
}
form .group .form .inputs > *{
display:inline-block;
--size-input-margin:4px;
margin:0 var(--size-input-margin);
}
form .group .form *::placeholder{
font-size:0.9rem;
color:rgb(180,180,180)
}
form .group .form input[type="text"],
form .group .form select,
form .group .form textarea{
-webkit-appearance : none;
appearance : none;
border:1px solid rgb(180,180,180);
border-radius:4px;
padding:5px;
}
form .group .form textarea{
height:150px;
resize:vertical;
}
form .submit-area{
text-align:center;
}
form .submit-area button{
display:inline-block;
padding:10px 20px;
background-color:#337ab7;
border:1px solid #2e6da4;
color:white;
border-radius:4px;
cursor:pointer;
}
form .submit-area button:hover{
background-color:#2e6da4;
}
form .group .form .caution{
display:none;
color:red;
font-size:0.9rem;
margin-top:5px;
padding:0 5px;
}
form .group[data-caution='1'] .form .caution{
display:block;
}
.contact .summary{
width:100%;
max-width:500px;
margin:20px auto 50px;
border:1px dashed rgb(200,200,200);
padding:20px;
}
@media (max-width: 768px){
form{
padding:0 40px;
}
form .group{
display:block;
}
form .group > *{
width:100%!important;
margin:0;
}
form .group .caption{
white-space:normal;
}
}
@media (min-width: 600px) and (max-width: 700px){
form .group{
--size-require-width:60px;
display:block;
}
form .group .require,
form .group .caption{
display:inline-block;
margin-bottom:10px;
}
form .group .require{
width:var(--size-require-width);
}
form .group .caption{
width:calc(90% - var(--size-require-width));
white-space:normal;
}
form .group .form{
width:calc(100% - 20px);
}
}
</style>
foormタグのaction属性は、GoogleFormのプレビュー表示のURLの"/viewform"の箇所を"/formResponse"に書き換えてください。
また入力項目それぞれのname属性は、GoogleFormのプレビューページのソースコードで、"entry."を検索してください。
GoogleFormで登録された順に並んで表示されるので、そのname属性値を、inputなどの入力項目のname属性にコピペしてください。
※ソースコードはブラウザコンソールを使うと便利です。
登録した固定ページは、管理画面の「レイアウト」でヘッダメニューに登録しておきましょう。
3. thanksページの登録
固定ページにお問い合わせを送信した後の、サンクスページを作っておきます。
タイトルを"thanks"としておくと、/p/thanks.htmlのURLでアクセス出来るようになるので、送信完了後にそのページに遷移するという仕組みです。
4. スプレッドシートでお知らせ投稿時にメール送信をするように設定
最初にセットしたGoogleスプレッドシートで、下記の遷移で選択をします。
「ツール」 - 「通知設定」 - 「通知を編集」 - 「通知を追加」
これでお問い合わせがあったタイミングを見逃すことが無くなるはずです。
商品一覧
お知らせと似たようなコードで実現できます。
1. 記事に商品を登録
次のような感じで、ブログの記事に商品を1個ずつ登録します。
この時に、「商品」というラベルを付けておくのがポイントです。
サンプルのリストでは、スィーツばかりですが、商品ジャンルやカテゴリーがある場合は、ラベルを追加して、グループ判別することも可能です。
※今回のサンプルコードでは対応していませんが・・・
2. テーマカスタマイズのXMLを更新
#products{
width:100%;
}
#products li a{
display:flex;
gap:20px;
align-items:center;
padding:10px;
width:100%;
}
#products li+*{
border-top:1px solid #ddd;
}
#main .contents #products img,
#main .contents #products .empty-image{
width:72px;
height:72px;
}
#products .empty-image{
background-color:#ddd;
}
function get_products_elm(){
return document.getElementById('products')
}
function products(json){
if(!json || !json.feed || !json.feed.entry || !json.feed.entry.length){return}
const elm = get_products_elm()
if(!elm){return}
console.log(json.feed.entry)
for(const data of json.feed.entry){
if(!data.link || !data.link.length){continue}
const href = data.link.find(e => e.rel === 'alternate')
if(!href){continue}
const title = data.title['$t']
const date = data.published['$t']
const thumb = data.media$thumbnail.url
let html = `<li><a href="'+ ${href.href} +'">`
html += thumb ? `<img src='${thumb}'/>` : `<div class='empty-image'></div>`
html += `<div>${title}<br>${date}</div>`
html += '</a></li>'
elm.insertAdjacentHTML('beforeend' , html)
}
}
3. 固定ページを作って起動するscriptタグを追加
<h2>商品一覧</h2>
<ul id='products'></ul>
<script>
feed('/feeds/posts/default/-/%E5%95%86%E5%93%81?alt=json&callback=products&orderby=published')
</script>
上記をセットすると、次のように表示されます。
レイアウトのヘッダメニューリストに、「商品一覧」の固定ページを追加するのを忘れないようにしましょう。
Bloggerでできないこと
gitなどのバージョン管理
・xml
バックアップ
自身でそれぞれの機能に対して行う。
・xml（レイアウトなどの設定内容含）
・記事や固定ページの個別ページコンテンツ
ソースコードサンプル
今回紹介した機能を全部入りにした、テーマxmlをgithubにアップしておきました。
便利にcloneしてお使いください。
