2012年12月19日水曜日

Facebookページの予約投稿と修正。

ご無沙汰しております。
気が付けば、一月近く更新していませんでした。
最近Facebook関連の雑務が色々とあって、企業でもFacebookの重要性を理解して、動く方向にシフトしている企業様もいいです。

しかし、中小企業の場合はやはり情報収集能力の違いと言いますか、まだまだインターネットでの集客そのモノに懐疑的なお客様もいます。

そんな方々とお話する日々で、Facebookの詳細機能についてのお話が多々出ます。
と言う事で、本日のお題は

【Facebookページの予約投稿と修正】です。

Facebookページの予約投稿機能は皆さんご存じの方もいるかと思います。
え?そんな機能知らない?

そんな方は下記の記事をご覧ください。
要するに、普通のブログと同じ様に、決められた時間に投稿をUPしてくれる機能です。

リリースは、半年ほど前ですが、以外と知られていない様なので、一応あげておきます。



また、この予約機能は一度設定した後で、変更する事が少々面倒なようです。

通常この手の変更は、設定した画面を使って再度設定変更するやり方がポピュラーですが、Facebookページでは【アクティビティログ】の画面から行ないます。アクティビティログは他にも各種の変更機能を持っているので、何らかの変更が必要な場合に、その変更方法が不明ならば、真っ先にアクティビティログを見てみましょう。

また、Facebookページに限った事ではないのですが、デザイン上の制約か、はたまたFacebookの陰謀?でしょうか(笑
ボタン機能を言葉(テキスト)ではなく、アイコンのみで表示して言葉で示さない場合が多くあります。
そのアイコンも目立たない色なので、解りにくい場所や一見するとデザインに見えるボタンなどがあり、実際に触らないとその機能が解らない物が多数あります。

確かに、世界中で使われているFacebookですから、世界標準でのデザイン性が求められるのでしょうが、もう少し親切であっもいい様な気もしますけどね。








2012年11月21日水曜日

スマートフォンを使った音声入力 今さら……第48回


今さら聞けないネットのあれこれ。
「音声入力で書類を作る方法」
についてお話します。


重要度:★
難易度:★



 最近スマートフォンを使うときにキーボードよりも、音声で入力をすることが多いことがあります。この音声入力で文章を入力する方法があります

文章作成などでキーボードの打ち込みよりも、しゃべることつまり音声入力によってデータを入力する方が時間が早い場合があります。

しかし文章入力は特定のアプリを使うために、入力した文章の保存がメール等に制限される場合があり、必ずしも使い勝手が良いとは限りません。

 そこで今回紹介する方法はWebサービスの機能を使って、スマートフォン用アプリとの連携を生かし、効率的に音声入力したデーターを文書化する方法を紹介します。

スマートフォンでもPCでも使えるwebサービスlino

lino

linoはブラウザベースの付箋サービスとでも言いましょうか。便利なメモボードの様なWEBサービスです。しかも、スマートフォンや携帯電話にも対応していますので、あらゆる端末からアクセスが可能です。
スマートフォンにはiPhoneとAndroidの双方のアプリがあるので、殆どのユーザーが使えるシステムです。

スマートフォンには、キーボードでの入力の他に、音声での入力方法もあるのでその音声入力システムを使用すれば、スマートフォンに喋りながら文章を制作することができます。


実際の作業の流れはこうです

linoのアプリを起動して、スマートフォンを使って文章を入力します。その文章を保存して今度はPC上から保存した内容を確認します。

データ(文章)はほぼリアルタイムで更新されるので、PC上で確認した内容をそのままコピーしてそのテキストを他のアプリ(ワードやテキストエディター等)にペーストすれば、書類の出来上がりです。

文章の修正(リライト)は必要ですが、簡単に大量の文章データを作成することができるので、非常に便利です。

またネットワークにさえ繋がれば、どこでも入力が出来るので、思いついた時に入力といったことが可能です。

 今回のこの記事もlinoの機能を使って制作しています。
製作時間は大体30分程度でしょうか。制作内容が決まっていれば、ほぼ文章を読み上げるような形で制作できるので、非常に簡単です。

ただ唯一の問題はスマートフォンに向かって喋ると言う行為です。
端から見るとまるで、ひとり言を言っているように見えるので、少々恥ずかしい様な気がします。

しかし、効率的に文章の入力が出来るので、一度使ってしまうと離れられなくなりますよ。





2012年11月13日火曜日

Facebook テーブルテントアプリ


今日は、ネタがあるので急遽、連投です。


11/13 PM
Facebookマーケティングから、テーブルテントアプリが公開されました。

店舗経営されているお客さま向けの、アプリです。

実店舗に来て頂いたお客様に、Facebookページへのアクセスを簡単にしてもらう様に開発されたアプりです。

アプリとは言っても、要するにQRコード生成プログラムなのですが。


テーブルテントアプリ
https://www.facebook.com/marketingjapan/app_496405607036818




アプリページにアクセスすると上記の画面が出ます。
入力欄に、FacebookページのURLを記入して、イメージを作成ボタンを押すと、badge.pngと言うファイルがダウンロードされます。

そのファイルをプリントアウトすると、下記の様なPOPが印刷できます。



冷静に考えれば、タダのQRコードを印刷したPOPですが、Facebookのオフィシャルですので、普段使えない【オフィシャルロゴ】も入っているので、ちょっといい感じです。

このPOPをテーブルやレジ周りなどに貼っておけば、お客様が簡単にアクセスできますし、キャンペーン等と一緒に行なえばアクセス数をあげる事も可能ではないでしょうか?



【フォント】につてい


初心者WEBデザイン?
【フォント】につてい

ブラウザで使う、フォントについてのお話。

サイト製作の勉強をしていると、比較最初の頃にこの【フォント】についての問題に遭遇します。

一般的に言われている事で、【フォントは指定するな】と言う事が言われていますが、実際には大抵のサイトで、CSSによるフォント指定がされてます?

これでは言っている事と、やっている事が矛盾しますよね??
初心者にとっては、まってくもって【?????】といったところでしょうか。

本来の意味としては、フォントを指定しないという事は、【ブラウザの設定に任せる】という意味があります。
そもそも、ブラウザで使用するフォントとは、どういったモノなのでしょうか?

ブラウザで使用するフォントは、使用するブラウザ毎にフォントも、文字サイズも違います。
これらは、ブラウザの設定で簡単に変更が可能です。

この時に選択出来るフォントの種類は、概ね5種類くらいのフォントになります。
その5種類と言うのは、OSに関係なく一般的に搭載されている、【基本フォント】というものになります。

つまりブラウザで使用しているフォントは、
【使用するPCに搭載されているフォント】
と言う事になります。

では、PCに搭載されているフォントであれば、何を使ってもいいのか? と言うと……ダメです。

初心者にありがちな、欲望としてCSSなどを使って、部分的にフォントの指定(見出しタグ等)をして、見た目の綺麗なモノを作ってみたいと思われるでしょうが、それは意味の無い事なのです。

先ほど言ったように、【使用するPCに搭載されているフォント】で無ければ、ブラウザではそのフォントは表示しません。

つまり、自分のPCにはある(搭載)フォントは、必ずしも閲覧者(ユーザー)が観るPCにそのフォントが有る(搭載されている)とは限りません。もし指定したフォントが無ければ、代替えフォント※1に置き換えられてしまい、せっかく用意したデザインが(見た目)無意味な物になってしまいます。

この為にフォントの指定はするな。と言う事が言われているのです。

では、何故CSSによってフォントを指定しているか? ますます解らないですよね?

解答としては、複数のブラウザで同じ表示にするため。

と言う事です。確かにフォントの指定はしていますが、それは【ターゲットブラウザ】に対して、可能な限り同じ表示にする、一つのテクニックなのです。

ブラウザはそれぞれに初期設定のフォントやサイズが違います。しかし、それでは閲覧するブラウザによって、見え方が大きく異なる可能性が出てきます。

製作側としては、ブラウザが変わっても、同じ様に見える事が望ましい※2のでサイト内のフォントと、フォントサイズを指定することで、同じ見た目を保つようにしています。

もちろん指定するフォントは標準的なブラウザフォントです。

つまり、【フォントの指定をするな】とは標準的なフォント以外のモノ(フォント)を使うなという意味です。
いい変えれば、標準フォントであれば多少の装飾はOKとなります。


どうしても、標準以外の綺麗なフォントを使いたい場合※3、手段が無いことはありませんが、以下の条件が必要になります。

1.著作権フリーなフォントである。
2.JIS第二水準までのフォントデータをもつ事。
3.OSに依存しない汎用フォーマット、または一般的なフォントであること。

などの条件全てをクリア出来れば、フォントデータをWebサーバー上にUPして、CSSにてフォント指定をすれば、ブラウザでの使用も可能になります。

まぁ、かなり高いハードルですが。

いずれにしても、CSSによるフォント指定は、汎用フォントで、複数のブラウザでの表示を同じ様に見せるためのテクニックという事を覚えておいてください。





代替えフォント※1
CSSで指定したフォントが無い場合、ブラウザの設定フォントに置換されます。


同じ様に見える事が望ましい※2
製作としては、最低でもターゲットブラウザに対しては、全て同じ様に表示される事が望ましいのですが、必ずしも同じにならない事があります。


標準以外の綺麗なフォントを使いたい場合 WEBフォントを使う※3
WEB上に公開してあるフォントデーターを利用する方法で、ブラウザーで使用できる形にしたもの。
日本語対応のものもあるが、基本的に有料のものが多い。





2012年11月9日金曜日

CMSの実情?? 今さら……第48回


今さら聞けないネットのあれこれ。
「実はCMSは難しい?」
についてお話します。


重要度:★★
難易度:★



最近すっかり定着したCMS(英: Content Management System)ですが、様々なタイプが出ています。
ここ数年は、完全日本製のシステムもでてきて、その数も増える一方です。

【ホームページを簡単に製作・管理出来ます】

と言うような、キャッチコピーをご覧になった事がある人も多いと思いますが、実際のところはどうなのでしょうか?

確かに、簡単にホームページを製作出来るシステムも多数あります。ですが、実際に使ってみると使えるデザインテンプレートの種類が少なかったり、デザインの自由度が低かったりと、意外と不満が多かったりします。

また【簡単に出来る】といった謳い文句で使ってみたら……

全然簡単じゃなかった!

などと言う事もしばしば。

何故?簡単にでは無いのに、簡単に…… などと言うキャッチで誘うのか。

我々製作サイドから言わせてもらえれば、
【あれでも簡単】
なんです。

つまり面倒な製作部分をバッサリ削除したモノが、巷で言われているCMSなのですが、それでも実際の運営管理というモノは、それなりに難しいのです。

中には【確かに簡単】とうい物も有りますが、そう言ったCMSに限ってデザイン性が乏しく、また任意に変更出来る箇所が少ないなどの不満が出ます。

つまり、操作や管理が簡単であるCMSは変更出来る自由度が低い。 と言う事になります。
もちろん例外のCMSも有りますが、それは稀な物です。

基本的に変更の自由度が高ければ高いほど、管理側の負担は増えます。
それは、自由度が高いと言う事は変更箇所が多いと言う事です。変更箇所が増えれば管理は複雑にならざるを得ません。

ようするに……

簡単に出来る都合のよいCMSは無い

と言う事です。

もちろんサイトそのモノのデザイン性を犠牲にすれば別ですが、基本的に簡単に出来るCMSは【それなり】の性能しかないと言う事です。





2012年11月7日水曜日

メールを貯め込まない技? 今さら……第47回


今さら聞けないネットのあれこれ。
「不要メールを貯めない技」
についてお話します。


重要度:★★★
難易度:★



なんだか、すごい技?のような事ですが……
何の事はありません、Thunderbird での、ちょっとした設定についてのお話です。

毎日受信される、メールマガジンやスパムメール。
フィルター機能を使って、ゴミ箱や自動削除する設定にしている方もいるかと思います。

しかし、全てのメールをゴミ箱や自動削除する訳ではありません。
そうした、メールはどうしてますか?

読んですぐ削除。 と言うのがある意味理想なのですが、それが意外と面倒……
そして、気が付くとメールフォルダーの中がいっぱいに……

なんてことは、ありませんか?

Thunderbirdを使っていれば、ちょっとした設定で
貯まった古いメールを自動的に削除してくれます。

設定方法はいたって簡単。

左にある、ナビゲーションフォルダーから、設定したいフォルダーを選び、右クリックでプロパティを表示します。
上部タブの【保管ポリシー】を開いて、送信日時から~の項目にチェックを入れて、OKボタンで設定完了です。

簡単でしょ。
残したいメールはスターを付けておけば設定日時を過ぎても削除される事はありません。


デフォルトでは、【メッセージを自動削除しない】に設定されています。

保存しておきたいメールをいちいち【保存フォルダー】に移動する事も無く、意外と便利です。

アカウント(メールアドレス)毎の設定ではなく、フォルダー毎の設定なのでかなり自由度は高いです。
上手く設定すれば、溜まったメールの削除と言う、面倒な事から解放されますよ。







2012年10月30日火曜日

データは別の場所に 今さら……第46回


今さら聞けないネットのあれこれ。

「Cドライブにデータを貯めない」

についてお話します。


重要度:★★★★★
難易度:★~★★(場合によって)




先日のPCトラブル絡みで、思いついたのですが……
みなさんのPCはHDD(ハードディスク)の容量は、どのくらいでしょうか?

最近のPCはHDDが巨大化しており、デフォルトで、1TB搭載のPCが標準なのが当り前になっていますよね? そこで、そのPCのCドライブの容量はどのくらいでしょうか?

おそらく殆どの方が、メーカー出荷状態の状態で使用しているかと思われますが…… つまり、容量1TBのHDDをそのままCドライブ(システムドライブ)として使用している事になっているのではと思います。

個人的には、無駄にデカイHDDに意味は無いと思っているのですが、まぁその辺りはパソコンメーカーの経営戦略と言う事で(笑

一般的な使い方としては間違っていないし、別の使い方をしなさいとは、メーカーも言っていませんから悪い事ではありませんが……

しかしその使い方だと、トラブルに見舞われた場合の対処が大変です。
もし、突然PCが使えなくなって、HDDそのものをフォーマットしなければならなくなった場合、貯め込んだデータはどうしましょう?また、OSの入ったドライブに大量のデータを入れて置くことは、起動時に時間が掛かったり、システムが不安定になりやすい要因の一つです。

そう言った場合に備えて、OSの入ったドライブは、必要最低限のソフト(OSとわずかのアプリケーション※1)のみとして、残りは別のドライブ(Dドライブやその他)に保存すると言う方法をとります。

これはPCに詳しい人であれば、あるほど実践しています。
それは、先ほど言ったトラブル対策もそうですし、快適にPCを使う有効な工夫でもあります。

想像してください。
もしPCの調子が悪くなっても、最低限のシステムしか入っていなければ、データのバックアップの必要が無い、あるいは最低限のバックアップで済むので、OSの再インストールやクリーンインストールも楽に行えます。

ではその方法ですが、一番簡単な方法は【外付けHDD】の購入です。
現在使用しているHDDのパーテーション※2を分けて、別ドライブを製作するのではなく、
物理的にHDDを分ける事が重要です。
パーテーションを分けても、実際に同じHDD内であればあまり意味はありません。
むしろHDDの破損等の場合は、ドライブを分けていても意味がありません。

基本的に【ドライブを分ける】と言う事は、物理的に違うモノに入れると言う意味だと思ってください。
(DVDやBlu-rayでも結構ですが)

現在1TBの外付けHDDだと、1万円程度で購入出来るので、それほど高額ではありません。
わずか1万円程度で、リスクヘッジが可能ならばコストパフォーマンスは高いと思います。

また、大元のCドライブですが【My Documents】などのデータフォルダーをCドライブ以外に設定するだけで、それなりの効果があります。詳細については、近日中?にブログにUPしたいと思っています。


/////////////////////////////////////////////////////////////////////

※1アプリケーション
普段使うアプリケーションですが、Cドライブ以外にインストールする事は可能です。ただし、OSのシステムを使う一部のアプリはCドライブにしかインストール出来ません。そう言った必須Cドライブのアプリケーション以外は、全てCドライブ以外にインストールすると、Cドライブはかなり軽くなりますのでお試しを。

※2パーテーション
HDDの内部を仕切る(パーテーション)事で、複数のドライブとして利用する方法。
ただし、物理的には1つのHDDであるので、パーテーションを切った複数のドライブの何処かにトラブルが起きれば、他のドライブにも影響を与える事になる。



2012年10月26日金曜日

PC復旧の手順 今さら……第45回


今さら聞けないネットのあれこれ。
今回はWindowsXPで
「PCが壊れた?と思ったらやる作業」
についてお話します。


重要度:★★★★★
難易度:★~★★★★★(場合によって)



先日、仕事で使っているPCが突然ダウン!

原因を探ったけど、最終的には【不明】でした。
胡散臭い挙動は幾つかあったのですが、最終的に決めてが無く【これが原因】と言えるこのがありませんでした。 実際の話として、【原因不明の不具合】はよくあることですが、気分的にすっきりしません。

とりあえず、現状なんとか動いているので今は【これでよし】としています。

と言う事で今回はPCが不調になった時に行なう修復手順と言うお話をしましょう。

復旧方法の詳細につては、それそれの項目をクリックして頂ければ、Googleでの検索画面が表示されますので、それを確認してください。

そう言えば、今回のお話はあくまでもWindowsXPでのお話です。
Vistaや7では若干違いますので、ご了承ください。

OSが通常起動する場合の手順 ※可能であればセーフモードで作業してください。
1.ウイルスチェック
2.ハード空き容量確認
3.復元ポイント
4.デフラグ
5.ディスククリ―アップ
6.レジストリ修復

上記の方法でまだダメなときは、下記の方法を行う。※1

OSが起動しない場合
1.システムの再インストール(OSの上書き)
2.クリーンインストール(ハードディスクをフォーマット後、システムを最初からインストール)


OSのインストールをしても起動しない・あるいは不安定な場合。
この時点で、一般的な方はPCをサポートセンターなり、ある程度専門知識を持った方に診てもう事が良いでしょう。 この症状の場合ハード系トラブルの可能性が高いので、メモリー交換・ハードディスク交換を行う必要があります。また最悪の場合は、マザーボードが破損している可能性があるので、自作PC以外はこの時点で【終わり】ですね。


/////////////////////////

ざっとあげると上記の様な事を行う訳ですが、殆どの場合【レジストリ修復】までの作業を行えば、不具合は解消されます。
PCの不具合で多いのは、【ハードディスク容量不足からくる、システムの不安定化】【レジストリー改変による動作不良】の二つの場合が殆どです。※2

Windowsに限らす、PC上のOSは通常ハードディスクの空きスペースを使って様々な処理を行っています。

この空き容量が少ないと、その処理が実行出来ない為に、動作が遅くなったり【仮想データを置いておく場所】が無い為にプログラムが動かせないなどの不具合がおきます。

そう言った不具合を無くす為にも、ハードディスクの空き容量は15~20%を見てください。10%以下の空き容量では、動作が不安定になり、最悪の場合はデフラグすら行えなくなります。

基本的にOSが入っているCドライブにあるデータ(プログラムを含め全てのデータ)は少なければ、少ないほどPCは快適に動作してくれます。

次に多い不具合は【レジストリ】に関する不具合です。
レジストリとは、アプリケーションなどで使用する【拡張情報】として扱われるファイルで、OSまたはアプリケーションなどによって、情報が書き変わる性格のモノです。

このレジストリが、OSの不具合などでいきなりシャットダウンされると、書き込まれた情報が破損してしまい、関連したプログラムが上手く動作しないと言った不具合に見舞われます。

そこで、このレジストリを修復する事で、不具合を解消するわけです。

レジストリ修復の方法は、色々とありますがsfc /scannow システムファイルチェッカーと言うモノがWindowsにはあります。また無料・有料のソフトとして、レジストリーを修復するソフトも有りますので、試してみるのもよいでしょう。

ただし、レジストリの修復は必ずしも良い結果をもたらす訳ではないので、注意が必要です。
と言うのもレジストリを変更すると言う事は、【現状の設定とは違う設定に書き換える】とも言えます。
つまり、レジストリを変更することで、今まで使えていたソフトやサービスが使えなくなる可能性もあります。大抵の場合は、アプリケーションの削除と、新規インストールで問題は解決できますが、そう言ったリスクを理解した上で行う事が求められます。


いずれにしても、不具合が出て動作に不安があるようなら、ある程度覚悟を決めて徹底的に【修復】した方が後々いい結果を招きます。



/////////////////////////////////////

※1
代表的な作業項目を列挙しただけです。
本来であれば、メモリーチェックやHDDチェックなども行なう事が必要ですが、今回は省略させて頂きました。

※2
ウィルスによる不具合は除きます。




2012年10月12日金曜日

Modx ユーザー別管理画面の編集関係。


ご無沙汰しています。

ここのところ、少々立て込んでいて放置していましたが、時間を見てまた再開します。

今日はModxの覚書です。

ユーザー管理関連で、色々と実験をしていたので、その内容の覚書です。

※2012/10/15 追記
この設定方法は、Modx1.0.6.-r6以降のバージョンにて行なってください。
r6以前のバージョンだとエラーが発生して、編集したコンテンツを保存できません。

別な方法により設置は可能でしょうが、今回の方法ではr6以前のバージョンでは対応致しません。
下記の方法を試される場合は、
必ずr6にバージョンUPした状態で、行なってください。



ユーザー管理から、ロール設定、グループ設定等を行うと、設定されたユーザー権限のページしか表示できない機能がある事はご存じかと思います。

しかし、フォルダの階層構造上、どうしても【権限が無い】あるいは【グループ制限なし(Public)】のページを表示しなければならない場合があります。

それは、編集させたいページの上位フォルダーとされるページです。

ロール設定では、フォルダ(コンテナ)に対し設定された管理権限が無いと、そのフォルダ内の物は全て表示されなくなります。(編集可能なコンテンツはありませんと表示されます)

このようなときに、そのフォルダは【グループ制限なし(Public)】※1状態にして、誰もが閲覧・編集可能な状態にするしか手段がありません。

しかし、そのページはユーザーに編集させたくない場合にどうしたらよいか……

と言う事で、どうしても表示されてしまうが、「編集させたくないページ」を

MODX管理画面でフォルダ(コンテナ)内だけを編集可能にする。

上記の方法で回避する事を試してみます。

しかし、この記事はあくまで
ManagerManager
をある程度使用した事がある。と言うことが前提で実際の使い方(コードの設置方法等)が今一つ……

なので、このコードの設置のしかたを書いておきます。
(私もあまり使った事が無いので、完全に自己流です)


メインのコードはmm.inc.php

上記のメインになるコードは、

/plugins/managermanager/mm.inc.php

に書き込み。

mm.inc.phpを開き、最終行以下に、下記コードをペースト。

// テンプレートID指定でアクセス不可を設定する関数
if (! function_exists("mm_deny_templates")) {
function mm_deny_templates($role_users, $tpl, $denied_message) {
global $mm_current_page;
$templates = makeArray($tpl);
if (in_array($mm_current_page['template'], $templates)) {
$docid = (int)$_GET[id];
mm_widget_accessdenied($docid, $denied_message, $role_users);
}
}
}


この時に、サイトに書いてある最後の変数に関しては、記述しない事。

//////// この部分は記述しない ///////////////
$role = '!1'; // 管理者(ロールID:1)以外のユーザに対して
$tpl = '1,2'; // テンプレートIDが1,2の場合、ユーザは編集不可にする。
$msg = 'このフォルダ自体は編集できません。子リソースを作成・編集して下さい。';
mm_deny_templates($role, $tpl, $msg);


これを書いてしまうと、ページを表示したときにエラーコードが表示されるので、注意が必要。


後は、実際の命令文を、

エレメント管理>チャンク>mm_rules

に記述する。
記述位置は、3行目以降で、

/* =============

とコメントアウトしている前。

書き込み例

mm_widget_showimagetvs(); // Imageタイプのテンプレート変数の画像をプレビューします
if($modx->config['track_visitors']==='0') mm_hideFields('log');

//// ここから下 /////

mm_deny_templates('3', '4', 'このフォルダ自体は編集できません。子リソースを作成・編集して下さい。');


//// ここより上 /////

/* ==========================================================

と言った感じ。


書き込む書式は、下記のようにすれはOK。

mm_deny_templates('3', '4', 'このフォルダ自体は編集できません。子リソースを作成・編集して下さい。');

解説
上記の書式は、管理者ID3番は、テンプレートID4番の場合、編集出来ないようにする。
編集出来ない画面には「このフォルダ自体は編集できません。子リソースを作成・編集して下さい。」と表示しなさい。

と言った内容。

少し解りにくいかと思うので、もう少し柔らかく。
要するに、

ID3番のユーザーは、テンプレート4番以外のぺーじは編集できます。

と言う事です。


この方法は、はっきり言って自己流です。

でも、問題無く動いているで、とりあえずOKと言う事で。
もう少しスマートな方法があれば、コメントをください。



※1
必ずしも【グループ制限なし(Public)】である必要はありません。
この階層以下を編集するユーザーが関連した、他の管理ロールでも問題ありません。





2012年9月19日水曜日

Concrete5のベースURLについて。




先日、久しぶりにConcrete5での仕事を頂きました。
ただし、少々特殊な作業内容だったので、覚書として記憶の片隅&Concrete5ユーザーの助けになればと思います。


Concrete5のベースURLは、日本サイトでは具体的な使い方は、phpを使った方法しか書いていません。



phpでの記述方法

<?php echo BASE_URL . DIR_REL ?>


この記述方法では、実際のサイト内での使用はほぼ出来ません。
しかし、海外では下記のコマンドが一般的に使われています。

{CCM:BASE_URL}


これを、サイト制作の際にHOMEボタン等のリンクURL等に使うと、便利なので覚えておいて損はありません。
ただし使い方が限定されるので、注意が必要です。

使い方としては、

<a href="{CCM:BASE_URL}">HOME</a>


とすれば、自動的にHOMEへのリンクになります。
httpから始まるドメインを記述しなくて済むだけではなく、ドメイン変更やサーバー移管等の事態が起きても、ソースコードの修正が必要無いので、非常に便利です。

しかし、使い方にコツ?があります。
通常であれば、HTMLブロックを選択して、記述したいところですが、HTMLブロックで記述すると、リンク表示がおかしくなります。

どうやら、これはバグ?なのでしょうか。
HTMLブロックで上記のタグを記述すると、ベースURLを認識しません。
(詳しくは説明しませんが、とにかくHTMLブロックでは上手く表示しません)
※2012/9/20修正。
HTMLブロックでのバグでは無く、HTMLブロックには、純粋にHTMLしか表示されないようです。



ではどうするか?

記事ブロックで追加してください。記事ブロックでのHTML表示にて、ソースコードを入力すれば、問題無く表示されます。
ベースURLの考え方はCMSを使う上で非常に重要になるので、他のCMSでも可能な限り使う事をおすすめします。
まぁ、サーバー移転はよくある事ですが、ドメイン変更はあまり無い?かもしれません。
しかし、もしもの時に備える事も、web屋の腕の見せ所です。

こういった見えないところで、ちょっとした気遣いを忍ばせておく事が出来るのが、プロだと思いますよ。




2012年9月18日火曜日

SEOってなんですか? その4 今さら… 第44回


今さら聞けないネットのあれこれ。
今回は
「SEOをやるなら、これは読んでおきましょう」



重要度:★★★★★
難易度:?



どうも、ご無沙汰しております。

9月に入っていきなり仕事が……
まぁ、忙しいのはよい事なので、かまわないのですけど……

とりあえず、前回までの、SEO対策に関するお話は、今回でとりあえず終了します。

今までの話は、解りましたかね?
出来るだけ技術的な話をなくし、解りやすくしたつもりでしたが、どうだったでしょうか?


さて今回は、もうちょっと詳しくSEOを知りたい。
と言う方の為に、最低限これだけは読んでおくといいですよ。
的なサイトを紹介します。


基本編



今回のお話で解らない所や、技術的内容については、下記のサイトをご参考に。

SEO対策@マガジン
http://www.seo-atmag.com/

SEO対策講座
http://www.minia.jp/



ツール編



SEO対策ツールとして、非常に良く出来ています。
私も使っている便利なサイトです。
他にもツール(似たような)サイトはたくさんあるので、自分にあったサイトを探してみましょう。

SEOTOOLS
http://www.seotools.jp/


禁止事項



当然ですが、SEO対策にも禁止事項はあります。
その禁止事項についてのサイトです。
この事項を無視すると、結構面倒な事になるので、注意が必要です。

Googleが教えるSEOでやってはいけない30の事
http://seofromusa.com/google-seo-tips/google-starter-guide-30/

やってはいけないSEO対策
http://allabout.co.jp/gm/gc/394971/


SEO対策としてやってはいけないこと
http://www.affiliatemanual.net/seo/kinshi.html





SEO対策については、常に新しいプログラムや検索方法を模索していて、かなり頻繁にクローラープログラムが変わります。しかしSEOの基本を理解していれば、クローラープログラムが変更されても、大丈夫。
また、SEO対策はその基本を考えると、非常にシンプルなモノです。

一見専門分野のように思えますが、理屈としては難しくありません。

内部SEOなどは、自分で行えるSEOとして簡単に行えます。「内部SEO ツール」と言った検索キーワードで検索すれば、SEOツールがたくさんありますので、それらを使って「自分でSEO対策を行う」事を是非やってみてください。





SEOってなんですか? その1 今さら……第41回


SEOってなんですか? その2 今さら……第42回







2012年8月27日月曜日

SEOってなんですか? その3 今さら… 第43回

今さら聞けないネットのあれこれ。
今回は
「外部SEOと言う考え方」
についてお話します。


重要度:★★★★★
難易度:?


SEOにおける「外部要因」とは、
他サイトからのリンク
になります。

単純に自分のサイト以外からのリンクで良いという事ではなく、ここにもアルゴリズムが関与します。

では何故他サイトからのリンクがSEOに関与するのか?について説明します。

初回にもお話したかと思いますが、通常他サイトに対してリンクを貼るという作業は、リンク先のサイトの内容が、自分のサイトページに何らかの形で関係があり、尚且つ「読んでもらいたいから」と言った動機で行われる事が多いわけです。
つまり、言いかえればリンク先のサイトを「信頼」あるいは「評価」していると言ったニュアンスになります。より多くのサイトからリンクをもらう事で、そのサイトの評価を上げる事につながると言うモノです。

ただし、どんなサイトからでのリンクでも良いという訳にはいきません。
無論リンクが全く無い状態よりは、どんなサイトもであった方が良いのですが、SEOの順位を上げる為には、幾つかの条件があります。

1.同業種からのリンク
同業種からのリンクは、そのサイトページが「同業者から認められた」という事になりSEOとしては非常に有効です。

2.ページランク上位からのリンク
Googleでは、サイトページに対して独自の評価基準における、ページランクというシステムを導入しています。
ページランクは5段階に分かれており、最も上がページランク5になります。
最初はページランク0からスタートして、SEOが進につれてページランクが上がります、
つまり、自分のページランクより上位のサイトからリンクをもらえると、「信用あるページからのリンク」と言う事でSEOの評価が上がります。

大雑把に説明すれば、上記の2点の内容でリンクをもらえれば、それなりにSEOの順位は上がります。が、単純にリンクを貰うだけでは、ダメでリンクの貰い方(種類)によって、同じページからのリンクでもアルゴリズムの評価が変わります。

実は、このリンクはその方法次第で、評価を大きく変えてしまう両刃の剣でもあるので、注意が必要です。
それでは、どんなリンク方法がSEOの評価につながるのかを説明します。


被リンク(バックリンク)
被リンクとは、相手ページに対して、一方的にリンクを設定する事を言います。
解りやすく言えば、ブログ等で参考資料的なページをリンクとして登録する。といった様な、リンクの貼りかたです。
つまり、自分のサイトページに対して、他者から一方的にリンクを貰う事を言います。

被リンクは、自分からリンクをお願いしたモノではない「自発的なリンク」として、評価されます。
つまり、サイト運営側からは干渉できないリンクなので、評価として高いモノになります。
また、被リンクについては、先ほどの「同業者からの~」という縛りはあまりなく、比較的緩い設定になっています。
(サイト運営側からアプローチ出来ないので、このあたりは緩いようです)
むしろ、この被リンクについては、色々なサイトからリンクを貰う方が良い結果が出たりするようです。


有料ディレクトリからの被リンク
Yahooを代表とする、有料登録型のサイトから貰う被リンクはそれなりの効果があります。
ただし、既に通常の被リンクが1000を超える様なサイトの場合は、実感としてはあまり無いでしょう。
オープンしたばかりのサイトや多少お金がある場合などは、検討の価値はあります。


相互リンク
SEOの評価としては、かなり落ちますが、まだまだ使える手法です。
ここで、先ほどの「同業種」からのリンクが効いてきます。
また同業種ではなくとも、ページランクの高いサイトからのリンクはかなり有効ですので、ページランクの高いサイトからの相互リンクを積極的に探すと言うのも、方法としてはありです。


無料ブログからのリンク
無料のブログをサテライトブログ※として運営している場合は、ある程度の条件を満たすと、特にGoogleにおいて効果を発揮します。

「定期更新」と「記事のボリューム」の2点を満たせば、それなりの効果が見込めます。
記事は、出来れば毎日更新して、記事の数を50記事まで目指します。内容はテキストで最低でも500文字以上は欲しいです。記事数が目標を越えれば、週一回程度の更新でもいいでしょう。
その時に、サイトに対するリンクは、出来れば本文内に入れるのがベストです。


大体、リンクに関しては上記のようになっています。

ここで一つ、注意が必要です、
SEO業者で、リンクを1000社します。などと謳っている業者がありますが、もし契約しようと思っておられるならご注意ください。Googleでは、そう言ったリンク業者からのリンクをサイト評価として認めない場合があります。

内的要因も重要ですが、外的要因もSEOには欠かせません。
内的要因がサイトの健全性、外的要因がサイトの信頼性、という評価基準であると思って頂ければ、解りやすいかと思います。

SEOについては、アルゴリズムが常に変化しますが、それは評価の中身が変わるという事ではなく、基本的な評価基準に付加されると言った方がわかりやすかもしれません。

基本はあくまで、「サイトの健全性と信頼性」と言う処に辿りつくのですから。




サテライトブログ※
サテライトブログとは、その名の通り、本サイトの衛星(サテライト)的ブログとなります。
本サイトに対して、被リンクを設定する為に作られる場合が多いのですが、色々と運営の問題も有ります。
かく言う当ブログも、サテライトブログですが(笑




SEOってなんですか? その1 今さら……第41回


SEOってなんですか? その2 今さら……第42回


SEOってなんですか? その3 今さら……第43回


SEOってなんですか? その4 今さら……第44回




2012年8月24日金曜日

SEOってなんですか? その2 今さら……第42回


今さら聞けないネットのあれこれ。
今回は
「内部SEOと言う考え方」
についてお話します。


重要度:★★★★★
難易度:?


前回はSEOについての、基本的な考え方をお話しました。

で、今回はより具体的なお話をします。
前回も少し触れましたが、SEOには「内的要因」「外的要因」があります。

今回は「内的要因」についてお話します。

 そもそもSEOの判断基準は何か?
サイト内に記述されている情報が、検索キーワードに対して、正しいかどうか?
とうい事が、最も重要視されます。と前回言いました。

つまり、サイト内に検索キーワードが存在していなければ、検索対象にはならないのです。

 では、そのアルゴリズムの中身はどうなっているのか?
これは、SEOを生業にしている業者ですら知らないし、Googleの一般社員ですら知らないトップシークレットです。
しかし、ヒントは提供されているので、それを基に日々トライ&エラーを試すと言う事になります。

前回も書きましたが、要はそのサイトページが信用に足るページかどうか?という事に尽きる事です。
では、どうしたらいいのか?

それはW3C※に準拠した書式で、所定のHTMLタグにキーワードを入れる。

たったこれだけです。非常に簡単です。

所定のHTMLタグとは
1.ページタイトル<title>検索キーワード</title>
2.見出しタグ<h1>検索キーワード</h1>他に言わゆる<h>タグ言われているタグ。
3.本文 <p>タグ内
4.リンク<a>タグ内

最低でも、この四種類のタグにキーワードを入れれば、内部SEOとしては他にすることはありません。
あえて、あげれば本文中に出現する、キーワードの数ぐらいでしょうか。

あまり不自然にキーワードの数を増やすと、スパムページ※として、検索対象から外される可能性がでてくるので、注意が必要です。

本当に、こでだけでいいか?と思われる方もいると思いますが、検索キーワードに対してのサイトページの整合性という事を考えると、これで十分です。

もちろん、もっと色々な事が可能だとは思いますが、出来るだけ単純にした方が、不正が行われにくくなります。単純にすればするほど、他からの介在による不特定因子の排除が簡単になるからです。

元々、これらの事を判断するのは、検索アルゴリズムと言うプログラムです。
プログラムには曖昧な部分はありません。あるのは決められた判断基準に対してのYes or No しか無いのですから、判断基準に無いモノは、All or Nothing なのです。

これなら、判断基準は少ないに越した事はありません。決められた事以外は、全て無しなのですから。

さて、それでは先ほどの項目を解説します。

まず、タイトルタグ。
これは、ページ名称ですからこの中に、キーワードが入っていれば、当然内部にもこのキーワードが適用されているはず。
という推測が出来ます。
もし、ページ名と中身が違っていたら……アルゴリズム的には、表示順位を落とさざるをえないでしょうね。
ある意味、この行為はスパムと認識されるギリギリの行為なのです注意が必要です。


次に、見出しタグ。
ページを開いたときに通常見出しと言うのは、最初の方に目立つ形で表示されるはずです。(一般論として)
つまり、ページ名で使われているキーワードが、見出しという解りやすい形で表示されていることになります。
見出しであると言う事は、このページにおける重要な文章であるはずとアルゴリズムは判断します。
まに<h>タグを使わずに、<fontsize>で文字の大きさを変えている見出しを見ますが、これは全く無意味で、アルゴリズム的には、【タダの大きな文字】としか認識されません。ですからキーワードになりそうなモノは、ある程度必ず<h>タグを使って表示をするようにしましょう。


本文
ここまで来て、本文にキーワードが入っていない……とうい事は無いと思いまので、そのまま話をすすめます。
本文にもキーワードが含まれていて当然ですが、文章全体の文字数に対して、適正量の出現率という考えかたが、アルゴリズムにはあります。
これは、昔不当に連続したキーワードで、上位表示されていた経験からの物です。

まぁ、普通に文章を書いていればそれほど気にする内容ではありませんが。

キーワードリンク
前回の話もで、リンクと言うモノが重要である。と言うお話をしました。
あのときは、あくまで外部リンクでした。しかしサイト内リンクでも、アルゴリズムは【重要な語句】として判断します。
特に画像よるボタンリンクではなく、テキストリンクは重要で、サイト内と言えどもおろそかに出来ません。
キーワードリンクがあるページと無いページでは、重要度の判断が全く違ってくるので、可能な限りリンクを作るようにします。

色々と書きましたが、実は非常に簡単な理屈で評価されています。
つまり、
タイトル→見出し→本文 
そして、検索キーワードのテキストリンクがあるか否か。
と言う順番にページを評価してます。
この流れが滞り無く流れれば、内部SEOとしてはひとまず及第点です。

つまり、アルゴリズムが評価するのは、検索キーワードに対して「誠実かどうか」ということになります。

これが出来れば、SEO対策の半分ぐらい?は完了です。
残りの半分は「外部要因」となり、これは自力ではあまり出来ない、少々厄介な物になります。

と言う事で、今回はここまで。
次回は「外部要因」についてお話します。



W3C
World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)は、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体。略称はW3C(ダブリュースリーシー)。  出典:Wikipedia w3c


スパムページ
検索エンジンスパム(けんさくエンジンスパム、英:spamdexing)とは、Google検索やYahoo! 検索等の検索エンジンで自身のウェブサイトが検索結果の上位に表示させるように、何らかの仕掛けをすること、および施されたウェブページをいう。こと検索エンジンから所定サイトへ、不適切に誘導されたケースにおいてこのように表現される。 出典:Wikipedia 検索エンジンスパム


2012年8月23日木曜日

SEOってなんですか? その1 今さら……第41回


今さら聞けないネットのあれこれ。
今回は
「SEO(サーチエンジン最適化)」
についてお話します。


重要度:★★★★★
難易度:?


今回を含めて、複数回の予定をしております。
また、具体的なSEOテクニックと言う事ではなく「SEOの概論」的なお話にしようと思っています。

もちろん掲載途中で仕様変更が入るかもしれません(この業界では、仕様変更は当たり前なので)
SEOの概論と言うと難しく聞こえますが、要するに「SEOと言うシステムが目指している先」とでも言いましょうか。
つまり、SEO対策として行なわれる内容についての具体的なお話。をしたいと思います。

ぶっちゃけた話
「技術論抜きで、SEOの手法を説明しよう」
というお話です。

小難しいテクニックや専門用語は出来るだけ無くしたいと思いますが、出来てきた時は補足するので、宜しくお願いします。

前置きはこんなモノで。

そもそも、SEOとはどんなモノだか、ご存じでしょうか?

多くの方が
「サーチエンジンのでの検索上位表示の為のモノ」
と思っておられるようですが……  間違いではありませんが、正解でもありません。

SEOとは
「検索アルゴリズムに理解されやすい、内容のサイトに変更する作業」

「リンク等による、アルゴリズム評価の為の外部要因作り」
の2種類になります。
では、その検索アルゴリズム※とは何ぞや?と言う事ですが、端的に説明すると、

「特定の検索キーワードの含まれる、WEBページを表示しなさい」
と言うモノです。もう少し具体的に言えば、

「特定の検索キーワードが本文中に適度の文章量で入っていて、尚かつその文章の内容が検索キーワードに対して正しい文章であり、その検索キーワードが、他サイトから評価(リンク)されている」

という事になります。
解りにくいかな?少し整理しましょう。

まず、【検索キーワード】と言う、絶対的存在があります。
この検索キーワードが無ければ、検索のしようも無いので当り前ですね。

次に、
【検索キーワードが本文中に適度の文章量で入っている】
これは、WEBページ内の本文(タイトルや見出し含む)に検索キーワードが複数含まれる事を意味します。
その昔、特定の検索キーワードだけを羅列する事で、検索順位をあげる行為があった為の対応です。

次に、
【文章の内容が、検索キーワードに対して正しい文章になっているか】
これも前出の項目と同じで、ページと関係ないキーワードで、順位をあげない対応です。

最後に、
【検索キーワードが、他サイトから評価(リンク)されているか】
これは、内的(サイト内)の評価(文章の内容や、構成ではなく)外的要因からのサイト評価を示したモノです。

他のサイトからリンクをもらうと言う行為は、そのサイトが【リンクに値する】解りやすく言えば【他の人にも見て貰いたい】または【友人等に紹介してもよい】という判断で、リンクを設定する場合が殆どだと思います。
つまり、リンクを設定すると言う行為は
「そのサイトは信用に値する」
という判断が出来ます。

これを見ると、検索アルゴリズムが求めている事がよく解ります。

つまり、
「検索キーワードに対して、正しい文章内容(構成)と、外部からの信頼」
と言う事に集約されます。要するに、検索キーワードに対して、最適と思われるWEBページを上記の方法で探し出せ。
という事です。

逆にいえば、上記以外の方法ではWEBページを評価しないという事にもなります。

非常に大雑把ではありますが、これがSEOの根底となる考え方です。
この考え方は、1990年代には一部のサーチエンジンで考えられていた事で、その後幾つかの改編があり、現在の形に落ちつきました。

現在のこの考え方は、ほぼ完成型で今後全く新しいアルゴリズム、またはWEBの評価形式が開発されない限り、継続される考え方です。

別段特殊な方法は用いずにごく当たり前の手法で評価しています。もちろん技術的なテクニックと言うもは必要ですが、この基本的な考え方さえ間違っていなければ、サーチエンジンはサイトに対して適正な評価を下します。

SEOがやっている事を、大体ご理解して頂けたでしょうか。SEOなどと言う横文字を使うと、何かとても難しい事をしている様に聞こえますが、非常にシンプルで解りやすい事だと思いませんか?


今回は、この辺で終わりにします。
次回は、その評価システムについて、少々技術的な内容も含めて、ご説明します。



検索アルゴリズム
つまり、検索する為の、評価手順とでも言いましょうか。特定の算定方式を用いて、任意の情報(答え)を導きだすモノです。
このアルゴリズムが全ての基準になります。



SEOってなんですか? その1 今さら……第41回


SEOってなんですか? その2 今さら……第42回






2012年8月21日火曜日

書籍は基本中の基本です。


初心者WEBデザイン?
【技術参考書】について

現在、インターネットを使えばほぼどんな事でも、無料で調べる事が出来ます。 しかし、それはあくまで、形に残らないデジタルなモノ。

ページをプリントアウトすれば、それはアナログな資料として、役には立ちますが基本的にバラバラな情報なので、他の情報との互換が取れない事が多く、その為にまた検索(調べる)を繰り返す事になります。

インターネットは、調べる事に関しては、非常に便利なツールですが、その情報が体系化されていない場合が多い為に、バラバラの情報でしか取得できない状態です。

では、そうした情報検索を繰り返さない方法は無いのか?というと。あります。非常にアナログな手段で、しかも効率的。
そう、書籍です。紙媒体の「本」です。

そもそも書籍、特に技術参考書は、それ一冊である程度の知識(情報)をカバー出来る内容が網羅されています。
しかも、ネットのように変化しない情報として存在します。また、その情報の価値は著者あるいは出版社が責任を持ち「確かな情報」としてその内容が保証されています。

ネットユーザーが片手間に書いた不確定な情報ではないと言う事です。
(全てのネット情報がそうではありませんので、ご了承ください)

それでは、どういった書籍を購入すれば良いのか?
まず、最低限2種類を購入してください。
一種類はHowTo系のもの、もう一種類は辞典またはリファレンス系の物を、購入してください。

購入するさいの目安と言うか基準ですが、
私はAmazonのカスタマーレビューを参考にしています。

技術書のカスタマーレビューはかなり詳しく書いてある事が多いので、役に立ちます。

個人的には、「一週間で~出来る」や「10日間で~出来る」などのHowTo系は、お勧めですね。
一日で出来る量を決めてあるので、作業もしやすいですし、基本的に「初心者」を対象とした本なので、最初から体系的に学ぶことができるからです。

また、このての書籍の場合、「自分でソースコードを打ち込む」という行為が必要になります。
これが非常に重要で、オーサリングソフトを使わずに、単なるテキストエディタでのソース打ちは、WEB制作をする上で非常に重要な行為なのです。

逆にいえば、HTMLの知識も持たずに、オーサリングソフトを使ったところで、宝の持ち腐れと言ったところです。
参考書のまる写しとは言え、自分の手で打ち込んだソースコードは、知識として理解しやすいですし、打ち込む事で考える事が出来るので、とても重要です。

最初は、戸惑う事も有るかもしれませんが、まず書籍を購入して、実践する事が重要です。
非常にアナログな手法ですが、この方法がサイト制作における基本となるので、がんばってください。




2012年8月9日木曜日

ファイル拡張子は表示していますか?


初心者WEBデザイン?
【ファイル拡張子】について

ファイル拡張子はweb制作でとても重要です。

そこで、貴方に質問です。
貴方のパソコンの設定は、ファイル拡張子を表示する設定になっていますか?

表示する設定になっている方は、GOODです。
もし表示されない(一般的な拡張子は表示しない)設定になっているようならば、設定を変更して、全てのファイル拡張子を表示する設定にしましょう。

表示させる方法については、

各OS名 ファイル拡張子 表示

と言ったキーワードで検索すれば、出てきますので各自参照してください。

さて、何故ファイル拡張子が重要なのか?と言うと、webに限った事ではないのですが、基本的にリンクを作る際に、ファイル名が必要になりますが、このファイル名と言うのが、拡張子込みの名前だと言う事です。

web制作の基本として、リンクは切っても切り離せんません。
というか、リンク無しではwebサイトは成立しないと言ってもいいでしょう。

いや言い切ります。「リンク無しでは無理だから!」

と言う事で、絶対にリンク無しでは作れないwebサイト。
拡張子の表示が何故重要か?

例えば、拡張子を表示していない場合、
abc.jpgabc.gifはPC上では同じ「abc」と言う表示しかされていません。

え?アイコン表示が違うから大丈夫?

確かに、jpgとgifではアイコンの表示は違います。しかし、webサイト制作では拡張子までがファイルの名前なのです。
先ほどから言っている、リンクでは拡張子込みでないと、リンクの機能をしません。
つまり、使われている拡張子が不明では、リンクが出来ないと言う事になります。また、先ほどのように、「同じ名前のファイル」の場合、どちらにリンクすればよいのか、すぐに判断できない場合もあります。

まぁ、ファイルがわかっていれば、リンクの心配もいらいないのですが、もしリンク切れ等が起きた場合に、拡張子が不明だと対応に手間取る事が予想されます。

そう言った、不具合対策も含めて、拡張子に慣れておく事が重要です。
また、アイコンの表示ではなく、ファイル名での表示に慣れておく事も重要です。

web制作では、FTPというソフト用います。このソフトは基本的にファイル名を並べるだけの機能しかありません。
普段アイコン表示に慣れている人には、非常に見づらい表示だと思います。
しかし、web制作ではむしろこういったファイル名のみの表示と言う作業状況がしばしばあります。
そう言った状況に慣れる為にも、アイコン表示からファイル名表示に慣れておく事をお勧めします。




2012年8月7日火曜日

Modx Dittoのfilterで50音別にリスト分け【表示スニペット】

Modx Dittoのfilterで50音別にリスト分け

店舗名称や商品名称など、意外と50音順に並べ替えてみたい事が、時々あります。

今回は、Dittoのfilter機能を使って、50音順にリスト化するスニペットを作ります。

基本スニペット

[!Ditto? &parents=`指定id` &tpl=`指定テンプレート` &showInMenuOnly=`1`  &filter=`ふりがな,あ,6|ふりがな,か,5` &orderBy=`ふりがな ASC`!]

解説
parents
親ドキュメントの指定

tpl
表示テンプレートの指定

showInMenuOnly
メニュー表示がされているモノのみ選択。

filter
テンプレート変数:ふりがなの、【あ】という言葉以上を選び、or ふりがなの【か】までを取得しなさい。

orderBy
取得たデータのテンプレート変数:ふりがなを、【あ】から順番に表示しなさい。

filterパラメーターの書き方の詳細は、下記参照でお願いします。
http://www.modx.liolion.net/resource/ditto2.html

説明
指定した親ID以下のリソースページの【ふりがな】というテンプレート変数に入力された、テキストを抜き出し、そのテキストを、あ~おの順番に並べ変えて、表示しなさい。
と言った内容です。

このスニペットのキモは、やはりfilterパラメーターの扱いです。

今回の設定で言えば、【あ】よりも大きい。つまり50音で言う【あ】以降の文字全てを選びなさい。という条件付けがされています。しかし、このままでは50音全ての文字が取得されてしまうので、どこかで取得を止めなければなりません。そこでもう一つのパラメーターを設定します。

filterパラメーターは、複数条件の指定が出来ます。各条件の関連はORです。
通常で考えれば「AまたはB」という考え方になりますが、入力設定のmodeで抽出条件の設定を変えることで、取得を止めます。

今回は、【あ行】の取得が目的ですので、【お】までの文字列を取得できれば良いですから、下記のようなパラメーターを設定します。

【ふりがな,か,5】

これは、【ふりがな】から【か】以下※の文字を取得しなさい。となります。

つまり、「あ~お」までの値を抜き出した事になります。

これで、あ行の取得設定が出来たことになります。
同様のやり方で、か行以降のスニペットを作れば、50音全ての取得設定が可能です。

さて、カンの良い人はお気づきかと思いますが、この条件だと50音にしか対応していません。つまりアルファベットや数字には対応していない状態です。

アルファベットや数字の場合も同様のスニペット設定で取得が可能ですので、アルファベット用や数字用といったスニペットを用意すれば、それぞれのリスト制作が可能です。

今回あらためて、Dittoの強力なデータ抽出を実感しましたが、奥が深いというよりも、色々と実験してみて、初めて判ることがまだまだあるなぁと感心しました。と同時に、MODxは本当に「決まった型のない、カスタマイズ思考の強いCMS」だとあらためて思いました。



本来はあ行であれば、あ~おなので、取得終了は【お】で良いのでは?と思われがちですが、
【お】で終了設定をすると、【お】が含まれない状態になるので、一つ先の【か】までを取得条件としています。





2012年8月2日木曜日

PCを快適に使うために 今さら……第40回


今さら聞けないネットのあれこれ。
今回は
「デスク クリーンアップ」
についてお話します。


重要度:★★★★★
難易度:★

パソコンを快適に使うために、定期的なメンテナンスは必要不可欠ですが、意外と面倒だったり時間がかかったりして、おろそかにしていませんか?特にハードディスク容量の逼迫は、マシントラブルの元です、空き容量が少ないとOSが不安定になりやすくなります。いったん不安定になったOSを修復するのは、結構大変です。

パソコンは機械ですから、調子が悪くなっても自己修復はしてくれません。多少面倒でもある程度定期的にメンテナンスをする事が、トラブル防止の上で必要です。そこで比較的簡単に行える、メンテンスをご紹介します。

1.メールの削除
パソコンを使っていて、メールを使用しない人は多分いませんよね?
メールは日々蓄積されるデータです。
毎日メールの整理が出来れば理想ですが、そうもいきません。
そこで最低月1回、メールソフト内のメールを整理しましょう。

このメールの整理で、それなりにハードディスクの容量に空きが出ます。
1通のメールそのものは済少ない容量でも、蓄積されればそれなりの容量になりますから、不要なメールは削除しましょう。

一番いいのは、その場で不要なメールは削除する習慣を付けることです。
特にスパムメールはその場で削除する事で、ウィルス等への感染も防げます。



2.ディスク クリーンアップ
これは、使用していない古いファイルを圧縮して、ハードデスクの空き容量を確保します。

パソコンには様々な形でデータが存在します。特に不可視ファイルと呼ばれる類のファイルは多数存在していて、我々の見えないところでデータとして存在します。
そう言ったファイルは、通常の削除作業が出来ません。

例えば、ごみ箱から削除したファイルを復活させるソフトがあります。そのソフトは、どうやってファイルを復活させるのでしょうか?削除されたはずのファイルが復活する?
そのからくりは完全に削除されていないからです。

つまり、見た目上は削除されましたが、別の形でまだ残っているのです
復活ソフトの多くは、その残っているデータを元に戻すだけです。

その他にも、パソコンを快適に使うために多数の不可視ファイルを使用します。そう言ったファイルで、使用していないモノをを選び出し、削除する事が、ディスク クリーンアップになります。

作業は簡単です。

Windows XP
[スタート] をクリックし、[すべてのプログラム]、[アクセサリ]、[システム ツール] の順にポイントします。次に、[ディスク クリーンアップ]を選択します。


Windows Vista Windows7
アクセサリのシステムツールにあるディスク クリーンアップをクリックすると、PC上の不要なファイルを削除するツールが起動します。


ディスク クリーンアップを定期的に行う事で、常に空き容量が確保されます。また定期的に行うメリットとして、ディスク クリーンアップの時間短縮と言う恩恵があります。
これは定期的に行う事で、圧縮するファイルの数を少なくする事が出来るからです。不具合が出始めてからのディスク クリーンアップは非常に時間がかかりますから、できるだけこまめにディスク クリーンアップをするようにしましょう。

また、ディスク クリーンアップをすることで、パソコンを立ち上げた時に、高速起動が可能になります。これは起動時に読み込む不要ファイルが減る事で高速の起動が出来るようになるものです。

いずれにしても、最低でも3カ月に1回ぐらいは、パソコンのメンテナンスをする習慣をつけましょう。




2012年8月1日水曜日

ブラウザーの検索方法 今さら……第39回


今さら聞けないネットのあれこれ。
今回は
「ブラウザーの検索テクニック」
についてお話します。


重要度:★★★★★
難易度:★



仕事柄、サーチエンジンでの検索は頻繁に行いますが、一般の方は検索テクニックを意外とご存じないようなので、検索テクニックについてのお話です。

通常、検索を行う際に複数の検索キーワードを入れて、検索する、いわゆるand検索とor検索と言うモノはご存知の方もいるかと思いますが、その他にもちょっと使える検索テクニックをご紹介します。


and検索
入力方法:●● ××
●●と××の間にスペース(全角でも半角でも可)を入れることで、複数のキーワードが入ったサイトページを検索します。このキーワードを増やすこと(3つから4つのキーワード)で、より探している目的に近いサイトページが見つかりやすくなります。

or検索
入力方法:●● or ××
●●もしくは××のキーワードが入ったサイトページを検索します。
入力時に必ずorの前後にスペースを入れてください。スペースを入れないと「●●or××」という一つのキーワードでの検索になってしまうので、注意してください。

not検索
入力方法:●● -××
ベースになるキーワードから、否定するキーワード文を指定することで、検索結果を具体的に絞り込むことが出来ます。
否定(除外)するキーワードの前に-(マイナス)を入れます。-は半角です。
例えば、プロ野球の情報で、巨人以外の情報が欲しい場合、「プロ野球 -巨人」とすれば、プロ野球という検索結果の中から、巨人と言うキーワードが入ったページを除外した検索結果が表示されます。

そのほか単語だけではなく、単語+接続詞や、より具体的な文章などを入力すると、検索結果の精度が上がります。

また、少し特殊ですが下記のような検索もできます。

「intitle:○○」:ページタイトルに○○が含まれる
「inurl:○○」:urlに○○が含まれる

などの検索方法もあります。

サーチエンジンによっては、特殊な検索方法もあるので、検索のスピードUPを考えているのであれば、どのような検索方法があるのか探してみることも、面白いと思います。



※GoogleおよびYahooにて、上記の検索方法は可能ですが、他のサーチエンジンで上記の検索方法が行えるかについては、検証していませんので、ご了承ください。


2012年7月30日月曜日

基本構造は理解していますか?


初心者WEBデザイン?
【基本構造の理解】について


WEBサイト制作を勉強しようとした時に、まず思いつく事が、HTMLを勉強しよう。 と、誰しもが思うはずですが……  ちょっと待ってください。

初心者がいきなりHTMLを勉強しても、おそらく上手くは行きません。
もちろん、HTMLを勉強する事は間違っていませんが、その前にブラウザーで表示されているHTMLや画像の構成や理屈は理解していますか?

最近は、HTMLやCSSをよくご存じのクライアントさんも大勢いるのですが、大元の基本構造を理解していない、あるいは間違って覚えてしまっている為に、ミスを犯すシーンを良く見かけます。

例えば、サイト上で使用する画像とHTMLとの関係は?
よく見るHowTo本では、「画像はimgフォルダーに入れて使用しましょう」と書かれています。もちろんこれは間違いではありませんが、少々言葉が足りません。(詳しく書くとややこしくなるので書きませんが)

また、外部からのプログラムをサイト内で利用する場合や、リンクと言う考えかたなど。

HTML以外にまず「HTMLを表示させる為の基本的な構造」を理解していないと、制作途中で躓いた時に、その原因究明に時間が掛かっていまいます。

例えばよく見かける、画像が表示されない状態になった時に、画像が表示される構造と条件を理解していれば、原因を突き止める事は容易ですが、その基本的な事を理解していないと「どうしてそうなっているのか」という簡単な事も解りません。原因が付きとめられなければ、修正も出来ません。

昨今は、情報が氾濫していて、HTML関係の記述テクニックや解説サイトが多数ありますが、WEBページの基本的な構造を解説したページは意外と少ないです。しかし、さほど難しい事でもないし、(だから見落とされがちなんですが)HTML関連の書籍の最初の方に必ず、その手の内容が記載されているので、読み飛ばさずに、最初からきちんと読んで理解することをお勧めします。

この部分の理解力いかんでは、その後の勉強の速度に違いが出る事があるので、じっくり勉強しましょう。

2012年7月26日木曜日

ターゲットブラウザー について


初心者WEBデザイン?
【ターゲットブラウザー】について

これは、殆どプロの領域なのですが、特定のブラウザーを決めて、そのブラウザーに対して正確に表示される為のサイト制作を行う。つまり、制作の基準となるブラウザーを決める作業の事です。

アマチュアであれば、今使っているブラウザーでの表示が出来れば、とりあえずOK?なのでしょうが、現在のインターネット環境には、複数のブラウザーが存在しており、必ずしも自分(制作者)と同じブラウザーでサイトを閲覧してもらえる訳ではありません。

そこで、閲覧するブラウザーを幾つか決める、つまり「ターゲットとするブラウザーを決定する事」を「ターゲットブラウザー」と言います。

本来は、閲覧される可能性のあるブラウザー全てをターゲットブラウザーとしたいところですが、何しろ、ブラウザーは各ヴァージョンによって、その仕様が変わるので、同じブラウザーでも、ヴァージョン違いで表示が全く変わる事は珍しくはありません。

つまり、全てのブラウザーを網羅する為には、各ブラウザーの全てのヴァージョンを揃えないといけません。
また当然ですが、元になるPCのOSによっても、違いが発生しますので、例えばWinとMacでは同じブラウザーの同じヴァージョンを使っていてもそれは「違うブラウザー」となります。

そう考えると、全てのブラウザーをターゲットとする事は現実的ではない。と言う事が解るかと思います。

では、どうしたら良いのか?
そこで登場するのが【ターゲットブラウザー】という考え方です。つまり特定の方法や、基準を用いて、ブラウザーを選定します。

選定方法で最も多い方法は、ブラウザーシェアによる選定方法です。
これは、インターネットで使われている、各ブラウザーのシェアの多いモノから順に選ぶと言うやり方です。

下の画像は、アクセス解析サービス「StatCounter」(アイルランド)が提供する「StatCounter Global Stats」より日本のブラウザシェアの統計グラフを掲載しています。



これを見て頂ければ、IE(Microsoft Internet Explorer)が最も多いブラウザーである事が解ります。
次点としてFF(Mozilla Firefox)。僅差でCr(Google Chrome)が続きます。

この状況を見る限り、ターゲットブラウザーは、IE・FF・Crなどを選定しておけば、大多数のユーザーがカバー出来るようになります。

この統計は、ブラウザーのヴァージョンは明記していないので、あくまでブラウザーの種類別という大雑把な括りですが、ターゲットブラウザーを選定する目安としては、とりあえず十分だと思います。

別の選定方法もありますが、これは初心者向きでは無いので、またの機会に。

また、先日のモニターサイズと同じで、こちらもブラウザーのトレンド?があるので、1年に一回ぐらいは、ブラウザーシェアの動向は確認しておいた方が良いですね。

いずれにしても、WEBサイトを制作するのであれば、複数のブラウザーで、そのサイトがどのように見えるのかと言う事ぐらいは確認する必要がある。 というお話です。


2012年7月25日水曜日

サイト幅につてい


初心者WEBデザイン?
【サイト幅】につてい

たとえプロでもアマでも、WEBサイトを作る上で、一番最初に決めなければならない事があります。
それは、サイトの画面幅です。

サイト制作以前にデザインを起こすにしても、まずサイトの幅を決めない事には、デザインも作れません。

では、一般的にサイトの横幅は決まっているのか?
これが、具体的な数字は決まっていないと言うのが現状です。
(大まかな横幅はある程度決まっていますが。)

で、基本的にサイトをデザインする上での方法として、2種類の方法があります。

固定レイアウトとリキッドレイアウト

固定レイアウトとは、サイトの横幅を固定して、画面の大小にかかわらず、常に同じ大きさで表示をするレイアウトで大多数のサイトで導入されています。

リキッドレイアウトとは、サイトの横幅を画面(モニター)に合わせて伸縮するデザインで、主に情報系のサイトに多いレイアウトです。代表的なサイトはアマゾンやウィキペディアなどがあります。
これは、固定レイアウトとは違い、幅の指定を画面全体に対する%比率で設定しています。
つまり、モニターの表示解像度に対して自動的に変化する方法です。

どちらもの場合も、元になる最小限の横幅があります。リキッドレイアウトでも横幅に対して常に一定の比率で変化したのでは、画面を小さくした時に、レイアウトがおかしくなるので、変化の最小値を設定してあります。

最近ではサイトの横幅は900~980pxが大体の標準幅ですね。おそらくリキッドレイアウトでも、最小値は900pxあたりの数値を入れているはずです。この横幅であれば、17インチのモニターから、24インチのワイドモニターまで問題なく表示できます。ただし15インチモニターを考慮に入れると、800px程度までサイズダウンが必要になります。

ここ数年のモニタートレンドとして、縦横比が16:9の横長画面(ワイド画面)の液晶モニターが一般化しています。
この横長のモニターだと、今までの固定レイアウトでは、左右に大きな余白が生まれてしまい、どうもデザイン的に見栄えが悪い場合があるので、リキッドレイアウトが少しずつ増えている様です。ただ、リキッドレイアウトは横に伸びる性格上、画像の配置やテキストの長さなどに神経を配らないと、見た目が悪くなりリキッドレイアウトの良さが失われてしまうので、注意が必要です。

まぁ、これはあくまで2012年現在の話なので、5年後には21インチモニタが普及サイズになっていて、画面サイズも1200~1300pxになっているかもしれません。これは時代の流れなので、仕方がありません。
そう言った情報を集めて、日々何がベターなのかと言う事を自分の中に基準として作っておく事が、デザインをする上で必要になってきます。



2012年7月23日月曜日

初心者WEBデザイン


それ行け初心者 WEBデザイン

ブログの連載ネタの一つとして、WEBデザイン?の初心者向け講座的な内容をやっています。

テクニック的な部分は少なめにして、むしろ概論や構造などが主体になるかな。
例えばHTMLにしても、CSSにしても調べる気があれば、今のネット社会で、調べられないことは殆ど無いので、明確な答えが解る場合はネットで探して頂いて、どちらかと言うと、答えが曖昧な事についてお話して行こうかと思っています。

さて、と言うことでWEBサイト制作に必要な知識と言うのはどのくらい必要なのか?下記のリストをご覧ください。

このリストはWEBサイト制作に必要な知識です。もちろん専門知識もあるので、全てを覚える必要はありませんが、最低限でも必須項目ぐらいは、理解しておかないと、トラブル対応が出来ないので、最低限の概念として覚えておけばいいかと思います。


WEBサイト制作に必要な知識。

は必須
概念として必要

言語
HTML
JavaScript
CSS
cgi
php
Mysqlに代表されるデータベース

ソフト
画像加工ソフト
オーサリングソフト
FTPソフト

ハード
WEBサーバーに関して
ドメインに関して
WEBメールに関して
インターネットに関して
データベースに関して


ざっと見て、これだけの事を理解していないと、WEBサイトの制作は難しいです。
もちろん全てを覚える必要はありません。あくまで概念として、「これはどういったことなのか?」という事を覚えておく程度で問題ありません。

正直なお話、これだけ覚えるにはそれなりに時間とお金が掛かるので……
とわ言え、あくまで初心者向け?の内容なので、出来るだけ簡単に説明したいと思っています。






2012年7月18日水曜日

WEBで使用する画像の種類 今さら……第38回

今さら聞けないネットのあれこれ。
今回は
「サイトで使用する画像の種類」
についてお話します。


重要度:★★★
難易度:★★★



サイト制作で使用する画像は大きく別けて、GIF・JPG・PNGの3種類があります。

当然3種類とも特徴があり、それぞれに適した使用目的があります。

詳しく話せば、小一時間は話が出来るほど、実は奥が深い話ですが面倒なので、ざっくり判りやすくお話します。

後ほどサンプル画像をよく見ていただければ、判ると思いますので、簡単に説明します。

GIF画像
主に画像変化の少ないイラストなどに用いる。(グラデーションが多用されていると、問題あり)

短所
表示色数が最高で256色しかないために、写真などの保存にはあまり向かない。
またデータ保存の方法により、グラデーションの表現が弱く、綺麗に表示できない。


JPG画像
主に写真などの色数の多いものや、グラデーションが多用された画像に用いる。

短所
JPGは保存を繰り返すと、データの劣化が進み画像が荒れる特性を持つので、可能な限り保存を繰り返さないようにする。また、広い面に単一色(バックグラウンド等)が適用された画像などでは、極所的に画像の荒れが起きてしまうので、注意が必要。


PNG画像
イラスト・写真など特にデザインを選ばない。また画像の透過※1も出来るので、WEBには非常に向いている形式。

短所
JPG のように画像劣化が起きない分、綺麗な画像を制作できるが、その反面ファイルサイズが肥大化してしまうので、使用する場合は注意が必要。


ざっくり説明すると以上のようになります。

実際、私の場合は複数の保存データを作って、どれが最適か?という作業をします。
まずは、画像の劣化を確認して、その上でファイル容量の軽い(少ない)画像を選びます。

1.複数のフォーマットを見比べて、劣化の少ない画像を選ぶ。
2.選んだ画像のファイル容量の少ない画像を選ぶ。

特殊な使用目的、またはどうしてもその画像フォーマットでなければならない場合以外は、上記の方法で、画像を選定しています。

まぁ、基本的に綺麗であれば、良いとは思いますが、あまり画像容量の多き画像は、表示に時間がかかったりするので、気を付けてください。


サンプル画像 どの画像も 画像サイズ 横400 縦300px で制作してあります。

写真をベースとした各種フォーマット画像
GIF 128色
容量:38.2 KB

解りにくいかもしれませんが、おでこ付近の色がグラデーションでは無く、段階的にトーンを配置している様になっています。
 JPG 60%圧縮
容量:9.15 KB

WEBで使用する一般的な圧縮率60%の画像。
全体的にシャープ感に欠けるぼやけた感じ。
しかし、画像容量としては非常に軽くなっている。
PNG-24

容量:163 KB

JPGに比べて約16倍という非常に容量のあるデータ。
しかし、画像の劣化は少なく非常に綺麗な仕上がり。















イラストをベースとした、各種フォーマット画像


GIF 128色
容量:45.6 KB

赤のグラデーション部分が段階的なトーンに変更されている。
また画像容量も、肥大化している。










JPG 60%圧縮
容量:28.1 KB

写真同様、全体にぼやけた感じでの仕上がり、また【JPG】と書かれた文字の脇付近で画像の劣化によるバターンが確認できる。











PNG-24
容量:163 KB

写真の時と同様、綺麗な画像だがやはり容量はかなり大きい。














それぞれの、画像の中から、使用する画像を選ぶとすれば、ここはやはりJPGの圧縮率を上げた画像(80%圧縮)程度を使用する事がベターだと思う。

もちろん、画像の綺麗さを強調する必要なサイトであれば、やはりPNGを選択するだろう。
また、今回のサンプルはグラデーションのキツイモノを選んだので、GIFの出番はありませんでしたが、シンプルなイラストの場合は、やはりGIFが一番良いです。

このように、使用する画像の構成によって、フォーマットを変える事で、より快適で綺麗なサイト制作が出来ます。


透過※1
PNGは、画像そのものを透過させる事が可能な形式で、特殊な効果を使いたい時に、重宝する形式です。ただし。透過PNGはファイル容量も大きくなるので、扱いは十分に検討してかが良いでしょう。



2012年7月17日火曜日

無料の画像加工ソフト 今さら……第37回


無料の画像加工ソフト 今さら……第37回

今さら聞けないネットのあれこれ。
今回は
「無料の画像加工ソフト」
についてお話します。

重要度:★★★
難易度:★★★

最近はサイト管理もCMSなどを使って、ユーザーが変更・更新を行えるシステムが増えています。また、ユーザーの中には、HTMLやCSSを理解している方も数多くおられます。しかし…… サイト内で使われている画像を加工しようと思った時に、画像加工ソフトが無い為に、困った。というお話を伺います。

そこで調べたのですが、今はフリーソフトで高機能な物も数多く出ているので、それらを試すのもよいでしょう。

http://freesoft-100.com/pasokon/viewer.html

http://www.solapane.info/

上記の2サイトからそれぞれの加工に特化したソフトを3~4本選べば、おそらくフォトショップと遜色のない加工が可能になるはずです。

また、最近はオンラインでの画像加工サービスも出てきているので、ソフトをインストールする必要が無いものもあります。

そう言った、サービスを利用する事で、高価なソフトを購入しなくとも、綺麗な仕上がりの画像が加工できるようになります。

2012年7月9日月曜日

Facebookアプリページのスクロールバー


フェイスブックはすぐに仕様を変更するから……

先日、アプリページのスクロールバーを消せない……
と記事を書きましたが、どうやら消す事が出来ました。






下記のコードを</body>の直前に書きます。


<div id="fb-root"></div>
<script>
(function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
    document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
    FB.init({
        appId: 'アプリID',
        status: true,
        cookie: true
    });
    FB.Canvas.setAutoGrow();
};
</script>



これで、先日まで苦労?していたスクロールバーともオサラバ出来ました。

普通に制作すれば……

実は、アプリページ内にシェアボタンを設置すると、スクロールバーが表示されます。
どうも、シェアボタンで使用している、FB.Shareのjavascriptが絡んでいるようで、今回もお手上げ……

しかし「いいねボタン」であれば、スクロールバーは表示されないので、いいねボタンを使えば、問題ありません。

現在フェイスブックとしては、シェアボタンは正式に対応していないボタンなので、いいねボタンに対応させる為の嫌がらせ?のように見えてしまうのは、私だけ?

まぁ、そんな事を言っても、この方法もいつ使えなくなるかわからない。
そう、facebookは簡単に仕様変更を行って、「変えたから、宜しくね!」と言って終わらせるからなぁ。

しかも技術関連のレポートは翻訳しないし……
仕様の変更はかまわないけど、もう少し情報をわかりやすくアナウンスしてほしいもんです。




2012年7月6日金曜日

やはりconcrete5は手ごわい


久しぶりにconcrete5のデザインテンプレートを作ったけど……

やっぱりconcrete5は特殊ですね。
通常だともう少し簡単に作れるはず?だと思うのですが。

色々なCMSを使ってみましたが、運用面ではconcrete5は非常にいい。
優れたUIのおかげで、新規ページを作るのは、非常に楽ですが。

そこにたどり着くまでが結構大変ですね。
パッケージのインストールは、他のCMS同様に簡素化されているので、あっという間に完了します。

しかし、その先が問題。
サイトのデザインをオリジナルのモノを使用とすると、少々?イヤ結構厄介です。

CMSを利用しようと言う人が使うのですから、言語に対する知識は多少あるにしても、いきなりphpファイルの扱いとか書かれても、もうこの時点で???な人も多いのではと思います。

CMSとして日本ではメジャーな?WordPressでも、最終的にphpファイルでの制作が必要になるので、それほどハードルは高くないのかな??

それとも、解説ページの造りが悪いのか?
いずれにしても、concrete5のデザインテンプレートは少々特殊?
カナ。

2012年7月5日木曜日

facebookページのスクロールバーを消す。


いまさらの情報で申し訳ないのですが……
どうも、スクロールバーを消すと不具合が、と言うかですね。どうも

FB.Canvas.setAutoGrow();

の仕様が変った?感じですね。
急遽色々と検証した結果、結論は。


スクロールバーを表示させたくないのであれば、iframe内の表示を
横810px 縦1280px以内の収めるしか方法が無いようです。

どうも今回の変更だと、基本画面サイズを超えた場合に、縦のスクロールバーに関しては表示の回避が出来ないようになってしまったようです。

つまり、基本画面サイズ横810px 縦1280pxまでの大きさならば、スクロールバーの非表示が可能ですが、それを越えた場合、必ずスクロールバーが表示されます。

以前であれば、基本サイズを超えた大きさ(殆どの場合、縦方向)はそのままブラウザーのスクロールバーで下にスクロール出来たのですが、現在の仕様では、あくまでiframe内で処理をするようになっている様です。

つまり、iframeの基本画面サイズである横810px・縦1280pxを越えた場合、iframe内部にスクロールバーが表示されるようになってしまうようです。そう、横810px・縦1280pxの内部にスクロールバーが表示されるので、実際の画面は横810pxで制作すると、右側がスクロールバーで隠れてしまいます。

また、CSSを使って強制的にスクロールバーを非表示にすることも可能ですが、それをやると画面が固定されてしまい、結局基本サイズ以上の表示は出来ないようです。(スクロールバーが表示されず、画面サイズは横810px・縦1280pxのままです)
※CSSでの強制非表示は、bodyタグに対して、縦方向のオーバーフローを非表示にする設定。
body{overflow-y: hidden;}

また、</body>の直前に入れる下記のスクリプトで、高さを指定してみましたが……

<div id="fb-root"></div>
<script>
 FB.Canvas.setAutoGrow({ width: 810, height: 1280 });
</script>

1280px以上の大きさにはならない事がわかりました。
つまり基本画面サイズの横810px・縦1280pxは何をどうやっても変更出来なくなっています。

他にも色々とやってみましたが、結論は……
完全にスクロールバーを消したいのであれば、コンテンツを基本サイズ内に収める事。
しか手立てが無いようです。

もし、コンテンツが基本サイズより、大きくなる様ならば、横幅を790pxで制作する事をお勧めします。
このサイズで制作すれば、縦が1280pxを越えてスクロールバーが表示されても画面右側に余裕があるので、デザイン的に崩れる事はないと思います。
(横790pxだと、横のスクロールバーも表示されません)

これに関して、もしかすると、アプリ系の何か?を変更すれば、表示が出来る??
なんて事は無いと思いますが、いずれにしてもここまで来ると専門外になってしまうので、私には厳しいですね。

この件に関して詳しい方がいましたら、ご連絡ください。
と言うか、誰かこの辺のネタ、書いておらんですかね??


2012/7/9 追記
どうやら、スクロールバーが表示されてる原因を特定しました。
これで、スクロールバーを消す方法が解りましたので、こちらをご覧ください。
http://hon-web.blogspot.jp/2012/07/facebook_09.html