overflowプロパティ

投稿した画像が使用テンプレートのアーティクル部分の設定より大きいと スクロールバーが右、若しくは下に表示されるのは時には困るものだと思います。 デザイン抔はブログシステム提供側に豊富にテンプレートが用意されていれば、 屡変えたくなるのが人情ですけれど、 その時使用のテンプレートのアーティクル幅に専用に合わせる設定では 折角提供される様々なデザインの切り替えの度に設定を変更しなければならず、 出来ればその様な行為は控えたいものです。

其処で登場いただくのが当アーティクル標題のプロパティoverflowです。 懸念のIMGタグをネストしたDIVタグに此のプロパティを設定します。 一昨日は4月12日の記事 SaaSでRuby on rails開発Heroku.com の画像を利用してみるとこうなります。
Heroku.com Limited Beta
画像のプロパティを右クリックしてご覧いただければ、 横幅は520px程ある画像であり、 一目で右側部分が非表示になっているのがお分かりかと思います。
具体的なHTMLソースは下記のようになります。
<div style="display:block; width:300px; overflow:hidden;">
<img src="HerokuLimitedBeta.gif" width="520" height="199" alt="Heroku.com Limited Beta" style="display:block;" />
</div>
この様な設定にしておけば画像データは其の儘に、 以降デザインを取り換えた時に違和感あれば当該記事のdivタグのwidth属性を少し弄れば良いだけになります。 勿論ひとつひとつ設定し直すのは手ですから、 専用のクラス名を設定し、テンプレートに一行書き加え一網打尽と云うのが CSSの旨味である処だと思います。

CSSのoverflowプロパティについては サイト「 World Wide Web Guide 」の W3G>CSS>表示と配置>overflow に詳しい説明が掲載されています。

また、比較の為に追記部分にoverflowプロパティを設定しない画像を設置してみます。 画像は3月24日の記事 INTERNET ARCHIVE で使用したものです。
直ぐ下の[続きを読む]をクリックしてご比較ください。
投稿日:
カテゴリー: CSS

テンプレート変更『カフェタイム (3カラム)』

本日テンプレートを変更しました。 これもデザインを数多く提供される ポータル型ブログサイトの運営の楽しみの一つだと思います。

当ブログ立上げ2008年3月6日より、 本日は2008年4月13日迄は下図のデザインを利用していましたが、 2008/3/6~2008/4/13テンプレートデザイン 卒業、入学シーズンを終え、花祭りも過ぎ遣れば、 遠州にても漸う桜の盛りもお積もりとなった葉桜に、 『「桜」イラスト3カラム』テンプレートにもお役御免とさせていただきました。

またプロフィール画像についての横幅の設定が 150pxから120pxに変わるようでしたので、 画像と合わせて変更しました。
以前のプロフィール画像 2008/3/6~2008/4/13プロフィール画像 は「 クリスマスプレゼント 」の転用でしたが、今回は「 大シャボン玉 」の転用です。
プロフィールの文字設定も少しフォントが大き過ぎるようでしたので <span style="font-size:120%; line-height:1.3;"> の「font-size」部分を削除しました。

SaaSでRuby on Rails開発Heroku.com

一昨日書肆にて購入は システム開発ジャーナル Vol.3 にて、同書籍内記事においてJava開発者のための「Ruby on RailsによるWeb開発」最終回のP127で 筆者の 笠谷真也 氏により紹介されていたのが、 SaaSベースのRuby on Railsの為の開発環境「 Heroku 」です。

以前3月18日の記事 Ruby on Railのバージョン でご紹介した様に、 手元のwindowsにインストールして試してみた経験では、 Ruby on Railsでの成果物はRubyで構築されたHTTPサーバであるWEBrick上では軽快に動作するのですが、 一旦一般的なApache上で稼働しようと試みると単純にCGI経由では重くて実用に足りませんので、 FastCGIを利用する抔、敷居が高くなり勝ちですから、 このサイトにより其の敷居を低くなれば、十分存在意義が生じ、 利用者も増えるのではないでしょうか。

Heroku.com ではQuickTimeムービーで操作性も閲覧可能です。 短い動画ですが、Ruby on Railsを使用した経験のある方なら、 仕様抔も想像がつき概観が掴めるのではないかと思います。
編集機能はFirefoxでしか使用できないようですが、 IE抔に対応するのかは判然しません。

当該サイトへの日本からのトラフィックが多くを占めるのはRubyの母国たる由縁のようで、 未だベータ版にて使用には十分覚悟するべき心得を求むるに Heroku.com Limited Beta のような表示も其れを示すのか、 若しくは極東のエキゾチックなイメージがクールなのかは定かではありません。
投稿日:
カテゴリー: Ruby

Life is beautiful

以前当ブログのカテゴリー「 ブログパーツ 」の「 なかのひと」のアーティクルでご紹介した サイト「 Life is beautiful 」の運営者が実は世界に誇るカリスマプログラマー中島聡氏であり、 Wikipediaの記事にもなっている アルファブロガーであることを知り得たのが頃日であると云う事実は、 コンピュータ・ITでカテゴライズしている当ブログとしては赤面の至りです。
実はその筋では可也有名な方で、 経歴 を拝見すれば成程宜成る哉と首肯せざるを得ないのですが、 様々頁を繰れば、問題は経歴にあるのではなく、 矢張りブログの記事内容が充実しているからで、 その様な記事が積み重なる内、何時の間にやら、はてぶが重なる抔して、 現在のアルファブロガーとしての位置を確立するに至ったと云うのが実際で、 ブログを運営する者としては参考にすべき姿勢であると共に、 その記事内容の秀逸さは流石はアルファブロガー、 ネットを漂流していれば、孰れ辿り着く先の一つであるのは、 前回3月26日投稿記事「 なかのひと 」に関して図らずも「 「なかのひと」を使ったアクセス解析の結果を公表してみるテスト 」にトラックバックさせていただいたことにも、示唆されるかに感じています。

氏は2006年正月から2007年10月に掛けては上記以外にも並行してCNET Japan上で「 中島聡・ネット時代のデジタルライフスタイル 」と云うブログを運営しておられ、現在は新規投稿は終了していますが、 過去記事にも私が先日 少考を著わしたGoogle Gears 抔についても「 Google Gearsは「サッカーをもっと面白くする」?! 」として意見を表明しておられ、一線級の技術者、オピニオンリーダーの卓見を、 個人的にも大変興味深く拝見させていただいています。

Life is beautiful における最近の記事では3月28日の「 このブログを統計解析してみた 」抔がアクセス解析に取り組む一人の私としては実に興味を惹かれる内容でした。
データの見せ方をロングテール化させる飄逸さ抔、拝見していてとても楽しく思います。

また丁度昨日は、三日に渡るエンジニア、アルファブロガー小飼弾氏、 IT・音楽ジャーナリスト津田大介氏との鼎談集「東方の三賢者が贈る、日本へのアドバイス」が前三篇、 出揃ったようですので、下へリンクを用意しておきます。 上記鼎談集では記事の興味深さは勿論、 氏の近影も掲載されており、 僅かの間、少しく抱いていたイメージも裏切られ、其れが又私には愉快でした。

英会話教室Gaba(ガバ)のLPO戦略

ITpro事例データベースにアクセス解析上、 興味深い記事が掲載されていたのでご紹介します。
株式会社 GABA によるWEB戦略におけるLPO(ランディングページ最適化)について、 日経情報ストラテジー、清嶋直樹氏の手になる2008年4月9日の記事です。 英会話教室がLPO(ランディングページ最適化)で成果、安さより上達にこだわる見込み客に積極的に無料体験を告知 NOVAの破綻は記憶に新しく、 英会話教室の運営については現時点では難しいものがあるに違いないと想像に難くありませんが、 その中でも業績を伸ばしている当該社は、 広告宣伝費を従来のマスメディアに頼るのではなく、 費用対効果を詳細に検討せしむるべくインターネットを利用しており、 その手法と云うのがLPOと云うことで、下記引用、
「英会話 上達」といった複数キーワードで検索する見込み客を重視している。 例えば、「英会話 安い」(画面1)で検索した場合と、「英会話 上達」(画面2)で検索した場合では、 画面2のほうが「無料体験レッスン」を強調した形で表示される。
(中略)
「安さ」にこだわる見込み客より「上達」にこだわる見込み客に「無料」を強調するのは一見、矛盾しているが、 これが同社にとっては正解だった。
もともと、Gabaは安さを売りにしてはいない。
という部分が要諦かに思います。

アクセス解析ツールを自社サイトに導入し、解析結果を真摯に分析、 分析内容をサイト改善にフィードバックした結果、 目的である会員の獲得単価の削減を実現している有効性については瞠目せざるを得ません。

また別の話になりますが、度々目にする機会のあるキーワードの相場について、 当該記事中にて記述ある件、 「英会話」が単価500円から1000円もすることに驚かされます。
運営ブログ上にアフィリエイトを設置されている方抔、一押しキーワードの一つとして考慮されてみては如何でしょうか。

インターネットラジオ

当ブログ4月4日のアーティクル 検索テクニック と同じく 半田山のブログ村 に4月2日、お邪魔した際、 中野 講師より、インターネットの普及によりメディアがマス占有のものでなく、 ミニマム迄降りてきた、その好例がインターネットラジオである旨のレクチャーがありました。
十年前では考えられなかった個人がラジオ放送局を運用するということが 実に手軽に実現出来るようになっているということなのです。

インターネットラジオについてはWikipediaが詳しく ラジオとは呼べども放送ではなく通信の扱いになるのは、 時代の流れに追いつけぬ法整備の常なる由縁のようです。

利用者による放送配信が可能なものでは下記が双璧になるようです。 インターネットラジオに関し疎い私でもねとらじについては仄聞する処でしたが、 らじろぐについては初耳で、此方も Wikipediaのらじろぐ によればインターネットラジオとブログを融合させたサービスのようです。

ダンディ☆和田 講師によれば就中手軽さと云い、機能と云い、お奨めなのが らじろぐを運営する株式会社SEAMSが らじろぐに標準装備のリアルタイムネットラジオ配信ツールを外部ブログ向けに 無料のブログパーツとして提供している「 らじおん 」であるとのレクチャーでした。
2006年8月からスタートしたサービスのようで
等に、当時の経緯が掲載されています。
現在 FM Haro! の新番組『Radio H』にてレギュラーも務めておられる ダンディ☆和田 講師のブログにもブログパーツとして装備されています。 ブログパーツ:らじおん ご自分でお手軽にインターネットラジオ放送局を開局したいと考えている方抔、 ご利用されてみては如何でしょうか。

また、他方のねとらじについては様々紆余曲折のあったLivedoorですけれど Wikipediaのねとらじ によれば運営会社として企業メセナともいえる事業としてねとらじ扱っており、「 ねとらじステーション 」の様に放送局を簡単に開局可能なツール抔も充実しているようですし、 個人をメディアたらしめるネット発展の為、長く双璧を為すべく活躍を期待したいと思います。

jQuery カラーピッカー プラグイン

下記カラーピッカーについては説明するよりも、 実際に使用いただいた方が素晴らしさを実感していただけるのではないかと思い、 作者 Steven Wittens さんがGPLで公開されていましたので 当ブログに実装してみました。
当ブログの他機能と衝突してトップページではうまく動作しないため、 追記部分に表示させるようにしています。 「続きを読む」をクリックしてみてください。
またFirefoxでもチャートがうまく表示されないようです。

以前3月15日のアーティクルでも「 背景色と文字色を投稿前に確認 」をご紹介しましたけれど、ブログ記事を投稿する際、 文字や背景の色選定に悩まれている方は多いのではないか、と云うより、 誰より私がHTMLエディターを態々色確認の為だけに立ち上げたりするものですから、 ブログのことならブログに任せろと許り具具ってみれば、 jQueryのプラグインで作成された当スクリプトを見つけたのです。
サイト Acko.net には、ダウンロードファイルは勿論、 プロパティ抔、実装上の更に詳しい説明がありますので、 興味のある方はご利用されてみては如何でしょうか。
投稿日:
カテゴリー: jQuery

Googliness

書肆にて立ち読む書籍なれば紹介は大変恐縮ですが、 記事にして書き留めておきたい程、 実に興味を惹く内容であったのが、 2月28日との事ですので、つい一月程前の発売の梅田望夫氏の手になる書籍 ウェブ時代 5つの定理 です。

梅田望夫氏と云えばIT業界において古くから活躍されているにも関わらず、 不勉強な私は、 ウェブ進化論 や、 ウェブ時代をゆく でやっと、此れも立ち読みにて失礼し乍も認知申し上げ、 其れ以来書肆にて見掛ければ手に取るようになった処で、 昨日当該書籍の頁を繰って見た処、 章立てを定理と表現するその第1定理のみにても、 シリコンバレーに行かねばならないと感じさせるに充分な説得力なのですが、 何分立ち読みにて時間の制限付きの中で、 第一定理を読み終えた処で読み応えを感じたものから目次を見遣れば、 当ブログにも屡登場願うIT業界のトップランナーGoogleについて、 一つの章が割かれていたのが第4定理グーグリネス(Googliness)にて、 これはGoogleらしさ、Google気質とでも云う程の意味とのことで、 氏が身近に見たGoogle Cultureが紹介されており、 其れならレジに持ち寄り購入せよという、 書肆に取っては傍迷惑を顧みず其の場にて読み切った程、 実に興奮させられる内容であったのです。 其処にはIT業界先端を直走る大企業Googleの 既存の大企業には有り得ない大企業の在り方が記されています。

当書籍は氏の収集した箴言集の体裁を取っており、 主にシリコンバレーのビジョナリスト連の発言であって、 原文が掲載されていますから、英語の初学者、 私のことですが、にも適切な書籍と成り得るように感じました。

氏がWEBを活用されるのは勿論当然のことで、 ブログ上に当該書籍のことも ご縁あればお読みください程度ではなく、 可也突っ込んで紹介されています。 興味のある方はご参照ください。
投稿日:
カテゴリー: IT

Google Gears 少考

以前3月30日の記事 Google Gears でご紹介したIT企業のトップランナーはGoogleの新コンセプト、
Webアプリケーションをオフラインでも動作させる
について、 もしGoogle Gearsの目指す処が対マイクロソフトとして、 ブラウザをOSにアプリケーションをローカルで提供すると云うだけの目論見であったなら、 実に利用者に有益であるとは知り乍も、 何か少し喰い足らなさ、一抹の淋しさを感じざるを得ません。

近日話題のマイクロソフトによるYahoo!買収話は マイクロソフトがGoogleに脅威を感じての戦略であるのは衆目の一致する処にしても、 対するGoogleが態々同じ土俵に上がって相撲を取る必要も感じられず、 此処は、是非想像を越える世界の提示を期待したいと思います。
とは云ってもバージョンアップの度に料金の掛かるマイクロソフト方式のビジネスモデルよりは、 Googleにオフィス系アプリケーションでも活躍して欲しいと願うのは、 小人たる己の少し悲しい部分です。
投稿日:
カテゴリー: IT タグ:

javascript宣言書式付帯事項覚書

javascript仕様のスクリプト宣言についての書式では、 割とうろ覚えの儘であったり、 意味も判らず呪文的に使用しているのですが、 改めて一般にはどの様な仕様として普及しているのかについて調べてみました。

引用サイト:XHTML文書におけるJavaScriptの注意点
  • スクリプト言語は<head>内のMETAタグで指定するのが正式である。
    <meta http-equiv="content-script-type" content="text/javascript" />
  • language属性ではなく、type属性を使用する。
    <script type="text/javascript" src="URL"></script>
    <script type="text/javascript">
    <!--
    // -->
    </script>

引用サイト:JavaScript コラム: 『コメントに関するコラム』
  • スクリプトをコメントアウトする
    //………;

    /* ………;
    ………; */

    「//」は、その後に続く1行、「/* ~ */」は、囲んでいる範囲がコメントになります。
  • JavaScriptが無効なブラウザでエラーを出さないようにする
    <SCRIPT>
    <!--
    ………
    // -->
    </SCRIPT>

    「//(JavaScriptのコメントアウト)」を付けるのを忘れないように。

上記2サイトから個人的に必要な部分を引用させていただいています。
上は ~ XHTML文書と外部スタイルシートの作り方 ~ さんの一コンテンツで、 外にも実践的なXHTML文書とCSSの外部スタイルシートの作り方の情報があり、 下は「Web覚書トップ」さんの JavaScript コラム の一コンテンツで多少時間は経っていますが、外にも幾つかJavaScriptについての情報があります。
投稿日:
カテゴリー: javascript