横浜で、ホームページ製作をしている自転車乗りの堅物。　横浜本田WEBブログ

2012年1月31日火曜日

【覚書】Googleマップのふきだしを消す。

さて、サイトでGoogleマップの地図を表示したい場合、表示したい住所で検索をした後、そのページのソースを貼りつければ、基本的には完了ですが。

この貼りつけたソースのままだと、検索住所の吹き出しが表示されていまいます。
まぁ、地図の大きさがそれなりの場合は、マップ登録して、店舗名称等の情報を表示すれば、それなりに見栄えのいい？ページに出来そうですが、表示さいずが小さい場合、この吹き出しが表示エリアから見切れてしまうので、なんともカッコ悪くみえます。

大きな地図で見る

300px×300pxのサイズで表示。
デフォルトの状態だと、吹き出しが見切れる…

これではあまりにも酷いので、なんとかこの吹き出しを消す方法はないのか？
と探したら、やはり有りましたね。
しかもお手軽です。

先ほどのソースコード
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&q=%E6%A8%AA%E6%B5%9C&aq=&sll=35.485834,139.66095&sspn=0.428276,0.617294&brcurrent=3,0x60185d2db5c8ae09:0xc208776b5141af0a,0&ie=UTF8&hq=&hnear=%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C%E6%A8%AA%E6%B5%9C%E5%B8%82&t=m&ll=35.44368,139.638033&spn=0.020978,0.025749&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps?f=q&source=embed&hl=ja&geocode=&q=%E6%A8%AA%E6%B5%9C&aq=&sll=35.485834,139.66095&sspn=0.428276,0.617294&brcurrent=3,0x60185d2db5c8ae09:0xc208776b5141af0a,0&ie=UTF8&hq=&hnear=%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C%E6%A8%AA%E6%B5%9C%E5%B8%82&t=m&ll=35.44368,139.638033&spn=0.020978,0.025749&z=14&iwloc=A" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

これに、</iframe>タグの直前に　&iwloc=B　を追加します。

<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&q=%E6%A8%AA%E6%B5%9C&aq=&sll=35.485834,139.66095&sspn=0.428276,0.617294&brcurrent=3,0x60185d2db5c8ae09:0xc208776b5141af0a,0&ie=UTF8&hq=&hnear=%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C%E6%A8%AA%E6%B5%9C%E5%B8%82&t=m&ll=35.44368,139.638033&spn=0.020978,0.025749&z=14&iwloc=A&output=embed&iwloc=B"></iframe><br /><small><a href="http://maps.google.co.jp/maps?f=q&source=embed&hl=ja&geocode=&q=%E6%A8%AA%E6%B5%9C&aq=&sll=35.485834,139.66095&sspn=0.428276,0.617294&brcurrent=3,0x60185d2db5c8ae09:0xc208776b5141af0a,0&ie=UTF8&hq=&hnear=%E7%A5%9E%E5%A5%88%E5%B7%9D%E7%9C%8C%E6%A8%AA%E6%B5%9C%E5%B8%82&t=m&ll=35.44368,139.638033&spn=0.020978,0.025749&z=14&iwloc=A" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

大きな地図で見る

と、こうなります。
吹き出しは消えましたね。

意外と使用頻度は高いネタですが、忘れない為の覚書です。

この記事の続きを読む»

2011年11月22日火曜日

Modx Jot改造　入力フォームを入れ替え　覚書　【表示スニペット】

Jotはお手軽で比較的高機能？なブログツールですが、以外と関連情報が無いのが、玉に傷。

と言うことで、先日かなりイジリまわして、まぁ忘れないうちに覚書にでもしておくか。てな内容です。

タイトルからだとわかりづらいかも知れませんが、要するに、デフォルトだと、入力フォームがあって、その下にコメント一覧があるレイアウトになります。

これを、まずコメント一覧があって、その下に入力フォームが来るようにブロックの配置を変えるだけの事です。

では、変更箇所です。

表示位置変更　**********************************************

Jot　ｖ1.1.4

入力欄と、コメント表示欄を上下入れ替え

変更ファイル：jot.class.inc.php
場所：　assets/snippets/jot/

355行　// Display default
の、箇所を修正。

デフォルト

$output = $this->getOutputForm();
$output .= $this->getOutputComments();

を、

$output = $this->getOutputComments();
$output .= $this->getOutputForm();

に変更。

この時、＄変数後の.を下の項目のみに使用すること。
これを間違える（上の欄に付ける）と表示しなくなるので、注意。
（単純に上下を入れ替えるだけでは、ダメと言う事ですね）

たったこれだけです。
簡単でしょう。

覚えていて損はない変更箇所です。

おそらくヴァージョンが違っても、jot.class.inc.phpファイルに、記述があるはずですので、古いヴァージョンでも、出来ると思います。
（古いヴァージョン未確認のため、若干無責任かな？）

この記事の続きを読む»

2011年11月14日月曜日

Modx　ユーザーエージェントによる表示切り替え　【表示スニペット】

ブラウザーのユーザーエージェントを使って、表示（内容）を切り替える極簡単なスニペット。

ページ全体の表示を切り替えるのであれば、MobileConverter※1を使用すれば、指定したブラウザー毎に表示変更が可能になりますが、そこまで必要ないと言ったような場合に意外と便利。

ページの極一部の表示がそのブラウザーに対応していないなどの場合、新たにテンプレートを作るよりは効率的？ではないかな。

例
●iPadなどでFlashを採用している箇所を他のパーツに置き換える。
●IE8以前のブラウザーは、別のCSSを読み込ませる。

など。

基本的に、スニペットなので、テンプレート内のどこに設置しても動作しますし、書き換えの内容もスニペット・チャンクの別を問わないので、使用範囲も幅広いはずです。

サンプル
**************************************************************************

<?php
$agent = $_SERVER['HTTP_USER_AGENT'];
if(ereg("^DoCoMo", $agent)){
■■■;// DoCoMo対応
}else if(ereg("^J-PHONE|^Vodafone|^SoftBank", $agent)){
■■■;// ソフトバンク部類
}else if(ereg("^UP.Browser|^KDDI", $agent)){
■■■;// AU？
}else if(ereg("iPhone", $agent)){
■■■;// iPhone
}else if(ereg("WILLCOM", $agent)){
■■■;// WILLCOM
}else if(ereg("^PDXGW", $agent)){
■■■;// PDXGW
}else if(ereg("DDIPOCKET", $agent)){
■■■;// DDIPOCKET
}else{
■■■;// 上記以外　ＰＣ等？
}
?>

**************************************************************************

■■■部に、表示させたい内容を書き出す。
書き出す方法は、echo または、return　文で。

また、ターゲットとするブラウザーが決まっている場合は、こんなにユーザーエージェントを列挙する必要はないので、ターゲットとするブラウザーのみを書けばよいです。

ユーザーエージェントの種類に関しては、下記サイトを参照。
PCブラウザ
http://www.openspc2.org/userAgent/

スマートフォン関連
http://www.kagua.biz/android/ualist.html

※1
MobileConverterはユーザーエージェントで指定したブラウザーに対して、使用できるテンプレートは１種類しか利用できなくなるので、MobileConverterのタイトル通り、モバイル用にした方が無難でしょうかね…

この記事の続きを読む»

2011年11月2日水曜日

Modx 入力されたら表示する。【表示スニペット】

テンプレート上にテンプレート変数を挿入して、使用する事はModxユーザーであれば、ごく当たり前に行なっていますよね。

しかし、必ずしもそのテンプレート変数を使うとは限らない場合もありますよね。

そうした場合、ソースにはテンプレート変数を表示させる為に使ったDIVタグや、他のタグだけが表示されることになります。

例えばソースはこんな感じに製作した場合、

<div class="txt_box">
[*テンプレート変数*]
</div>

実際の出力は（ソース）

<div class="txt_box">

</div>

という具合になりますよね。
まぁ、別にこれでも悪くは無いのですが、どうも中身が空のDIVタグが見えているのは、いかがなものかと言う事で、テンプレート変数に入力（値）がある時だけ表示するスニペットをつくりました。

【表示スニペット】
<?php
$hyouji = $modx->getTemplateVar('テンプレート変数名');　//表示したいテンプレート変数名を設定
if ( $hyouji ['value'] ) {
echo '{{表示チャンク}}';　//　$hyoujiに値があるとき
}
else {
echo '' ;　//$hyoujiに値が無い時
} ;
?>

【表示チャンク】
<div class="txt_box">
[*テンプレート変数*]
</div>

としておけば、テンプレート内に表示スニペットを設置すれば、指定したテンプレート変数に入力があった時のみチャンクが表示されるので、ソースは見た目もきれいになります。

この【表示スニペット】は他にも色々と使い道があるので、工夫次第で使い道が色々とありそうです。

この記事の続きを読む»

2011年11月1日火曜日

Modx　指定した時間に、変更する。

使用テンプレート内の、一部を変更するスニペット

ページの一部だけに、時間で変更できる表示を入れたかった。
キャンペーンとかで、ページそのものを表示させるには、公開開始日時の設定で、対応出来ますが、表示の一部のみ（バナーや、時間指定のログインパーツなど）を変更したい時に使えます。

<?php
$output = & $modx->documentOutput;
$time_stamp = mktime(17,3,0,11,1,2011); //変更時間
$now_time = time();
if ($now_time <= $time_stamp) {
return '変更前の指定' ;　　//変更時間前
} elseif($now_time >= $time_stamp) {
return '変更後の指定' ;　　//変更時間後
} ;
?>

$time_stamp = mktime(時,分,秒,月,日,年);

変更前の箇所に、現在使用しているデータをチャンクやテンプレート変数を使って指定します。
変更後に表示したい内容のこれまたチャンクやテンプレート変数を設定して、このスニペットを使用しているテンプレート内の変更箇所に入れれば出来上がり。

テンプレート内に記述する時は、スニペットの表記では

[[スニペット名]]

と記述しますが、この記述方法では、キャッシュがクリアされない為に、指定の時間になっても、表示が切り替わりません。

そこで、下記のように記述してください。

[!スニペット名!]

これで、キャッシュがクリアされるので、指定時間になれば、表示が切り替わります。

可能なかぎりシンプルにしました。
本当は指定時間に、使用テンプレートが変わるのが理想ですが、さすがにそこまでの物は作れないので…

この記事の続きを読む»

CMSでHTML5とHTML4を共存させる方法

と言う事で、やり方は色々ありますが…

一番確実で手っ取り早いのは、DIVタグを使ったブロック要素でのレイアウトが無難でしょう。
ソースの見栄えは悪くなりますが、これが一番確実でしかもW3Cにも準拠した方法でしょうね。

そもそもHTML4は現行の？ブラウザーではIE8以前の物が殆どです。そのIE対策としてはブラウザーのユーザーエージェントでテンプレートを振り分けるという方法を以前ご紹介しました。（うちのサイトもそうしてます）が、IEだけの為にわざわざテンプレートを作るのはどうなのよ？そこまでの労力を掛ける必要があるの？

と言うのが正直なところです。

幸いな事に、IE8以前のブラウザーはHTML5の新しいタグやCSS3の新規に追加されたプロパティは無視されるので、昔のCSSハックではありませんが、そこを上手く利用させてもらいます。

製作方法は簡単です。
IE8でもHTML5のソースを読まない訳ではないので、基本のソースはHTML5＆CSS3で製作します。
普通にHTML5とCSS3でガンガン書いてゆきます…が、CSSのクラス設定で、クラス名に特定のHTML5のタグを指定せずにあくまでDIVタグでレイアウト作業をします。

もちろんHTML4で使用されているタグに関しては、クラス指定をしても問題ありません。
問題になるタグは、HTML5から追加された新しいタグのみです。
新しいタグはIE8では無視されるタグなので、タグにクラス指定をしても無視されます。
ちなみに、タグに直接指定をしても、タグ内にクラス指定をしても、どちらも無視されるので、ご注意ください。

例：＜section＞に対して直接クラス指定をしても、＜section class="●●●"＞としても結果は同じ。
HTML5で追加された＜section＞はIE8では無視されるので、全く意味をなさない。

一見、タグ内にクラス指定すれば、CSSが効きそうに思えますが、ブラウザーがタグを認識しない時点で、次のクラス指定は無意味なものになるので、無駄です。

こうなると、もう見栄え云々以前の問題として、まともに表示（レイアウト）されないのですから、仕方がありません。
DIVタグを使って、がっちり固めるしかありません。

別にW3CではDIVタグを認めていないわけではないので、現状ではこれが最も簡単にできる、HTML4&HTML5の表示対策になるでしょうね。
ソースはかなり煩雑になりますが、表示（レイアウト）されないよりははるかにマシ。という事で。

この記事の続きを読む»

2011年9月15日木曜日

HTML5は、SEOに革命？をもたらす文法？　

　HTML5は我々サイト制作業者にとっては、既に普通に使用している文法ですが、一般ユーザーから見れば、別にHTML4でもHTML5でもどちらでもいいのです。

　実際にCMSを使用して、サイト運営をしている中小企業の担当者は、HTMLに対する理解と言うことは殆ど知らない…
と言うのが現状です。仮に知っていると言っても、それはあくまでHTMLタグであって、そのタグの持っている本来の意味と言うところまでは知りません。
多少HTMLが出来る人でもそうでしょうから、一般のHTMLを知らないユーザーでは推して知るべしですね。

　なぜそんな話をするかと言いますと、HTML5に触れば触るほど、この文法が明確なある目的の為に作られたものだという気持ちが強くなってくるからです。

ある目的　　とは？

検索（サーチエンジン）における文章の収集と抽出に特化している文法だという事です。

例えば、あたらに追加された、
header
section
aside
nvi
footer

などは、その名前からして、明確な目的を持っています。HTML5から新たに増えたタグの殆どは、そのタグの名前でタグが持つ意味もある程度推測できますね。

これは、我々製作側としても、非常に解りやすくてありがたい事ですが、さらにこれらのタグを使っていると、SEOに対する正確性という事が頭をよぎります。
今までのHTML4より、HTML5の方がより正確に情報を伝える事が出来そうです。

今までの、SEO対策で重視されていたのは、
titleタグとHタグ、aのリンクタグに終始していましたが、今後はサイトページの中身全体での使い方を考慮する必要が出てきそうと言うより、検索能力の正確性を高める為には、必須となるでしょうね。

つまり、サイトページ全体に渡り、タグによってタイトル・見出し・文章と言った項目分けが明確にされ、その中身が精査される方向に進んでいくのでしょうね。
私たち製作者サイドにはある意味さらに負担が増える訳ですが…

そうなると、現在のSEOからさらに進んだSEOの方向性を考えないといけない？となりますね。

いずれも、単に私の憶測にすぎないので、どうなるかは、1年後ぐらいには判明すでしょうが…

この記事の続きを読む»

2011年9月12日月曜日

あらゆるキャリアに対応の便利モノ

例えば、出先で思いついた事などを、ちょっとメモしたいと思った事はないですか？
しかも出来ればあとからデータを移すことなく、PCでも、携帯でも、スマートフォンでも、閲覧・編集が出来れば、便利ですよね？

実は、あるんですよそういうサービスが。

オンライン付箋サービス　lino(リノ)

これ、かなり使えます。
専用のソフトを必要としないで、PC・携帯・スマフォ※1に対応しているので、とにかくネットにつながる環境であれば、キャリアを選ばす、メモ（付箋）を書く事が可能なすぐれものです。

付箋以外にも、写真などの画像データ、簡易なスケジュール。
さらには、グループウェア的な使い方まで可能です。

会員登録は簡単ですが、Open IDシステムを導入していますので、YahooIDを持っていれば、貴方のYahooIDでログインが可能です。

無料で出来る範囲でも十分使えるシステムなので、一度使ってみる事をおすすめします。

※1　正式には、androidに対応していませんが、androidの場合はPCビュアーとしての使用になりますね。
少々つかいづらい…　iPhon同様にアプリを開発してほしい…

この記事の続きを読む»