2016年8月 – AGN Web!

Wixの新機能を試してみました

Wix Editor

無料で使えるWebサイト作成ツール「Wix」。
自由度の高いレイアウトや、アニメーションなどの目を引くデザインが、コードをいっさい書かなくても簡単に実装できてしまいます。

Wix.com
http://ja.wix.com/

数ヶ月前にWixでWebサイトを作ることがあった時にも、その簡単さに驚いたのですが、それからもどんどん新しい機能が追加され、より多岐にわたったデザインを作ることができるようになりました。

その新機能の中でも特に気になった２つ。8月に実装されたばかりの新しいスクロールエフェクトと、全画面に対応したカラムレイアウトについて、今回はご紹介します。

続きを読む Wixの新機能を試してみました

WordPressで画像情報を個々に取得する。

どうもKazです。

WordPressで画像を扱う際に、画像のalt、キャプション(caption)、説明(description)を個別に引用する事がありました。
altはともかく、キャプションや説明の欄を使う事が今まで無かったのでネットで調べてみると、以外と個別に取得する方法を書いている方が見当たらなかったので自分のメモ代わりの為にも書いておこうと思います。

WordPressで画像を扱う際にIDを持たせるかURLを持たせるか考える事があるかと思いますが、画像からイロイロと情報を引き出す場合はIDを持たせた方が使いやすいと思います。

さて、画像はIDで持つ事にして、その画像の情報はドコにあるのかと言うと…
WordPressのDBは『メディア用』『投稿用』『カスタム投稿用』などキレイに分かれておらず『ごった煮』状態になっていますので探すのは大変なのですが

.wp_postmeta
（meta_IDをキーにpost_IDやはaltなどがあります）

.wp_posts
（IDをキーに、キャプション、説明などがあります）

この2つのDBの中に入っています。
※画像に情報を書き込み、AdminerプラグインなどDB内を確認してみてください。

それぞれの記録状態がわかったので
画像のIDをキーとして取得する方法を説明致します。

【altの取得】




		
		
			
			

			
			$wp_alt = get_post_meta( 画像ID , '_wp_attachment_image_alt', true )
			
				
					
				
					1
				
						$wp_alt = get_post_meta( 画像ID , '_wp_attachment_image_alt', true )

※altに関しては定番ですので、説明は不要かと思います。

キャプション(caption)、説明(description)の取得
前に説明した通りwp_postsの1レコードに書き込まれていますので、その1レコードを全部取得してから必要な情報のみ取得します。

【該当レコードの取得】




		
		
			
			

			
			get_post( 画像ID )
			
				
					
				
					1
				
						get_post( 画像ID )

これでIDに紐付けされたレコードが取得できます。
取得できる項目が23項目ほどありますが
その中で

キャプション = post_excerpt
説明 = post_content
タイトル = post_title

以上の項目で持っています。
ちなみに、こんな物もあります。

投稿のタイプ(画像のみ) = post_type
オリジナル画像のURL = guid

では、早速alt以外の項目も取得していきましょう。

【画像情報の取得】




		
		
			
			

			
			$wp_rec = get_post( 画像ID )
// キャプション
$wp_caption = $wp_rec->post_excerpt;
//　説明
$wp_discts = $metas->post_content;
			
				
					
				
					1
2
3
4
5
				
						$wp_rec = get_post( 画像ID )
// キャプション
$wp_caption = $wp_rec->post_excerpt;
//　説明
$wp_discts = $metas->post_content;

これで画像IDから基本的な情報が取得できました。

連続で取得する場合は、画像IDを配列に持ってループさせ
各情報も配列で持てば扱いやすくなるとおもいます。

安い独自SSLの使えるサーバーについて

近年急激に安くなった独自SSL。Googleが検索順位に影響するよ！と言い始めてからにわかに注目を集めています。かつて安いSSLと言えば、サーバー会社の提供する共用SSLがほとんどでしたが、昨年あたりから年数千円単位の格安の独自SSLサービスが出てきました。サーバーを契約すれば、無料で使えるエックスサーバーのようなサービスもあります。2016年8月現在、有名処のサーバーの独自SSLサービスを調べてみました。

格安SSL証明書について
証明書の信頼性云々もさることながら、色々制限もあります。
・格安SSLの場合、SSLの持ち込みはできないケースがほとんど。サーバー会社とセットで利用する形態になる。
・ドメイン認証型のため、利用できるブラウザに制限がある。ざっくり言うと古いブラウザでは表示できない可能性あり。更にざっくり言うとガラケーは弾かれる可能性大。その代わりに審査が簡単で即日利用できるようになるなど、安い以外のメリットもあり。

■さくらインターネット

証明書　Rapid SSL
価格　年1500円

詳細：さくらのSSL　https://ssl.sakura.ad.jp/

コンパネから申し込んで、即実利用可能。

■ロリポップ/ヘテルム

証明書　GlobalSign クイック認証SSL
価格　ロリポップ年20000円　ヘテルム年18000円

詳細：ヘテルム　独自SSL　https://heteml.jp/option/ssl/

GMOグループグローバルサインのSSLを提供。流行の格安SSLは提供していない模様。

■お名前.com/Xrea/CORE server/Value server

証明書　アルファSSL
価格　年1200円

詳細：バリューサーバー　独自SSL　https://www.value-domain.com/pr/ssl/

月額換算で100円とかなり安い。アルファSSL自体もGMOグループ。そう考えるとロリポップでアルファSSLを扱うのも時間の問題か。

■ファーストサーバー（Zenlogic）

証明書　Let’s Encrypt
価格　0円

詳細：Zenlogic無料SSL　https://zenlogic.jp/option/ssl/letsencrypt.html

いつの間にやらクラウドサーバーがサービスの主になっていたファーストサーバー。法人・個人事業主に限定されるが、無料でSSLを提供している。

■エックスサーバー

証明書　Let’s Encrypt
価格　0円

詳細：エックスサーバー独自SSLについて　https://www.xserver.ne.jp/functions/service_ssl.php

弊社も利用中。ファーストサーバーと同じく、Let’s Encryptの証明書。
サーバー契約者なら無料・無制限で取得出来るので、割り振っているドメイン全てをSSLに対応させることが可能。

■カゴヤ・ジャパン

証明書　Rapid SSL
価格　年9180円（上位プラン契約で無料）

詳細：カゴヤジャパンSSLサーバー証明書　https://www.kagoya.jp/ssl/

契約をしていれば、１つだけ無料で使える。

色々見てきましたが、現状アルファSSLとLet’s Encryptの2択です。Googleの検索順位も荘ですが、アプリとサーバー間の通信もSSL必須とされてきているので、今後需要はますます高まるのは間違いないでしょう。
各サーバー会社の格安独自SSLは、今春あたりから急速に広まってきたものなので現在様子見ですが、問題なければ積極的に導入していきたいサービスです。

Contact Form 7でアンケートフォームを設置

仕事でアンケートフォームを付けることになりそうなので、Contact Form 7での設置方法を整理して文章にしてみました。アンケートとしては小規模なものを想定しています。（回答数100未満くらい）

使ったプラグイン

Contact Form7
執筆時version4.5

導入方法は割愛します。ダッシュボード→プラグインからさくっと入れてください。
日本語対応しているので安心です。

cf701

フォームの設置（基本）

はじめて使う人は、基本となる問合せフォームを設置してみましょう。
ダッシュボードの左メニューお問い合わせからコンタクトフォームを選びます。
コンタクトフォーム 1としてサンプルが初めから入っています。 cf702

貼り付け用の固定ページを用意しておきます。（記事でも構いません。）
本文にショートコードを貼ります。 cf703

完了です！簡単です。 cf704

実際にフォームに入力して送信すると、WordPressの管理者宛にメールが届きます。

アンケートフォームを作る

色々項目を増やしてアンケートフォームを作っていきます。
新規追加でフォーム追加画面を出します。↓最初の状態。
cf705

最初から基本的な部品は入っていますので、これを参考に付け足していきます。
今回はサンプルとして以下のようなアンケートを組み立ててみます。
フォーム下のボタンを押すとダイアログがでますので、必要項目をいれて挿入ボタンを押します。
今回は4つの質問を作ります。以下に記入例を挙げますので参考にしてください。

Q1 WordPressをセットアップしたことがある。
ある　ない
→ラジオボタン cf711

Q2 どこにセットアップしましたか？
レンタルサーバー　ローカルPC　専用サーバー　ローカルサーバー
→チェックボックス cf712

Q3 現在WordPressサイトの管理をされていますか？
している　いない
→ラジオボタン cf713

Q4 最もプラグインの多いサイトで何個入ってますか？
0～10　11～20　21～30　30個以上
→ドロップダウンメニュー cf714

個人情報
・名前・メール・メッセージ
→デフォルトのまま

例と同じように<label>タグ内にフォームの要素を含むとエラーが出ますので、見出しのみを囲むようにします。このあたりはデザインとの兼ね合いもあるので、任意で処理してください。<label>タグは必須ではありません。

個人情報部分は、標準の物をそのまま流用します。アンケートとしては不要なので題名を消しました。必須項目もそのままです。アスタリスクの有無で判別されます。
この段階で保存して固定ページにショートコードを貼り付け、見てみましょう。

cf706

もっともらしい、アンケートフォームができているはずです。
しかし、このままでは新規で追加した項目のデータを受け取ることができません。
受け取るための設定を追加してやります。

受信メールの設定

メールのタブを開いて受信メールの内容を書いていきます。受け取りに使いたいメールアドレスもこちらで設定します。
cf707

題名は消したので、[your-subject]は消します。
そして本文に追加したフォームのメールタグを追加して行きます。
追加出来るタグは上部に表示されているので、見ながら書き込みます。↓例です。
cf709

書いたら忘れずに保存を。

これで設定完了です。
回答者にもメールを送るには、メール（2）にチェックを付けて、同じように本文を書いていきます。回答や個人情報の控え、簡単なお礼、運営の署名などを記載しておくとよいでしょう。

表示メッセージの設定

Contactform7の仕様上、フォームの送信時に確認画面は出ません。
代わりに任意の送信完了のメッセージを出すことができます。
これはメッセージタブで設定します。
また、エラーの時の表示メッセージもこちらで設定可能です。
cf710

これでアンケートフォームは完成です。
実際の運用には、個人情報の取扱いなどもしっかり記載した方がよいでしょう。
より作り込むなら
・メールをWordPressのDBで管理する
・送信前に確認画面を出す。
などを別のプラグインを追加することで対応できます。

また、もっと大規模にアンケートを採るなら、
集計機能のあるアンケート専用のプラグインを使うとよいでしょう。
予算に都合が付くならSSLにも対応したいですね。

※以下に動作サンプルを設置しました。よろしければご回答ください。

続きを読む

IFTTT使って自動でGoogleスプレッドシートに記録していく

Googleスプレッドシートを使ってますか？
仕事していると必須なExcelですが、職種によってはあのセルが並んでいる画面を見るのも嫌だっていう人がいるのも事実。
使ってみると、それはそれで便利なものですよ。
そんなExcelをブラウザ上で使うことができるGoolgeスプレッドシートを上手に活用すると、作業の効率アップに繋がるかもしれません。

例えばブログメディアを運用していると、記事のリストを作りたいときってないですか？
上司に急に言われて月間の更新数を出したり、Google Analyticsのレポートを作るときに記事の情報が必要だったり。
必要になってから慌てて作るよりも、ブログを更新したら自動的に記録できたら楽ですよね。
そんなときのIFTTTです。

IFTTTの説明はこちらでご紹介しています。
– IFTTTを使っていろんなサービスと連携(例えばTwitterからFacebookにアルバムを作る)

ブログの更新記録を作る。

IFTTTのアカウントやチャンネルの登録は済んでいる前提でお話しします。

手順

チャンネルの登録は全部で7Stepあります。
全部英語の画面ですし、ちょっと多い気がするかもしれませんが、そんなに難しくないのでチャレンジしてみてください。

Step0：トリガー

「this」をクリックします。

Step1：チャンネルを選択する

トリガーとなるチャンネルを選択します。
今回は記事リストを作りたいので「RSS」を選択しました。チャンネルとなるサービスがたくさんあるので、検索ボックスを使って探すと早いです。

Step2：何をトリガーにするか

Step2ではStep1で選択したチャンネルで何が起きたらトリガーになるかを選択します。
チャンネル「RSS」では、「New feed item」「New feed item matches」の2種類を選ぶことができます。今回は「New feed item」を選択しました。

Step3：アクション

「that」をクリックします。

Step4：チャンネルを選択する

アクションさせるチャンネルを選択します。
Googleスプレッドシートを使いたいので、「Goolge Drive」を選択。

Step5：どんなアクションをするか

Step4で選択したチャンネルで何が起きたらトリガーになるかを選択します。
Googleスプレッドシートに行を追加して行くので「Add row to spreadsheet」を選びます。

Step6：何をするのかを選択する

Step6で選択したアクションの具体的な中身を決めて行きます。
内容は選んだチャンネルによって変わってきます。

この例では入力できる項目が3つあります。
「Spreadsheet name」はスプレッドシートの名前、「Formatted row」には記録する項目、「Drive folder path」はスプレッドシートまでのパス(フォルダー構成)です。
準備できたら「Create Action」をクリック。

Step7：確認・登録

最後に確認画面です。
ここでこのレシピのタイトルを変更することもできます。
OKだったら「Create Recipe」をクリック。
これでこのレシピがマイチャンネルに登録されました。

手順は多そうに見えますが、ポチポチクリックしていくだけなのであっという間です。

完成イメージ ※画像はイメージです

これでブログを更新すると自動的にGoogleスプレッドシートに行が追加されていきます。
日付でソートしていったりエクセルと同じように使えるので、リスト管理が一気に楽になりました。

実はバックアップの代わりにもできる？

これのおもしろいところは、WordPressのRSSをトリガーにしていたりすると、本文がHTMLの文字列で保存されるというとこですね。
なので、簡易的なバックアップのかわりにもできます。
もちろんDBのバックアップや画像ファイルなどはダウンロードできていませんが、あくまで簡易的に。
記事データだけ加工して使いたいとか言う時は便利かもしれません。

方法はStep6で記録するデータの中に「EntryContent」を含めればOKです。
入力エリアをクリックしてアクティブにすると、ボックスの右上に青いフラスコのアイコンが表示されるのでクリック。

セレクトボックスが表示されるので、使いたい項目をクリックすればOKです。

他のトリガーでもいろいろできる

今回はトリガーをRSSにしましたが、他のトリガー使ってGoogleスプレッドシートにリストを作っていくことができます。
ここからはアイディア次第です。
TwitterをトリガーにLikeしたツイートだけのリストを作るとか、Feedlyで後で読むにしたものをリストにしておくとかできそうです。

何でもかんでもGoogleスプレッドシートでリスト化するのがいいとは思いませんが、やっぱりリストって何かとあると便利ですし、それを自動でやれるならそちらの方がずっと楽でいいと思います。
リストを作るのって時間を取られたりするし、だったらその時間を別な何かに回すことができますから。

以前にGoogleフォームの結果をGoogleスプレッドシートに記録するっていう記事も書きました。よろしければこちらもどうぞ。
– Googleスプレッドシートと連携！Googleフォームを使ってみた。