2012年5月28日月曜日


アンケートご協力のお願い
皆様、いつもBligをご覧頂き誠にありがとうございます。
私はFreewayを使って、家具の検索サイトを作成しているのですが、よりユーザーのニーズを反映したものにする為に、皆様の貴重なご意見を伺いたいと思っています。
そこで大変お手数ではございますが、家具購入に関する簡単なアンケートにご協力頂けないでしょうか?
(もちろん匿名でかまいません)

イラストレーター アートボードいっぱいに印刷

備忘録です。



2012年5月19日土曜日

Freeway ロールオーバーをもっと簡単に

Freewayでロールオーバーを作ろうとすると、通常画像とマウスオーバーの種類用意する必要があります。


複製した画像をフォトショップで明るさを下げて.....見たいな事をして画像を作るのですが、ロールオーバーの数が増えるとさすがに面倒ですね。

そこで別の方法を考えてみました。
2枚目の画像を、画像アイテム(黒色カラー)で作成し、半透明にする方法です。

この2枚を重ねて、マウスオーバーしたときに2枚目の画像が表示されるように設定します。

2012年5月18日金曜日

Freeway Windowsで見やすいフォントに変換する

ブラウザーのプログラミングは異なるのだから、全てのプラウザーで同じ見栄えにするのはなかなか困難だと思います。
それよりも大きな問題はフォントです。例えば、私はヒラギノが好きで良く使うのですが、Windowsではヒラギノが標準インストールされていません。
htmlにより、ヒラギノフォントで表示する!と指示を出しても、ヒラギノフォントのデータがインストールされていなパソコンにとってはヒラギノ???となるわけです。
そうなったパソコンは、ヒラギノの代わりに別のフォントで表示しようとします。これがいわゆる『代替フォント』と呼ばれるものです。Freewayのデフォルトの設定では、ヒラギノはMS P ゴシックに代替されます。それによりレイアウトが大きく崩れてしまう事が大きな問題でした。


上記画像をみて頂くと、MS P ゴシックに代替えされた事により、文字が小さく左上に寄ってしまって見栄えが悪くなりました。何よりもMS P ゴシックが美しくない..........。
まずは、代替フォントの仕組みを理解しましょう。

メニュー>編集>フォントセットを開いて下さい。

Hiragino kaku Gothic Proを編集で開いて下さい。

これは、そのフォントが無かった場合に代替えされるフォントの優先順位を左から表しています。つまり、Hiragino kaku Gothic Proが無ければ、Osaka⇨MS P ゴシック⇨sans-serifの順で代替えされて行きます。従って、任意のフォントに代替させたければ『,フォント名』を挿入すれば良いのです。
末尾のsans-serifですが、左記に指定されているフォントが一切無かった場合、ブラウザーの設定のフォントで良いよ。という指示になります。

Windowsでも、Vista以降フォントの改良が加えられました。Meiryo(メイリオ)と言うフォントです。全体がプロポーショナルで、HTML等の文章で使用される事を想定されただけあって、直線と曲線部分がはっきりし、メリハリがあるフォントです。

せっかくなので、MS P ゴシックではなく、メイリオが優先的に代替されるようにフォントセットを編集しましょう。


IE8で見るとこうなりました。ヒラギノ表記に近くなりましたね。

Windows XPではオプションインストールによりメイリオフォントの利用が可能です。

2012年5月17日木曜日

Freeway シンプルサイト検索の対象外とする

前回、シンプルサイト検索を設置して、サイト内を検索できるようにしました。しかし、場合によっては検索対象から外したいページやhtmlアイテムもあると思います。そんな時は下記設定を適用しましょう。

Freeway シンプルサイト検索機能を導入する

サイトのページ数が増えてくると、リンクや文字数が多くなり、お目当ての情報が探しにくくなります。そこで、シンプルサイト検索機能を導入しキーワードでサイト内を検索できるようにしましょう。


まずは、SiteFolderにページ>フォルダアクション>シンプルサイト検索のアクションを適用します。

次に、テキストフィールドにアクションを適用し検索バーにして、任意の場所に設置します。

検索結果を表示する為に、新規ページを作成します。そのページにシンプルサイト検索のアクションアイテムを挿入します。

お好みでアクションパレットのパラメーターを調整して下さい。




Freeway Bloggerへの投稿

FreewayにBloggerの投稿、アーカイブ、プロフィール、ヘッダの挿入アクションがありま
すが、YouTubeに詳しいHow toがアップされていましたのでご紹介します。


2012年5月16日水曜日

Freeway iPhone、iPadに最適なサイト


あなたはインターネットを何でご覧になりますか?PCで見る場合もあれば、iPhoneやiPadで見る事もあると思います。
デバイスによって画面サイズが違うのだから、サイトがどのデバイスで見らる頻度が高いかを念頭においてデザインすることは重要だと思います。Freewayでは、リダイレクト機能が備わっていて、PCで見やすく作ったサイトに、iPhoneからアクセスすると、iPhoneで見やすく作ったサイトに自動的にジャンプさせる事ができます。(※iPhone用に別途ページを作る必要があります)

まず通常のページを作成し、ページ>ページアクション>iPhone/iPadリダイレクトを適用します。

続いて、同じ内容のiPhone,iPad用のページを作成ます。そして先ほど作成した通常のページのアクションパレットにて、iPhone,iPadでアクセスした時に、リダイレクトさせるページを選択します。

2012年5月15日火曜日

Freeway htmlを直接編集してみる

少しづつhtmlの何たるかが分かってきますと、htmlを直接編集したくなるケースが出てきます。Freewayでは直接編集することはできませんので、別のアプリを使う必要が出てきます。そこで、Mac用、フリーソフト、html,php,tpl等の編集が可能なソフトで探してみると、CotEditorというソフトが見つかりました。


.htmlをCotEditorで開くとソースが表示されますので、編集して保存したものをサーバーにアップします。※必ずバックアップを取ってから編集しましょう!

Freeway カラーピッカーで色を拾う

前回の投稿で属性を拡張する方法を記述しましたが、線の色を指示するのに、#A5A701となっていた事にお気づきになった方もいると思います。これはhtmlが色の表示を16進法で表しているからです。詳しい説明はググってもらうとして、今回は希望の色が16進法で何になるのか調べる方法についてです。

まずは、アプリケーション>ユーティリティー> DigitalColoerMeterを立ち上げます。


プルダウンを押して

RGBを16進表示 (8ビット)に切り替えます。

これで、モニター上でマウスが位置する場所の色が 16進法で表示されます。ちなみに、Freewayのアイコンの黄色は、FBE72Bでした。この値のメモを取っておきましょう。

続いて、Freewyのアイテムを選択し、色の変更でその他を選びます。
そこで先ほどメモを取った16進法の値を入力すればOKです。



2012.08.16 追記
Lionにしてからカラーピッカーの表示方法が10進法のみの選択になってしまっていた......。

ググってみると、表示>値を表示>16進法で切り替えられる事が判明。







2012年5月14日月曜日

Exel 本日の日付をセル内に一発入力する

半角英数字で、『control』+『;』です。

Freeway テーブルの拡張属性2

今回はTableを用いて、さらにセルの属性を拡張して下記ような表を作ってみたいと思います。
まずは、Tableを作成します。
右クリックから、セルを小分けにます。
この小分けにされたマス目の事を、『セル』と言います。セルをダブルクリックし文字を入力しましょう。
次にセルにアンダーラインを加えるのですが、HTMLにタグを書き加える『拡張属性』を行います。まず、セルを選択し、インスペクタの拡張ボタンをクリックします。

新規作成により、名前をstyleとし、値に属性の値を入力して行きます。(border-bottom:2px solid #A5A701;padding:10px 0px)

プレビューをしてみるとこうなります。
セル拡張属性の値を変更する事で、多彩なTableを作成する事が可能です。
 border-bottom  アンダーラインに関する属性
2px  線の太さ
solid  塗りつぶしの線
#A5A701 線の色 (Htmlでは16進法で色を指定するのでこのような表記になります)
padding:10px 0px パディングの値が2つ設定されているので『上下』『左右』でパディングが調整されます。*レモンはpadding:10px 60pxの値により文字が右寄りにりました。

2012年5月11日金曜日

Freeway RSSを設定する


FreewayではRSSのアクションが標準装備されており、簡単に導入する事ができます。
私のサイトを参考にしながら手順を確認しましょう。
まず、私のサイトはインテリア関係の情報を発信する為の、Topicページが設けてあります。このページが更新された事を購読者に知ってもらう為のRSSを設定したいと思います。

そもそもRSSとは何なんでしょうか?
ググってみると、webサイトが更新情報などをRSS形式(RDF site Summary/Rich Site Summary)のデータを提供すること。また、提供されたRSSデータ。とあります。
簡単に言ってしまうと、気になるページをRSSを使って登録しておけば、そのページが更新されたときに、更新されたよ!!と教えてくれる仕組みです。
もちろん、サイト側がRSSサービスの提供をしている事が前提となります。

RSSを受け取る方法は様々ありますが、下記画像はGoogleリーダーを使ってAppleのRSSを購読している画面です。


それではFreewayに戻り、手順を確認して行きましょう。
まずは、情報を発信するページ(Topicsページ)を作成します。通常のページのように作成して下さい。今後このページにイベント等の情報を加えて行きたいと思います。


次に、RSSを配信するページを作成します。ブランク(何も無い)ページを作成し、インスペクタでファイル名をfeed.xmlとして下さい。拡張子は必ず.xmlとしましょう
さらにそのページに、メニュー>ページ>ページアクション>RSSフィードのアクションを適用します。アクションパレットでRSSの内容を記述して行きます。
必ずリンクは指定しましょう。パブリッシュの時にエラーが出て、無効化されてしまいます。

プレビューしてみますと、こんな素朴なページになります。


次に、先ほど作ったTopicsページに、メニュー>ページ>ページアクション>RSSページリンクのアクションを適用し、RSSフィードにfeed.xmlを指定しましょう。

最後にトップページにRSSのアイコンを加えます。ネットからお好みのRSS画像を見つけましょう。

画像アイテムにRSS画像を適用し、リンクにfeedページを指定します。

今後の流れは、Toicsページに記事を加える、feed.xmlページでRSSフィードを追加して行く。という流れになります。サイトを見てみると、URLバーにRSSボタンが追加されました。

RSSボタンを押してみると......。

RSSが問題無く配信されているかどうかは、ココのページでテストできます。

ちなみに購読したい場合は、Googleリーダーを開き、上記のようなRSSボタンがあるページ(RSSを配信している)のURLを登録します。