ホームページ制作関連

夏のような５月ですね。うちの庭では
遅咲きのクレマチスが、たくさんつぼみを付けている
タイミングです。
さて、非推奨APIだった、昨年末に、V2のカレンダー
3年間サポートが終了していたのですが、
久しぶりに、施設のスケジューリングに、
カレンダーのカスタマイズ案件があったので、
APIの対応について、まとめてみました。
よくある Full Calendar を使っているのですが、
V3対応にしてあげる。調整です。
基本的に、htmlソース内の JSに、
イベントを入れていってあげると、それも反映されるわけですが、
ここを CMS化するのは、また今度やることにして、
( っていうか、これをCMS化すると、増えるばかりで重くなるよね )
Google Calendar へのカキコを、
そのまま、独自のドメイン領域に、
デザインカスタマイズして、
もちろん、見た目 + 色なんぞ変化させて、反映させるわけです。
つまり
Googleの吐き出す、インラインフレームを貼り付ける。
というカレンダーではないですヨ。
============
A 、
■ 先ず、カレンダーに使うアカウントでログインします。
■ デベロッパーのコンソール
APIを 動かしておきます。
https://console.developers.google.com/
・google カレンダーのapiキーを取得しておく。
・カレンダーを置くドメインをブラウザ指定しておく。
( ブラウザは複数設定可能 )
B 、
■ Google Calendar は、
まず、デフォルトでないカレンダーを別に作っておきます。
https://www.google.com/calendar/
・カレンダーIDを確定させておく。
・カレンダー設定から、一般公開にしておきます。
( 一般公開のすぐ下の、サブのチェックは入れない )
コレ、入れると今回のカスタマイズでは動かない。
C 、
■ fullCalendarで、設定してあげる。
・ fullCalendarの最新を DLしておく。
・ V3に対応させたコードをJSにかきかえてやる。
apiキー / カレンダーID / カレンダーの日本語化 / 日本の祝日なども設置
( 複数のカレンダーまとめ設置も可能 )
・タブレットでも見れるように JSを調整する。
D 、
■ カレンダーの見た目は、CSS設定する。
ThemeRollerなどのギャラリーからカスタマイズが簡単。

ThemeRoller

============
見た目は、G カレンダーじゃなくて、
イベントをクリックすると、ユーザーのG アカウントで見れるので、
ユーザーが自分のカレンダーに共有したり、できるわけです。
まぁ、そのあたりは従来どおりです。
新しい API対応の話でした。

そこで、第一法則の場合の、猶予圏は、
× 3倍なのですが、
あるキーワードでの リスティング出稿を
「 1 」 に対して 「 4 」 を、置いているということは、
圧倒する戦い方としては、正しいわけです。
逆に、
「 4 」に対して、圧倒的に勝つ為に必要な戦力は、
「 8 」では足らないことがわかります。
その予算を割くべきか、あるいは
そのシーンでは消耗戦 「 4 」 を同じく仕掛けておき、
活動を無効化しておくという考え方もあります。
そのうえで、別の手段で 奪取出来るシーンを用意する
という知恵が必要になりますよね。
———————-
第二法則は、広域戦で、まさしく
リスティングではビッグキーワードになる、
の戦いのようなものですが、
これは、猶予率が √3 倍 と、云われています。
「 1.7 倍以上の、シェアを離されていると、
まず、ひっくり返すことは出来ない 」のですね。
ゆえに、2倍 離されていると、
まず、仕掛けること自体が正しくないといえます。
———————-
だからこそ、
接近戦・1 : 1 に持ち込めるシーンまで細分化した土俵で、
戦う必要があるわけですね。
まぁこのように、
そういった AD words などの商品を管理したり、積極的に売る為のツールが、
GoogleANAなのであって、「 なぜ、無償で提供されている 」 のか、
不思議だなというご担当者は、お考えくださいね。
Googleは、ただ親切な会社。慈善事業。では決してないですね。
日本に居ると僕らは平和ボケしてるんで、
俺ってボケてんのかな～くらいに思いながら、
無償の仕組みを疑う姿勢は持っていきましょう。
つまり、やりたいときは、PPCの予算取りが先。
ということになりますね。

Google Analyticsについて、
新しい、ユニバーサルバージョンが話題になっています。
先日、数値の計測に興味のあるお客様とお話ししていて、
数値にしか興味のない方だったので、多少閉口しましたが、
今日は、アナログのシーンとのつながりの話です。
Offline Conversions
オフラインでのコンバージョン ?
というと、オンラインから離れる訳ですが、
簡単に言うとこういうことです。
————————-
まず最初に、
オンラインのフォームなどで、資料請求した方は、
Analyticsで計測している場合
AdWords 広告からウェブサイトへのアクセスにつながった
すべてのクリックに、「GCLID」と呼ばれる固有の ID が付与されるのですが、
広告をクリックしたユーザーから収集した顧客情報と一緒に
保存されるように設定しておきます。
後日、実際に購入などに至った場合の、お客様の情報を
売り上げ確認の段階で、
AdWords アカウントと突き合わせできるようにUp出来る。
★ 何がわかるの ?
どんなAdWordsでの集客が、
より価値の高い実際の販売につながったかの計測になります。
具体的には、車を買おうとしている方が、
Web広告から資料請求にたどりつき、カタログをDL、
( ここでも、個人情報をいただきますよね。 )
その後、店舗で試乗・購入時に、メールアドレスなどの
個人情報をいただき、「GCLID」などとつきあわせるパターンです。
まさしくオフラインなのですが、
オフラインの動きは、Analyticsともつながってくるよね。
ということでした。
うまく使えば、Webサーバー上の計測で終わらない可能性があるわけです。
集客・見込み客へのフック、リード・実際の接客シーンも、大切で、
数値しか重要性を感じない方は、置いて行かれる可能性がありますね。

イタリアン２店と和食１店の取材・打ち合わせ。
ランチの後、15時前後からが勝負時間なんですね。
ここから、シェフ・マスターは休憩なんで、
その休憩に入る寸前を狙って、話しに行きます。
和食の料理長は、午前に顔を見に行くときもあります。
今日はちょうどタイミング良く、２店撮影完了。
で、まだRAW現像中なんですね。
( RAWでしか撮影しません )
——————-
FM東京の、オシャレな某番組と同じ名前のイタリアンで、
( そこからもじってる )
コーヒーいただきながら
オーナーの息子さんのお話を聞かせてもらってました。
いろいろな人生があります。
今日は なんだか暖かくて、
カーデガンの上に、コートを着ていたので、
撮影・営業で汗だくになりました。
ディレクターは３役は当然。何でもやりますね。

ブロック要素を揃える方法は、色々とありますが、
やっかいなことのひとつですよね。
★ jQuery Equal Column Heights
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
どこまで使うか意見の割れる部分ですが、
オプションが色々とあるようです。
★ jQuery.heightLine.js
http://blog.webcreativepark.net/2013/10/21-112000.html
heightLine.js の新しいバージョンですね。
レスポンシブ対応と、オプションが充実しているようです。

CSSとほぼ同じ文法で書けるLESS。
CSSの拡張メタ言語と呼ばれるもので、
プログラミングの要領でCSSが書ける独自の言語です。
あらかじめ色を決定しておくと、関連するCSSを一度に色変更できるので、
記述が理解できると使い道が広がるんですね。
JavaScriptライブラリーがいくつかありますが、
基礎的な意味合いはこちらでも確認できます。
開発元 cloudhead氏のサイト
http://lesscss.org
日本語訳サイト
http://less-ja.studiomohawk.com
何か小さい案件で、パターン化できる場合に
利用してみると良いかもしれません。

企業や、中小の小売店・飲食店・美容室向けの開発で、
デザイン開発がいろいろとそろってきました。
多店舗展開されているグループ店や、
商工会議所関連のつながりでのご紹介も増加中。
お陰様で、地域を小さく絞ったエリアでの反響をいただいており、
テストケースとして営業展開も新ルートがいくつか決まりそうです。
以前にご案内いたしました店舗様も、
新しいバージョンの開発が進んでおりますので、
お楽しみにお待ちください。

さまざまなディスプレーサイズに合わせ、
背景画像を伸縮させるJSです。
一部分のみ、伸縮させながら、
さらにスライドショーにするのはよく見かけますが、
ディスプレーサイズに、吸着伸縮するものです。
SWFファイルを透過させ、
背景から浮かせて配置の制作例
SWFの height に対しては スクロールを当てている、
変則的なCSSです。
http://yumesaki.cherry-golf.com
一時期 はやりましたが、
背景画像が、伸びる際は、
どうしても甘い画像になってしまうので、
黒系の方形ドットを一面に敷いて、
コントラストをあげてやります。
30インチくらいの PC画面で見ると、
現場に居るかのような錯覚になります。
【 MaxImage 2.0 】
http://www.aaronvanderzwan.com/maximage/

通常は、ワイヤーフレームの後、
ラフ・デザインに入ります。
レスポンシブの場合は、
画面サイズをバリアブル ( 可変 ) と据えるので、
ピクセルパーフェクトとは考えず、
ラフもデザインもいらないかというと、
そうではないことの方が多いですよね。
具体的には、
まだまだイメージできないことが多いので、
デザインを共有しなければ、前に進めません。
——————-
うちの場合は、
通常のＰＣ向けデザインを確定させ、
レスポンシブ向けには、
大きく二種のラフを必ず描いています。
( ミーティングに使わない場合もある )
その後の、早い段階で、
コーディングしたプロトタイプを見せてしまう。
という流れです。
——————-
特に、Androidの画面設定は無限なので、
ＰＣ + レスポンシブという形式でも、必要とされますし、
Googleが 去年の六月、レスポンシブを推奨したことからしても、
強いサイトには必須になっていくんじゃないか。
と考えています。
Style Tiles で合意をとりまとめていく方法なども、
ラフデザインの段階でフォーマット化の予定です。
http://styletil.es
※ Style Tiles についてはコリスさんでも紹介されていました。

FCKEditorというと、老舗のテキストエディターですが、
http://ckeditor.com
IE10で、管理画面を見ると、
なぜかエディター自体が見えなくなって、
これ、使えないんじゃないのという状態になっていました。
この現象について、
まぁまぁ、モダンブラウザで使えばいいじゃないの。
と、木で鼻をくくるように考えていた ( 古いおっさんの私。
先日 酒宴の席で話題になったので、対応してみました・・・
【 基本的 問題点は… 】
IE10 というのは、初めて IEの二桁になった ブラウザ なんですね。
一桁のブラウザ名にしか対応していなかったシステムのようなので、
そのあたりを中心に、JS内を修正していきます。・・・
( 次の CKEditor も出ているので、それを使えよって話もあります。)
( 開発元の、Frederico Knabbenが修正しろよという話もあります。 )
( とか云っても、もう、FCKEditorでええやん。と思っている自分。 )
では、仕方がないので、変更してみましょう。
☆ 変更してあげる ( ２ファイル名 + 合計４箇所 )
【 fckeditor.js 】
var sBrowserVersion = navigator.appVersion.match(/MSIE (.¥..)/)[1] ;
これを
var sBrowserVersion = navigator.appVersion.match(/MSIE ([¥d.]+)/)[1] ;
=======================
【 fckeditorcode_ie.js 】
e.scopeName!=’HTML’
このあたりを
if(FCKBrowserInfo.IsIE&& e.scopeName && e.scopeName!=’HTML’)
————–
D.parentElement().document!=B
このあたりを
if(D.parentElement().document && D.parentElement().document!=B)
————–
B.open("GET",A,false);
このあたりを
B.open("GET",A,false);
try {
B.responseType = "msxml-document";
} catch(e) {};
B.send(null);
=======================
☆ 管理画面のドキュメントモードを下げる
<meta http-equiv=“X-UA-Compatible” content=“IE=8” />
XOOPS / WordPress / MOVABLETYPE
それぞれテーマとか、多少ファイルを見て。
=======================
こうやってあげたらよさげです。
でも、ソースや画像を挿入できるんで、
脆弱性が突かれやすそうなツールでもあるんですよね。