全62件 (62件中 1-50件目)
最近、インターネットのドメイン名にはいろんなバリエーションが増えてきました。はるか昔は、日本の場合だと国名を表す「.jp」しかなく、企業であるならば「.co.jp」公益法人は「.or.jp」政府機関や自治体だと「.go.jp」学校法人は「.ac.jp」といったバリエーションがありました。これを『ccTLD』(カントリー・コード・トップ・レベル・ドメイン)と言います。その後、新しい枠組みの『gTLD』(ジェネリック・トップ・レベル・ドメイン)が出現し、商用だと「.com」、ネットワークだと「.net」といった名称が出現。で、この『gTLD』下でドメインの種類がその後もどんどん増殖しており、「.biz」「.info」といった名称の他、数年前には地名を表す「.tokyo」「.nagoya」「.okinawa」といったものまで出現しました。その際、--「.saitama」が出てきたら、 埼玉チャプター用に確保することを考えようと思っていたのですが、昨日、レジストラ業者から受け取ったメールマガジンに何気なく目を通すと、「新ドメイン取扱開始!」という見出しの下に、10種類ほどの新ドメインが並んでおり、その中に何と『.coach』という名称があるのを発見。お! これええやん!現在のドメインは『jca-sai.com』で、ホームページのアドレスは『http://jca-sai.com/』。『.coach』の先頭に『saitama』を持ってきて、『http://saitama.coach/』というアドレスで埼玉チャプターのホームページが閲覧できるなら、すんごく訴求力がありますよね。さっそくメーリングリストでスタッフに問いかけると、数十分後、代表から「そりゃあ取得しない手はない!」との反応。ドメインの取得は早い者勝ち。ぐずぐずして誰かに取られたら、まずもって自分たちのものにはなりません。そういうわけで、代表の賛同を受けてすぐにオンラインで申し込み、契約料6,000円強を振り込み手続き。その後、他のスタッフからも「賛成」メールを受信。そして今日、レジストラから「入金確認した」旨のメールが届きました。晴れて『saitama.coach』ドメインは、埼玉チャプターの手に!(拍手)次の工程として、いつアドレスを変更するか?スタッフと議論しつつ考えていきたいと思います。Webドメインマーケティング ヒットの裏にはオリジナルドメインがあった! / 宣伝会議編集部 【単...価格:1,512円(税込、送料別)
2015年03月25日
コメント(0)
日本エニアグラム学会のホームページのリニューアルを依頼され、ちょこちょこと理事長と話し合いを重ねています。今日もワークショップが終わってから、小一時間ほど打ち合わせを行いました。学会が設立されてから20年近くが経過しているわけですが、ここ最近、集客が伸び悩んでいるそう。打開するためには、全国レベルでの活動が必要で、そのためのプロジェクトがいろいろと進んでいる中、集客のツールとして理事長が重要視しているのがWeb。GoogleやYahoo!で検索をしたときに、学会のホームページがいかに上位にリストアップされるか、というところが1つのポイント。専門的には「SEO」と言います。さらにページを訪れた人をどうやってワークショップへお誘いするか。そのためのページづくりを考慮する。こうなってくると、『Webマーケティング』の世界です。これまで僕がWebサイト制作に関わってきた内容は、いわゆる「お化粧直し」が主目的でして、どうも「マーケティング」というのは、よく分からないし、分析力が弱い人間なので、今まで敬遠してきた向きがあります。でもWebサイト運営のキモは、実はマーケティングなんですよね。避けて通ることができないわけです。なのでいずれは手がけていかなければ…と思っていたら、今回、図らずもエニアグラム学会のほうから話が舞い込んできたわけでして。この話に乗らない手はない、ということで、理事長を前に力強く「やらせていただきます!」宣言。5月の総会時に青写真を披露することになりました。なんか引き寄せてるなぁ。【楽天ブックスならいつでも送料無料】マンガでわかるWebマーケティング [ 村上佳代 ]価格:1,944円(税込、送料込)
2015年03月07日
コメント(2)
サイドビジネスでポツポツとホームページ制作を請け負っています。もう何年前から続けているでしょうか。最初は勤務先のイントラネットでWebページを作り始め、次いで、顧客向けに情報提供サイトを構築したのが黎明期で、それがおおよそ15年以上前になります。約10年前に初めて個人で『埼玉チャプター』のホームページを手がけ、そこから『検見川送信所を知る会』や友人の会社、コーチ仲間のWebサイトなどを手がけつつ今に至っています。改めてこれまでWeb制作のお手伝い件数をカウントしてみると、今、手がけているサイトで11ケース目。いつの間にか2桁の件数になっていました。これも、決して秀逸とは言えないデザインを受け入れてくれ、しかも、遅々として進まない制作工程を気長に待っていてくれたクライアントのおかげです。さらにこちらとしても、いろんなWeb技術を試すことができて、相応のスキルが身についてきており、これが勤務先の業務にも多少の役には立ったりしているので、喜ばしいことでもあります。そんな中、先日、マイコーチから「実は、リニューアルしたいWebサイトがあってね。まさやんに頼みたいんだけど、忙しそうだね…(汗)」と耳打ちされました。現在、手がけているWebサイト構築のめどが立つと、今度は『日本エニアグラム学会』のWebサイトをリニューアルする依頼を受けており、その後になるんですが……、と応じたものの、「じゃあ、めどはいつぐらいになりそう?」と切り返してきたので、こちらの心持ち次第でお請けすることができそう。本業そっちのけでのオファー続きに、一人沸いております。【新品】【2500円以上購入で送料無料】【新品】【本】【2500円以上購入で送料無料】年収300万円...価格:1,296円(税込、送料別)
2015年02月25日
コメント(4)
1月30日の日記で、構築中のWebサイトで導入したプラグインである『Events Manager Pro』での悪戦苦闘ぶりを書きました。『窮すれば原点へ戻る』ということで、再度プラグインをインストールし直すと、今まで表示されなかったメニューが表示され、あっという間に解決、というくだりを書きましたが、さらに同じ日記の文末に「今回、難問は2つあって、再インストールで1つは片がついたのですが、もう1つは解消せず。」と書いたように、もう一つの難問が未解決のままでした。今月に入ってからも、ひらめいてはファイルをいじり、いじっては画面表示を確認し……を繰り返してきたのですが、とうとう万策尽きて袋小路に入ってしまいました。--このままではリリースできない!数晩寝て意を決し、大もとのシステム自体を再インストールすることにしました。発注元の担当者に相談したところ、「承知しました」と快諾いただいたので、--ええい、ままよ!ということで一斉削除。サイトは一時的に真っ白けになりました。その後、再インストールして少しずつ構築しては画面確認。いい感じで本来の表示が再現され、これで解決、と思いきや、何かのデータ変更の折に、やっぱり表示されなくなりました。--ええ!? 何でやー?災いを引き起こしていそうなファイルを開き、1つひとつコマンドを確認していくと、怪しい4行ほどのコマンドラインに行き渡ります。このラインを削除して試してみると……。ビンゴ!! 当たりでした!以前、何気なく追加したコマンドラインですが、これが逆に災いしていたんですね。たった4行の余計なコマンドがプラグインソフトのごく基本的な機能を奪っていたわけです。これぞデジタルの妙、と言ってしまえばさわやかですが、それだけ「デジタルの世界は怖いなぁ」とつくづく。いずれにしても、今回も、『窮すれば原点へ戻る』の精神が活かされました。良かった、良かった。【楽天ブックスならいつでも送料無料】HTML5&CSS3辞典第2版 [ アンク ]価格:2,592円(税込、送料込)
2015年02月17日
コメント(0)
1月27日の日記で、英語版のトリセツに悪戦苦闘している、と書きました。通常、この種のプラグインは、インストールしてしまえば基本的な項目は日本語化されているので、トリセツがなくても何とかなるものなんですが、今回扱っている『Events Manager Pro』で、本来、備わっていそうな機能が見当たらないんですね。しかも「その機能が使えなければ意味がない」レベルの、基本中の基本の機能なので「何で? どうしてその機能が表に出てないんだ?」という疑問と、で、それを解決するためのよりどころは、英文のQ&Aや事例紹介しかなく、それで途方に暮れてしまったんです。それでも、たどたどしく英単語を入れて検索してみると、僕の問いかけに近いQ&Aがけっこう多く引っかかるんですが、Google翻訳を使って強制翻訳させてみると、自分の欲しい答えじゃないんですね。片っ端から見ていったのですが、どれもこれも僕の欲しい答えではない。--どうしたものか……。ひと晩寝て、出た結論は、「もう一度、『Events Manager Pro』をインストールし直してみる」というもの。今まで設定してきた内容がすべてご破算になりますが、本格運用前なので、今だったら致命傷にはなりません。--えぇい、ままよ!ということで、全部サラッピンにしました。すると……。設定メニューの中に入っていくと、今まで隠れていた項目が見えているじゃありませんか。英語なんでよくわかりませんが、--これちゃうかなー。と、設定値を入れてみると……。お見事! 思い通りの仕様になったじゃないですか。おそらく設定をいじっている間に、知らず知らずのうちに消してしまっていたんでしょうね。今までも、いろんなWeb制作を手がけてきた中で、袋小路に入ってしまい、テクニカル的にどうにもこうにも手出しができなくなった局面が幾度となくあります。それで毎回途方に暮れてしまうのですが、結局、解決の糸口は「原点に戻る」ことだったりします。でもインストールしていろいろと設定を変更していきますから、それがご破算になるのがとても惜しいんですね。そういう気持ちが、原点に戻ることを躊躇させるんです。で、ひと晩寝て、「やっぱり戻ろう」と意を決し、「アンインストール」して「インストール」してみると、確かに再設定の作業は骨が折れますが、大もとのトラブルは解消されていってるんですよね。『窮すれば原点へ戻る』いろんな場面で使えそうなフレーズですが、とりあえず、僕にとってはWeb制作上で座右の銘にしています。今回もそれに助けられました。……ただ。今回、難問は2つあって、再インストールで1つは片がついたのですが、もう1つは解消せず。今しばらくは悶々とした日々が続きそうです(汗)【楽天ブックスならいつでも送料無料】本格ビジネスサイトを作りながら学ぶWordPressの教科書 [...価格:3,024円(税込、送料込)
2015年01月30日
コメント(0)
ある団体から新たなWebサイトの構築を受託していて、昨年末あたりから本格的に作業を行っています。CMS(コンテンツ・マネジメント・システム)を用いてデータベースを基盤に置いて、自動的にWebページを表示させる仕組みで、従来は『Xoops』というアプリを利用していたのですが、今回から、CMSでは世界的にメジャーな『WordPress』にチャレンジしています。当初はちんぷんかんぷんだったんですが、いくつかの指南本とにらめっこしたり、実際に操作していくにしたがって、ようやくコツをつかみつつある状況。そんな中、イベントの申し込みフォームを設える段となり、それを実現するプラグインを物色していたところ、結局、適したものが1つしかあrませんでした。Event Manager Proところがこれがですね。な、なんと、トリセツらしきものが日本語で存在しておらず、全部英語なんですよ(大汗)しかも、そのトリセツも基本的な操作方法をサラッと開示しているだけで、細かい内容で不明な点が出てくると、フォーラムを覗いていかねばならない。当然、英語です。しかもフォーラムのスレッドは、何万も立っていて、そこから自分が欲しい答えが入っているであろうスレッドを探すには、検索語を入れてサーチしなければなりません。検索語も、当然、英語。英語がからっきしダメな僕は、いきなり出現した高い壁に、途方に暮れています。こういう場面に遭遇すると、つくづく思います。「英語力があればなぁ」って。でも、そう考えたとしても一晩寝て翌朝に英語スキルが身についているわけでもなく。今日も、たどたどしく検索語を打ちながら、出てきたスレッドをGoogle翻訳にはめ込んで、類推解釈をする毎日を過ごしています。……もどかしいなぁ。【楽天ブックスならいつでも送料無料】本格ビジネスサイトを作りながら学ぶWordPressの教科書(...価格:3,218円(税込、送料込)
2015年01月27日
コメント(4)
今日の大阪は、青空が広がる良いお天気でしたが、吹く風は冷たく、外出するには気合いの要る状態でした。そこで今日は一日中、室内でWeb制作にいそしみました。元々3年ほど前から打診を受けていた案件ですが、わが家の中で大きなできごとが生じたことと、僕にとっては未知の技術を使うこととしたため、なかなか腰が重く、約2年ほど放置していたものです。今年から別のWeb制作の引き合いも出てきたことから、そのためには今引き受けている案件を早くリリースしなければならず、ようやく重い腰を上げて取りかかっている次第。それにしても、僕にとっては2つの大きな未知のWeb制作技術を取り入れようとしているため、その作業は遅々として進みません。大半が取説などはなく、ネットで転がっている情報を検索してはコードを書き換え、それをアップロードしてうまく表示されるかどうかを確認する連続。中には、やっとたどり着いた情報がすべて英文で書かれていて、閉口することもしばしば。1つのコードを書くために、ほぼ1日費やしたこともあります。それでも、何とかホームページらしくなってきました。まだここで公開できないのが残念ですが、完成の暁には、ここでもご披露するかな?【楽天ブックスならいつでも送料無料】HTML&CSS標準デザイン講座 [ 草野あけみ ]価格:2,570円(税込、送料込)
2015年01月03日
コメント(0)
依頼を受けて新しいWebサイトの構築をしています。実は一昨年から依頼を受けていたのですが、ヨメさんが病に斃れるという不測の事態に見舞われ、2年経った今も、まだほとんど構築できていません。ただし、ここまでカットオーバーを引っ張っているのは、家の中のできごとが影響しているだけではなく、未経験の新しいWeb技術に挑戦しているからでもあります。その技術とは、「1つのコンテンツで、PCでもタブレットでもスマホでもそれぞれの最適なレイアウトで表示できる」というものです。これを『レスポンシブルWebデザイン』といいます。タブレットやスマホといったデバイスが爆発的に普及し、Webサイトをそれらでアクセスする機会が多くなっています。そんな中、従来のWebサイトのデザインはPC上で閲覧することを前提に設計されているため、圧倒的にディスプレイが小さいタブレットやスマホでそういったWebページを表示させると、文字や画像がおそろしく小さくなってしまい、いちいちピンチで拡大しないと判読できません。そういった不都合を無くすために、従来はデバイスごとにWebページを作り分ける、なんてことをしていました。でもそれでは、修正箇所が発生した際に、すべての同一Webページを修正せねばならず、全然スマートじゃありません。そこでWeb技術の発展とともに考えられたのが、ページ中の1つ1つのコンテンツをタイル状に作り上げ、デバイスの画面サイズに応じてレイアウトを自動組み替えする、というもの。写真投稿サイト『ピンタレスト』の設計思想をヒントに考案された手法です。日本では、この技術を用いて最も評判の高いサイトは、NHKが運営している『NHKスタジオパーク』のWeb。PC上でも、ブラウザの表示サイズを可変させると、レイアウトが実に小気味よくアニメーション風に組み替えられていくんです。これを実現する技術が『Masonry』という名前のJavaScriptプラグインなのですが、そもそもJavaScriptについて疎い僕は、この『Masonry』の使用方法で数か月間大いに悩み、昨日などはほぼ1日、PCと格闘していました。で、ようやくコツがつかみかけてきました。まだリリースするまでには第2、第3のハードルが待ち構えているでしょうが、気負わず、しっかりと作り上げていこうと思います。【楽天ブックスならいつでも送料無料】現場でかならず使われているWordPressデザインのメソッド...価格:3,024円(税込、送料込)
2014年12月24日
コメント(0)
サイドビジネスでいくつかのWebサイトを構築し、メンテナンスも行っていたりします。作業はもっぱら自宅で行っているのですが、出先で、ふと思いついた際に、「今、ここでメンテナンスしてしまいたい」という衝動に駆られるんですよね。そうしないと、帰宅したときには既に忘却の彼方へと行ってしまうからです。そういうわけで、先だって、iPadをiPad miniに更新し、手軽に持ち歩けるようなタブレットになったので、これをコンソールとして使う発想は当然ながら出てくるわけです。で、ネットでいろいろと探っていると、どうやらこのアプリが良さげだ、ということでした。『Textastic』僕はWeb用のデータをすべて『dropbox』という外部ストレージに保存してあり、ノートPCを自宅から持ち出しても、ネットにつながる環境なら、どこででもデータを引き出して更新することが可能なようにしてあります。なので、大阪の実家に帰省した際も、あたかも自宅にいるかのように、Webのメンテナンスができるようになっているわけですが、これをたとえば街中の喫茶店でもできるように、タブレットからもサクサクとdropboxにアタッチできて、データを修正後、Webサーバに反映させるようなことができれば良いわけで、これを実現するのがこのアプリ。しかも、これだけの機能を持っているのに、何とフリー(無料)なんですよねぇ。で、一も二もなく導入してみました。手順は、1)dropboxにアタッチして、目的のファイルをダウンロード。dropboxからダウンロード posted by (C)まさやん63122)iPadに落ちてきたファイルを開いて、テキストベースで修正。テキストベースで修正 posted by (C)まさやん63123)修正後のファイルをdropboxにアップロードし、同名ファイルを上書き更新。dropboxへアップロード posted by (C)まさやん63124)FTP経由で目的のWebサーバへアタッチ。FTPでWebサーバに接続 posted by (C)まさやん63125)修正後のファイルをアップロードし、同名ファイルを上書き更新。Webサーバへアップロード posted by (C)まさやん6312ということで、4)と5)でdropboxとWebサーバの双方をアップロードする面倒さはありますが、思い立ったときにサクッと修正できる利便性にはかないません。タブレットなので、編集機能の豊富さはPCにかないっこなく、本格的な編集は引き続きPC上で行おうと思いますが、ちょっとした修正なら、出先でも自由に行える安心感を持つことができました。【楽天ブックスならいつでも送料無料】iPhone/iPadではじめるファイル共有 [ 海老原昭 ]価格:950円(税込、送料込)
2014年12月04日
コメント(0)
一時期、Webの世界を席巻したFlashムービー。Webページ内で動画を再生させたり、マウスを当てるとアニメーションのようにイラストが動いたり、Flashを導入したWebページは、それまでの無味乾燥だったコンテンツだったのが見違えるように動きのあるページになりました。ところがこのFlash、弱点もありました。データサイズが重たくなる傾向があり、その分、電力を費消するんです。スマホやタブレットが当たり前の時代に、バッテリーを消耗させる仕組みは致命的。かのアップル社のカリスマ創業者だったスティーブ・ジョブズは、再三この問題をFlash開発元のAdobe Systems社に突きつけ、改善を要求していましたが、Adobe社はその要求に応えようとはせず、業を煮やしたジョブズ氏は、iPhoneやiPadではFlashの再生をシャットアウトしてしまいました。当時はそんな判断をしたスティーブ・ジョブズ氏に異を唱えるユーザーや識者が多かったものの、彼の主張は徐々に受け入れられ、「Flash=古い技術」という認識が広がってきました。今、Flashの代わりにムービーっぽい動きを実現する技術として、JavaScriptを応用した「JQuery」という言語セットがあります。これで実現できるのはせいぜいスライドショーなのですが、工夫次第で動画のように再生できたりします。僕が制作に関わっているWebサイトのうち、たまたまFlashムービーで修正要請があったので、事情を説明し、JQueryを使ったスライドショーに置き換えました。ズーム防災iPadでもきっちり再生します。どんどん進化していく、Web技術。ついていくのも、なかなか大変です(^^ゞ【楽天ブックスならいつでも送料無料】Web制作の現場で使うjQueryデザイン入門改訂新版 [ 西畑...価格:3,218円(税込、送料込)
2014年07月17日
コメント(0)
といっても、人生の悩みではなく、Webのコーディングの問題です。友人が経営する会社のWebサイトのメンテナンスで、トップページのFlashムービーを、JavaScriptのライブラリの一種であるjQueryを応用してスライドショーに変更することにし、そのテスト版を作ったんですね。以前、埼玉チャプターのサイトを構築した際に、同じ手法でスライドショーを埋め込んであり、このときにつかったコードを流用することに。で、完成形。ところが、最初にコーディングしたのがまったくきちんと動作しない失敗作でして…。これが、失敗作。1スライド目がしばらく静止しているのですが、数十秒後に画像の一部分が拡大され、しかも連続したテクスチャ様に画面いっぱいに展開されるんですね。こんなの、見たことない。見たことないので、にわかに何が悪いのか分からない。1週間悩みました。1週間目の昨日、目を皿のようにしてソースコードをもう一度点検していたところ、--あっ!!見つけました。デタラメなコーディング部分を。正すと、あっという間に解決。Webの世界って本当に悩ましいんですよね。ちょっと表記が違っただけで、ウンともスンとも言わないんです。でもその実、原因はというと、コマンドの綴りを間違っていたり、使う記号を取り違えていたり。よく見りゃ「あ、これ全然違う」ということがすぐに分かるぐらいの間違いなんですが、それがなかなか見つからない。こんなことの連続です。でも、一度経験すると、今度はなかなか忘れられない。Web作成も何でもそうですが、腕を上げるには、まずは行動あるのみ、ですね。【楽天ブックスならいつでも送料無料】XHTMLとCSSによるWebサイト作成 [ 富士通オフィス機器株...価格:2,592円(税込、送料込)
2014年06月24日
コメント(4)
Webページを構成するHTMLの世界では、HTML5という次世代の規格が標準になる、と言われてもう5年近く経過しています。次世代規格なので当時のWebブラウザでは対応しておらず、普及するのはまだまだ先、と思いつつ今に至っています。ところがもうMicrosoftのInternet Explorerは最新版がIE11。5年前頃に標準だったバージョンはIE7あたりだったので、もう数世代進んでいるんですよね。当然、HTML5対応だったりします。なので、巷で最近新しく開設されたWebサイトはHTML5規格でコンテンツが作られているケースもポツポツと出てきているだろう、ということは、今、オファーを受けているWebサイト構築も、HTML5で書いた方が良いんだろうなぁ、ということで、辞書的に使うための書籍を注文しました。【楽天ブックスならいつでも送料無料】HTML5&CSS3辞典第2版 [ アンク ]価格:2,592円(税込、送料込)よしよし。これでHTML5で組むお膳立ては整った。で、なにげにHTML5を解説しているWebサイトにアクセスし、文章を読んでいくと…。「HTML5に対応していない古いWebブラウザを使っているユーザーが圧倒的に多く、HTML5はまだまだほんの少し普及してきた程度だ」「そういう意味では、比較的OSのバージョンが高いところで統一できる、スマホ用のサイトから、HTML5への進化が進んでいくのかも知れない」なんだそうです。ということは、まだ買わなくて良かったかも…。拙速でした。
2014年06月13日
コメント(2)
なかなか手がつけられていないのですが、今、新たに2つのホームページ制作の話が来ています。僕の場合、ホームページ制作に当たっては、本格的なプロと比べるとデザインセンスが乏しいので、せめてもの挽回策ということで、フォント(書体)にこだわっています。むろん、本文のフォントはWindowsなら「メイリオ」Macintoshなら「ヒラギノ」という初期設定があってこれは基本的に動かさないほうが良いのですが、イラストに埋め込んでいる文字や大見出しを少々デザインして画像として貼り込むという手法を採ったときに、これはいろんなフォントを設定することができるんですね。で、僕の場合、可読性にこだわって『ユニバーサル・デザイン・フォント(UDフォント)』なるものを多用しています。ユニバーサル・デザインは、最近、工業デザインで当たり前のように考慮されるようになってきており、今や製品・サービスでなくてはならない概念です。詳しくはウィキペディアで。で、フォントの世界にも、文字の見間違いや読みやすさを追求した『UDフォント』が書体メーカー各社から開発販売されるようになってきました。その中でも、元祖は「イワタ」というフォントメーカーがパナソニックと開発した書体。『イワタUDフォント』が世のUDフォントのお手本になっています。で、僕の場合も数年前に『イワタUDフォント』を数種類導入。文字だけでも締まりがあって、なかなか洗練されたホームページが完成したと自負しています。たとえば、日本コーチ協会埼玉チャプターのホームページは、画面上方のナビゲーション・バナー(「お知らせ」「入会案内」「勉強会・イベント情報」…と続くメニュー)の文字にUDフォントを使用しているんですね。で、冒頭の話に戻ると、新しい2つのホームページ制作に際して、そろそろ新しいフォントを仕込もう、と思い立ち、オンラインのダウンロード販売で仕込みました。・モトヤ UDモトヤアポロ3・タイプバンク ナウMBこれはこれで、味のあるフォントですね。自分の制作するホームページが、どんどん洗練されていくのが嬉しいです。【楽天ブックスならいつでも送料無料】フォントのふしぎ [ 小林章 ]価格:2,160円(税込、送料込)
2014年05月20日
コメント(0)
かねてより、いくつかのWebサイト構築のお手伝いをしているのですが、このたび通販サイトの構築をサポートしました。田園調布チーズケーキのトマトランタン実際はMakeShopという、ネットショップの構築から運用をまかなえるサービスを利用していて、高度な技術仕様の部分はすべてそちらにゆだねています。このサービス、けっこうスグレモノで、同じURLでも、スマホで接続すると、自動的にスマホ用の画面に変換されて閲覧できるようになっています。よろしければ、スマホのブラウザから「http://www.kiyohisa.co.jp/」へアクセスしてみてくださいな。さて僕は、そのプラットフォームに乗るWebページをデザインしたに過ぎないのですが、このMakeShop内で動的コンテンツを設定するのがけっこうややこしく、また、クライアントさんは既にショップサイトを構築済みで、それをドメインはそのままにMakeShop側にお引越しする形態で進めたので、DNSの設定変更やら何やらで、ドメイン管理会社側とMakeShop側との間を取り持つ必要もあり、それなりに気を遣いました。昨日、ドメイン管理会社側で設定変更をしてもらったものの、今朝になってもURLを叩けばブラウズされるはずのページが表れず、ちょっと肝を冷やしましたが、MakeShopのヘルプデスクに問いかけると、ちょっとしたオンライン上での設定をし損じていて、その設定を行うと、何事もなかったかのように、新しいページが表示されました。やれやれ。まだまだ未完成ですが、これからここの社長さんと打ち合わせながら、さらにブラッシュアップをしていこうと思います。ちなみに、ここのチーズケーキ、けっこう美味でして、楽天市場にも出店されているんですが、そちらもかなりの売上なんだそうですよ。ひとくち、ひとくちをゆっくり味わいたい。そんな気になる極上のチーズケーキです。【あす楽対...価格:1,313円(税込、送料別)
2014年02月07日
コメント(0)
この楽天ブログ、今月に入ってから何となく様子が違います。というのも、レイアウトが微妙に変わっているんですね。おそらく、CSSと言ってWeb表示をつかさどるレイアウト情報の設定値を変更したのでしょうけど、何だか違和感に感じるのは、やけに左フレームの幅が広いこと。中フレームと右フレームは変わっていないように思います。ふつうは、ブログの中心である投稿部分を際立たせるために、中フレームを広げるもんだと思うのですが…。何だかアンバランスなんですよねぇ。このところ、毎日のように設定をいじっているようで、見るたびに微妙にレイアウトが変わったり、元に戻ったりしています。しばらくの間、落ち着かない楽天ブログでした。【送料無料】できるホームページHTML&CSS入門 [ 佐藤和人 ]価格:1,659円(税込、送料込)
2013年09月19日
コメント(2)
埼玉チャプターのホームページの一部コンテンツがスパム攻撃を受けたということで、ホスティング会社から該当するコンテンツの閲覧をロックされてしまったのが、もう1ヶ月以上前の話。当時は何かと気ぜわしく、ほとんど見てみぬふりをしていたのですが、ようやく落ち着いてきたので、本格的に復旧を試みることにしました。で、今のところの復旧プランは、攻撃を受けたモジュールのアップデートがままならないので、まったく別のモジュールを導入した上で、データベースを移植する、というもの。豪雨で流されてしまった橋を復旧するために、元々あった場所の橋脚に新しい橋げたを載せ直すのではなく、上流側に橋脚と取り付け道路も含めて新調し、まったく新しい橋に作り変えるようなイメージです。で、導入したのは、XOOPS版のWordPressというモジュール。埼玉チャプターのホームページにWordPress導入 posted by (C)まさやん6312WordPressはCMSの世界ではかなりメジャーなシステムで、今も頻繁にセキュリティを保つためのアップデートが繰り返されているようであり、より安心。ただしこのモジュールの導入方法がややこしいのですが、以前、制作をお手伝いした「ズーム防災」さんのホームページで導入実績があるため、ここのマスターデータを移植し、埼玉チャプターのホームページにインストールしてみました。すると、あっという間にモジュールの導入は完了。ここから気長にデータベースの移植をしていかなければなりませんが、それ自体は力仕事で済む話なので、何とかなりましょう。ところがここで、新たなお題を作ってしまいました。モジュールのインストールが完了したところで、画面上に「最新のバージョンに更新できます」旨の表示があったので、埼玉チャプターに導入したWordPressと、ズーム防災に導入済みのWordPress双方とも最新版に更新しました。すると…!何と、テンプレートが初期状態に戻ってしまったのです!下の写真では分かりづらいのですが、僕的にはレイアウトがズタズタなんです…(>_
2013年07月29日
コメント(0)
いく人かの知り合いや団体からWebページの制作を請け負っていて、また新たなところから引き合いがきています。最近は動的コンテンツ(ブログ型コンテンツとも言う)と言って、Webサーバー上に格納されたデータベースを元に、自動的にWebページを生成していく仕組みが多く、これをCMS(コンテンツ・マネジメント・システム)というのですが、僕が依頼を受けるのも、この種のWebが多くなりつつあります。これまでは『Xoops(ズープス)』というシステムを使ってきたのですが、このシステム自体、とうの昔にブームが過ぎ去っていて、さまざまなモジュールのアップデートももはや滞りがち。そうなると何が怖いのかというと、セキュリティの脆弱化なんですよね。ネットの世界では悪さをする人間は、次から次へと新手のウイルスや攻撃法を開発してくるので、それに対抗するためには、それら新手の攻撃をブロックするシステムに頻繁に更新していかなければなりません。ところが、『Xoops』はあくまでもボランティアで運営されていますから、モジュール作成者の気が失せてしまうと、その時点でそのモジュールを使うことは非推奨となります。そういうモジュールが多くなってきているようです。現に、埼玉チャプターのホームページがスパム攻撃されたので、使っているモジュールを最新版に更新しようと思ったら、もはや更新すら覚束ないことになってしまいました。もう『Xoops』はごめん! ということで。新たに候補に上がったのが『Wordpress』というやつです。今やこちらの方がメジャーになっているようですね。最もメジャーなのは『Movable Type』というシステムですが、こちらは商用ベースなので、けっこうなお値段がかかります。対して『WordPress』は『Xoops』と同じくボランタリーなので導入費用はタダ。タダより易いものはありません。ま、しかしタダなりのリスクは『Xoops』と同じだとは思いますけど。で、さっそく導入の入門書を買ってみました。【送料無料】本格ビジネスサイトを作りながら学ぶWordPressの教科書 [ プライム・ストラテジー...価格:2,940円(税込、送料込)『WordPress』の解説本は、それこそいっぱい出ているんですが、これが一番装丁がきれいでカラフルだったので、気が惹かれました。WordPressの教科書 posted by (C)まさやん6312けっこういい加減な動機で選んでるなぁ(^^ゞ
2013年07月26日
コメント(0)
日本コーチ協会・埼玉チャプターのホームページの一部コンテンツが、「スパム攻撃を受けた」とのことでホスティング業者さんより閲覧不可の処置をとられてから1週間。この間、仕事で忙しく過ごしながらも、合間を見て対処法を探ってきました。ところが妙策が見えてきません。埼玉チャプターのホームページは、データベースを土台に、内容に応じて自動的にWebコンテンツを生成させるCMS(コンテンツ・マネジメント・システム)を取り入れています。そのCMSの基本システムとしてはXoops(ズープス)というアプリケーションを採用しているのですが、このXoops自体が、一時は一世を風靡したものの、今はややマイナーな存在になっており、さまざまなモジュールのアップデートも緩慢になってきています。しかも、さまざまな手順を解説するWebも相対的に少ない。Xoopsの使用人口が減ってきたことによるものでしょう。そんなこんなで、マイコーチの前で「ちょっとヘコんでます」と吐露すると……。「それって、今やらなきゃいけないことなんですか?」--…え? というと?「それが復帰しなければ、チャプター活動に致命的な影響があるの?」--いや、たとえばセミナーやイベントの申し込みシステムが 閲覧不可になるとヤバいですが、それは大丈夫です。 閲覧不可なのは、過去のセミナー・イベントの記録ページ なので、閲覧できなくてかなりマズい、ということでは ないですね。「たぶん、埼玉チャプターのホームページを訪れる人は、一部が閲覧不可になっていることを、全然気にしてないと思いますよ」そうか。どんなときも、正常な状態で運用なされていることに美学を感じている僕なので、頭の中が復旧を急ぐロジックになっていました。「訪問者は気にも留めてない」と言われれば、焦って復旧させる理由もありません。少し肩の荷が軽くなりました。ここはじっくりと腰を据えて、善後策を講じていこうと思います。【送料無料】XOOPS Cube Legacyでつくる!最強のCMSサイト [ 鈴木宗人 ]価格:2,940円(税込、送料込)
2013年06月30日
コメント(2)
運営委託を受けている、日本コーチ協会・埼玉チャプターのホームページですが、先週末にホスティングを依頼している業者さんから、「外部からのスパム攻撃でサーバに負荷がかかっているため、問題のあるフォルダを一時的に閉鎖しました」というメールが送信されてきました。あまりに唐突なことなのでびっくり。問題のフォルダは下記の2つ。http://jca-sai.com/modules/report/http://jca-sai.com/modules/notice/この2つのコンテンツとも、まったく同じモジュールをインストールしているので、一度に両方が閉鎖されるのは確かに納得いきます。で、今、この2つのURL先にアクセスすると、こんな画面が出てきて、何も閲覧できません。スパム接続によって閲覧不能に posted by (C)まさやん6312今日、とりあえず考えられる対策を講じようとしたものの、システム側でエラーになってしまい、大慌てで元に戻すハメに……しばらくの間、解決を図るためにググる生活が続きそうです…【送料無料選択可!】めんどうくさいWebセキュリティ モダンなWebアプリケーションのためのセキ...価格:3,129円(税込、送料別)
2013年06月23日
コメント(0)
4月の日記に書きましたが、新しいWebサイト構築の引き合いが来ています。共育コーチング研究会春先に、スタッフの方とメールでやり取りしただけだったのですが、せっかくなので、今日開催の例会にお邪魔して顔合わせすることになりました。会場は、表参道にある『ウィメンズプラザ』。青山通りをはさんだ向かい側には、青山学院大学の学舎がそびえています。久しぶりの表参道。昨日の雨天とは打って変わって日差しの強い晴れ渡った今日は、とても明るい雰囲気で満ちていました。そんな中、例会の終盤にお邪魔して参加者を前に簡単に自己紹介。皆さん、笑顔で迎えてくれました。その後、数名でキックオフのランチ。大雑把なところで希望を聞きつつ、それを実現するための方法について解説。言葉を交わしているうちに、徐々にWebの輪郭が明らかになってきました。どういうWebができあがるのか、今から楽しみです。【送料無料】Webサイト制作・運営に役立つ!ホームページ担当者が最初に覚える100の基本 [ 服部...価格:1,575円(税込、送料込)
2013年05月12日
コメント(0)
昨年から、オンラインショップのWebサイト構築のお手伝いをしています。チーズケーキをはじめとした洋菓子屋さんで、楽天市場ではかなり人気のようです。トマトランタン楽天市場店で、本店のWebサイトもあります。トマトランタン本店今回、構築を依頼されたのは、この本店Webサイトのリニューアル。まだリリースしていないので、写真だけしか公開できませんが。昨日、お店の社長さんに現在のページをレビューし、いろいろとフィードバックをもらいました。その結果、大幅にデザインやページ建てを変更することに。ただし社長さんは5月中の新装開店をめざしているので、急ピッチで進めていかなければなりません。オンラインショップのサイト構築は、専門のサービサーがいくつかあるのですが、僕はGMOグループの『MakeShop』を選択。多くのオンラインショップが採用していることもあって、かなりいろんな設定ができるようで作りごたえがあります。ただ、後からどんどん機能強化を図ってきた悲しさ、かなり複雑怪奇なシステムになっており、設定画面とヘルプの間を行ったり来たり。けっこう大変な作業を強いられています。【送料無料】 バカ売れオンラインショップの作り方 デフレ時代にひとり勝ち / 山田雅彦 【単行本】価格:1,470円(税込、送料込)
2013年04月20日
コメント(0)
僕の勤務先は、「『ダイバーシティ』の一環」という理屈で、サイドビジネスを認めています。申請すれば、会社に対して不利益を及ぼさない限り、基本的にはOKです。で、僕の場合、以前からボランタリーでさまざまな組織のWebサイト構築を引き受けてきました。昨年あたりからは、相応のフィーをいただいて活動をしています。とはいっても、主な活動時間は週末に限られており、しかも週末は週末で家族サービスやらコーチングorエニアグラムの勉強会等で時間がとられることも多く、遅々として進行しない状況ではありますが…汗今、手がけているのは、田園調布をはじめ、首都圏内にいくつかお店を持っているお菓子屋さん。ここの会社は、ネット販売で急成長していて、リアル店舗よりも売上が格段に高いんです。今は、自社のホームページ上でオンラインショップを開設しているほか、楽天市場にも店舗を持っていて、むしろ楽天での売上が大きな柱。社長さんは、それはそれとして、自社オンラインショップも拡充したい、という意向で、そのWebサイト構築を任されています。とは言うものの、オンラインショップのWebは今回が初めての取り組み。GMOグループの『MakeShop』というオンラインショッピングサイトの構築支援サービサーに代理店登録をし、現在、構築中ですが、システムがなかなか複雑で、行きつ戻りつしており、半年以上かかってもまだ作業中。そんな中、新たな引き合いがきました。今度は、コーチングがらみのWebサイトです。共育コーチング研究会ここのメンバーに、コーチングつながりの知り合いが在籍しており、彼が、僕の作になる埼玉チャプターや 関東4チャプター交流会等のWebサイトをご覧になり、「研究会ホームページのリニューアルを考えているのでぜひ」と声がけいただいたもの。研究会としては他にも声がけして、コンペになることを匂わせていましたが、その後、研究会のお世話役を務めている方からメールでアクセスがあり、「CMS(コンテンツ・マネジメント・システム)を使ったWeb構築は可能か?」との質問だったので、埼玉チャプターのホームページがまさにその手法で構築していることや、構築後のメンテナンス、フィーなどの各質問にもすぐに返答したところ、レスポンスの速さと回答内容に満足され、そして埼玉チャプターのホームページのセンスも評価していただき、関係するメンバーがもろ手を挙げて、僕に依頼することでOKとなった由。本当にありがたいことです。リリース予定は来年年明けごろ。とはいえ、ボヤボヤしていると、どんどん時間は過ぎていきます。早く、今手がけているオンラインショッピングサイトをリリースしないと!オフの日も、なかなか忙しいまさやんでした。【送料無料】XOOPS Cube Legacyでつくる!最強のCMSサイト [ 鈴木宗人 ]価格:2,940円(税込、送料込)
2013年04月11日
コメント(0)
友人の紹介で、田園調布に本店があるチーズケーキ店のホームページをリニューアルするお手伝いをすることになりました。まだ暑い夏の盛りに、一度、お邪魔したことがあります。その後、メール等で打合せを行い、正式に発注いただいたもの。僕としては今回、初めてネットショップの開設を手がけることになり、新たな挑戦です。ネットショップ開設をサポートしてくれるサービサーはたくさんありますが、今回は価格やサポート体制など、総合的にポイントが高いと思われる、GMOインターネット系の『MakeShop』を選択しました。で、僕はWeb制作業者側になるため、同サービスの代理店登録を行ったわけですが、数日後に、開設キットが送られてきました。ちなみに代理店登録は無料。それで、これだけの手厚いサポートが受けられるのです。しかも代理店ですから、多くのネットショップ開設者をMakeShopに誘導すると、成約件数に応じてキックバックもあるんです。さすがですね。とりあえずキットに同梱されたDVDを見つつ、ネットショップ開設の「てにをは」を学ぼうと思います。【送料無料】ネットで儲ける!ネットショップ [ ジャムハウス ]価格:1,029円(税込、送料別)
2012年11月23日
コメント(0)
最近さまざまなホームページにSNSのソーシャルボタンが付いている事例が多くなってきました。ソーシャルボタンとは、Facebookで言う「いいね!」ボタンのことです。僕が作成・運営しているホームページにも、たとえば『検見川送信所を知る会』ホームページでは最近作成したページに「いいね!」ボタンを付けています。これをCMSで作成している『埼玉チャプター』ホームページにも付けることができないだろうか、と考えていました。すると、同ホームページを構築しているXOOPS(ズープス)のモジュールに、ソーシャルボタンを仕込むモジュールがリリースされているのを知り、組み込みにチャレンジ。各モジュールのテンプレートに仕込み、ひととおり「いいね!」ボタンを設置させることに成功しました(⌒_⌒)意外に簡単に設置できて満足です。【送料無料】Facebook Perfect GuideBook [ 森嶋良子 ]価格:1,659円(税込、送料別)
2012年09月18日
コメント(0)
多くのWebページで、ページ最下部に「このページのトップへ」というバナーリンクがありますよね。このバナーをクリックすると、画面が一気にスクロールアップして、ページの先頭に戻ってくれます。僕が作成しているWebにもだいたいしつらえてあったりします。たとえばこれ。『ズーム防災株式会社』という会社のトップページですが、やはりここにも「このページのトップへ」バナーがあり、クリックするとページの先頭に戻ります。ところがこの動きが一瞬のできごと。今までは特に気にはなりませんでしたが、とある別のWebサイトでは、ゆっくりとなめらかに戻っていく様子を発見しました。「ん!? この動きはどうやって表現するんだろう?」しばらくの間、僕の中では謎になっていたのですが、それが最近になってJavaScriptがベースになっている『jQuery』というWebプログラミング言語によって実現していることが分かりました。『jQuery』は、Flashよりも遙かにデータサイズが軽く、しかしWebサイトを訪れた人を優しく丁寧に導くためのさまざまな仕掛けが構築可能です。したがってFlashに続く、次世代のプログラミング言語と言われています。というからには、僕もチャレンジしない理由はありません。いろいろとネット検索を駆使して調べていくと、意外に簡単にセットできることが分かりました。で、『日本コーチ協会・埼玉チャプター』のホームページにさっそく搭載してみました。「このページのトップへ」というバナーをクリックすると、スルスルスルッという感じでページの先頭へ戻っていきます。なかなか良い感じです【送料無料選択可!】Web制作の現場で使うjQueryデザイン入門 (WEB PROFESSIONAL) (単行本・ム...価格:3,497円(税込、送料別)
2012年09月01日
コメント(0)
1~2年前から2つばかりのFacebookページを管理しています。1つはコーチング関連で『関東4チャプター交流会』。もう1つは、こちらは事務局の久住さんと共同管理している『検見川送信所を知る会』。で、そのFacebookですが、今年の3月に大きくリニューアルされ、「ウォール」と称していたエリアが「タイムライン」と呼ばれるようになり、全体のレイアウトも大幅に変わりました。上記2つのFacebookページは旧レイアウトのままなので、これから現レイアウトの仕様に合わせるべく、少しずつ改良を施していこうと考えています。で、さっそくカバー写真の入れ替えを行いました。「検見川送信所を知る会」Facebookページ posted by (C)まさやん6312「関東4チャプター交流会」Facebookページ posted by (C)まさやん6312『関東4チャプター交流会』の方は、カスタマイズページを設置しており、そちらの方も新レイアウトへの対応が必要です。『検見川送信所を知る会』の方も、いずれカスタマイズページを作成しようかと。ちなみに『検見川送信所…』の方は、本家のホームページのトップページにも、「Like box」機能を使ってFacebookのタイムラインを連携させました。ちなみに僕のアカウントページもわが家の猫たちのカバー写真をつけました。何かとややこしいFacebookのカスタマイズですが、最近は日本語メニューも充実しており、なかなか奥の深さを体感しています。【送料無料】facebookデザインブック改訂版 [ 早乙女拓人 ]価格:1,680円(税込、送料別)
2012年07月22日
コメント(0)
Webコーディネーターとしては震撼とさせた、先月20日の『ファーストサーバ』事件。同社がホスティングしているWebのうち、何と5,700社分のホームページのデータが、6月20日夕刻に一瞬にして消去されたのです。しかも万一のために毎日取り置いているバックアップデータもろともです。セキュリティを高めるメンテナンス中に、そのアップデートプログラムに不備があり、削除コマンドがとめどもなく実行されてしまったのだとか。よりによってコンテンツの改ざんを防ぐためのアクションがコンテンツを削除していったのですから、こんな皮肉はありません。しかもスタッフがその事態に気づくのに遅れたため、気づいたときには6,000社近くのホームページがこの世から消え去ったのです。クライアント側でバックアップをとっていた場合は、何とか翌日までに復旧したとのことですが、たとえば通販会社などでは、これまでに受けた注文情報はおろか、リピート客の過去の購買履歴や属性などの重要な情報も消去されてしまったため、ヘタをすれば顧客のデータベース構築は創業時からやり直し。クライアント企業の経営の根幹に関わる問題にまで発展しています。まさにあってはならない事態なのですが、でも実際にこういうことが起こりえるんですね。そういうわけで遅まきながら僕もバックアップの対策をとることにしました。通常のWebサイトはすべて静的コンテンツであり、『Dropbox』にバックアップデータを取り置いていますが、一部のWebサイトで利用しているCMSでは、データベースはホスティングサーバーに預けっぱなし。もしそこがクラッシュしたらデータベースはアウトで、データ資産はゼロになってしまいます。そこでホスティング先のデータベースにアタッチし、エクスポート処理を行って、データベースをわが家のNASに取り込みました。ちょっと安心です。【送料無料】 SQL辞典 7大データベース対応 POCKET詳解 / 堀江美彦 【単行本】価格:2,310円(税込、送料込)
2012年07月03日
コメント(0)
関東も梅雨入りしました。昨日の夜から降り続いている雨は止む気配も見せず、今日の昼間もずっと雨模様。いつもなら小一時間、ウォーキングにでかけるのですが、今日はそれもかないませんでした。こういうときは、じっくりと腰を据えて、Webコンテンツの作成作業をするに限ります。以前から気になっていた「日本コーチ協会・埼玉チャプター」ホームページのとあるコンテンツ調整を断行することにしました。このホームページは、データベースを元に自動作成する動的コンテンツとなっているため、複雑なテンプレート等の設定が不可欠。今日はとあるPHPファイルの改変にチャレンジしました。ご覧のように、一見、意味不明のアルファベットや記号の羅列。ホームページを訪れた人が閲覧すると、WebサーバがこういったPHPファイルを元に自動的にHTMLファイルを作り上げ、ブラウザに表示させる仕組みです。ところが定義されているファイル内容では、ちょっとレイアウトが崩れてしまうこともあり、その、ちょっとした調整はホームページを作成するユーザに任されています。以前はこんな画面を見てもちんぷんかんぷんだったのですが、しょっちゅう目にしていると偉いもので、今は何となく何を意味しているのかが分かるようになってきました。【送料無料】よくわかるPHPの教科書価格:2,604円(税込、送料別)
2012年06月09日
コメント(0)
Web制作の世界では、従来のPC対応に加えて、最近はスマホやタブレットに対応したWebを運営することがごく当たり前、というか必須の様相になってきています。そして最近リリースされているWebブラウザが新たな規格であるHTML5やCSS3にも対応し始め、こちらも無視できなくなっています。さらに、今後のWeb制作の必須教科は『JavaScript(ジャバスクリプト)』。Webページの表現力に立体感を持たせたり、臨場感あるインタラクティブなページを構築するには、Webプログラミングは避けようがありません。Webプログラミングの代表格がFlashでありJavaScriptなわけですが、FlashはiPhoneやiMac、iPadをはじめとするアップル社のデバイスでは再生することができず、すべてのプラットフォームで扱えるツールではありません。そこで最近、脚光を浴びているのはJavaScript。プラットフォームを選ばず、どんなWebブラウザでもきちんと動作し、しかもFlashよりもデータサイズが軽いため、さまざまなWebサイトでふつうに仕込まれています。JavaScriptは今に始まったテクノロジーではなく、かなり以前から存在していました。僕もしばしば「これをマスターしなければ…」と考えてはいたものの、どうもプログラム言語というカテゴリはとっつきにくく、見て見ぬふりをしていたのが本当のところ。しかしこれからはどうもこのJavaScriptがキーテクノロジーとなりそうな気配。いよいよ無視できなくなってきました。「JavaScriptは敷居が高い」と思っている人は僕以外にも大勢いるらしく、もう少し扱いやすいものにするために、さまざまなライブラリーが開発されているのですが、最近、脚光を浴びているのが『jQuery(ジェイクエリー)』と称するライブラリー。実際のプログラミングでは、かなり簡素化されていて、しかもCSSチックな指令形態なので、僕のようにCSSをある程度マスターしている人にとっては入りやすい技術です。しかもプラットフォームに左右されずに正しく動作するJavaScriptが土台になっているからこそ、jQueryで表現される動きは、アップル社のデバイスでもちゃんと動作するスグレモノ。これをマスターしない手はありません。さっそく良さげな教科書をゲットしました。【送料無料】Web制作の現場で使うjQueryデザイン入門価格:3,497円(税込、送料別)多くの人から「読みやすい」「学びやすい」と評価されているだけあって、コードが羅列されているページも、淡い色合いに着色されていてとっても見やすい。ぜひこの本をもとにして『jQuery』をマスターしようと思います。
2012年05月22日
コメント(0)
最近、新しいWebを公開しました。友人の経営する会社のホームページです。同社のホームページは以前も手がけたことがあって、今回はそのリニューアル版。リニューアルするに当たって希望を聞くと、どうやらデータベースをコアにした動的コンテンツを実現するCMS(コンテンツ・マネジメント・システム)でまとめた方が良さそうだったため、日本コーチ協会・埼玉チャプターで採用したXOOPS(ズープス)を用いました。トップページには埼玉チャプターHPにはない簡単なFlashムービーも配しつつ全体的に淡い色調でまとめてあります。まだ一部で懸案を積み残したままではありますが、とりあえずは公開しようということになって、今回のリリースに至った次第。さて次はどんなホームページをてがけようか。新たな技術を仕込もうと画策しています。【送料無料】XOOPS Cube Legacyでつくる!最強のCMSサイト価格:2,940円(税込、送料別)
2012年05月10日
コメント(0)
昨日書いた次男坊のPCクリーンインストールは、前日未明にSP2への適用、ウイルスチェッカーの導入、iTunesのインストールまで済ませました。が。ネットワーク上のストレージに待避させてあった、音楽データをレストアさせようとしたところ、コピー時間が7時間超と出たため、馬鹿らしくなってほったらかしにし、そのまま就寝。今朝、ようやくコピーが仕上がっていたので、いよいよiPhoneをPCにつなぎ、きちんとドライバが設定されてiTunesでiPhoneが認識されるところまで立ち上げました!これで所期の目的は達成です(^。^)vさてインフルエンザのため水曜日まで休業の身ですが、実は2人の知り合いからホームページの制作を頼まれていまして、細々とは実行していたものの、宿題が溜まっている状態。そういう意味では今回の「出社停止」は天からの恵み。この浮いた時間を活かさない手はありません。そのうちの1つはほぼ完成の運びとなりました。『自分が変わる ダイヤモンド・コーチング』今回の目玉は、商用ブログをベースにページデザインをカスタマイズしていく、というもの。ベースとなったのは『アメブロ』です。タレントやエンターテイナーのブログ開設率の高さで有名なアメブロ。しかるにビジネス仕様のページも数多くあります。それというのも、商用ブログにしてはカスタマイズのメニューが豊富で、比較的簡単に意図したデザインが実現できるからでしょう。通常だと、画面の至るところに広告がちりばめられてうざったいのですが、月額1000円弱の料金を払えば、そういった広告も一掃できます。イチからホームページを立ち上げることを考えれば、ベースはしっかりできているし、更新はブログを書く手間だけで済むので、運営上も手っ取り早いわけです。とはいえ、このカスタマイズにはCSS等の知識が必須。いわゆるホームページビルダーやDreamweaver等のHTMLエディターも使うことはできませんから、CSSの書式コードを見るだけで、仕上がりレイアウトが想像できるスキルも必要。昨年夏に話をもらってから、デザインは起こしたものの、クライアントからの原稿がなかなか届かなかったこともあって、実際の作業に取りかかったのは年明けからでした。そして、ある程度のCSSスキルは持っているものの、予期しないレイアウト崩れやどうにもハンドリングできないブロック体裁など、苦労の連続。コツをつかむのに1か月以上。ここに来て、ようやく形になりました。【送料無料】 アメブロをカスタマイズ魅せるブログデザインを作ろう! / 本岡毬穂 【単行本】価格:1,764円(税込、送料込)
2012年02月07日
コメント(2)
暑い盛りの8月に発起した「Facebookページ」の作成。2か月以上かかってこのほどようやく完成しました上の写真をクリックしていただくと、該当ページが開きます。ぜひぜひ『いいね!』をクリックしてくださいませ未だ使用法が良く分かっていないFacebookですが、いろんな企業がFacebook内に専用ページを開設しているのを見て、「どうやらFacebookのカスタマイズができるらしい」と思ったのが、今回のアクションのきっかけ。いろいろと調べていくと、どうやらFacebook側が無償でカスタマイズ用のアプリを提供しており、それとHTMLのiframeタグを利用すると、自分なりのオリジナルページができる、ということがわかりました。【送料無料】facebookデザインブック価格:1,680円(税込、送料別)できあがってみれば何の変哲もないタダのWebですけれども、ここに至るまでは、そもそもFacebookのことが良く分かってない上に、アプリのインストールをしようとすると、途中から翻訳し切れていない英語ページに遷移したり、Facebook側の度重なるページ更新で、上に掲げた『Facebookデザインブック』に記載されている画面キャプチャとはまったく異なる画面になっていたりでその都度、作業がストップ。そもそも飽き性の僕は途中で嫌になり、一時投げ出すこともしばしばあって、2か月以上もの時間がかかったってことです。今もまだ若干、不満は残っていて、きちんと定義された横幅で作成したのにもかかわらず、上のキャプチャに見られるように、右端にスクロールバーが表示されてしまうことや(iPadを通じてSafariブラウザで閲覧すると、スクロールバーは表示されないのですが)、一度『いいね!』をクリックすると、次回からはトップページが直接は表示されなくなること(これはFacebookの仕様だそうですが)、などがあります。ま、FacebookページがこれからのWeb標準になることはないでしょうが、自分のスキルネタの一つとして持っておくに越したことはないでしょう。Web作成に新たなワザを身につけた今日この頃です。
2011年11月02日
コメント(2)
今、ホームページのサイト作成やリニューアルを2件抱えているのですが、新たな依頼が舞い込みました。以前、手がけたことのある防災会社です。趣味でありながらプロ並みのWebサイト作成を志向し始めた黎明期の作品で、今、改めて見るとデータ構造はかなり稚拙なのですが、この経験がベースになって、その後のさまざまなホームページ作成につながっています。そしてWebサイトによって、それなりの集客効果もあったそうで、さらなる効果を実現するべく、今回のリニューアルの話になりました。クライアントの希望では、ニュースリリースや新着情報などをリアルタイムに頻繁に更新したい、ついては専門知識のない自分でも、ブログを書く感覚で手軽にデータをアップしたい、とのこと。「じゃ、それを実現するのはCMS(コンテンツ・マネジメント・システム)でしょう!」ということで、以前、埼玉チャプター・ホームページでも取り組んだ、XOOPS(ズープス)を使ったデータベース型ホームページに作り替えることにしました。まずは階層構造の確定と全般的なWebデザインを手がけることになります。【送料無料】XOOPS Cube Legacyでつくる!最強のCMSサイト価格:2,940円(税込、送料別)
2011年10月19日
コメント(0)
今、あるコーチからの依頼で新たなWebデザインを手がけています。アメブロをカスタマイズして、本格的なWebサイトに仕上げる、というミッション。今日はナビゲーション・バーのデザインを手がけました。完成品はこちら。見栄えをよくするために、あちらこちらのWebサイトで見かける、楕円状のグラデーションを施したい。このデザインはPhotoshopだけでは表現できません。通常はIllustratorを使うところですが、残念ながら僕はそんな高価なアプリケーションは所持していない。そこで久々にジャストシステムの花子を起動しました。使える素材満載!専門的な分野にも応える表現力を持った「花子2011」なら、やさしい操作でプロ並...価格:8,613円(税込、送料別)Illustratorほど細かな設定はできませんが、雰囲気はこちらでも代用可。花子の画面上で楕円を2つ作り、それぞれをグラデーション表現します。これをPNG形式で保存してPhotoshop側で呼び出し、上からテキストを入力してできあがり。いい感じです
2011年08月28日
コメント(6)
今やSNS(ソーシャル・ネットワーキング・サービス)の代名詞ともなったFacebook(フェイスブック)。僕も一応アカウントを開設していますが、どうも取っつきにくくて放置気味ではあります。ところが最近は、SNSの双方向性とFacebookのメジャー性を活かして、さまざまな企業がブランディングやマーケティングのために、このFacebook上で特設のWebサイトを開設する事例が多くなってきました。そんな中、本屋をぶらついていると、たまたまこういう本が目に入りました。【送料無料】facebookデザインブック価格:1,680円(税込、送料別)ペラペラめくっていると、インライン・フレームタグを使って自由自在にカスタマイズできるようなことが書かれてあります。「おっ、意外とたやすくWebが開設できるんや!」にわかにWeb制作者魂に火が点きました。さっそく購入。仕上がりイメージと元になるソースコードが掲載されていて、なかなか分かりやすく書かれてあります。この本をお手本に、FacebookでのWeb開設を試みることにしました。題材はコーチングの『関東4チャプター交流会』。専用ホームページを設けて集客しているのですが、Facebookに乗り換えることで、さらなる集客効果が出るかもしれません。
2011年08月16日
コメント(2)
友人が経営している会社のWebサイトをリニューアルする話が出てきました。このWebは、僕が「プロにも負けないWeb」を志向した1作目。当時、本格的なWebサイトづくりに、友人が背中を押してくれたんです。制作から5年以上の歳月が経過し、デザインも少し陳腐化してしまいました。一献傾けながら友人の話を聞いてみると、彼もWebサイトを通じたマーケティングをいろいろと試したいらしく、そのためには更新回数をできるだけ増やしたい、と。でも自分は技術的なことがわからないので、自前でページを作るわけにもいかず、「何か良い方法はないかな?」というので、「埼玉チャプター」ホームページで実現したCMSを紹介。「これならブログを書く感覚で、いつでもどこでもサクサクとコンテンツ更新できるよ」と説明すると、「それだ! それ、それ!」と彼はノッてきましたというわけで、新たなWebサイトの構築、スタートです。【送料無料】XOOPS Cube Legacyでつくる!最強のCMSサイト価格:2,940円(税込、送料別)
2011年04月08日
コメント(5)
昨年夏頃から準備を進めてきた日本コーチ協会・埼玉チャプターホームページのリニューアル。半年以上かかりましたが、ようやくほぼ完成し、一昨日より新しいホームページに移行しました。リニューアルしたホームページこちらは旧ホームページ見た目は単にデザインを変更しただけですが、内部的には作り方を大幅に変更しました。CMS(コンテンツ・マネジメント・システム)という技法を使ったのです。通常、ホームページのコンテンツは、「タグ」といわれる書式コマンドを文章や画像の両端に入力し、ブラウザで見やすくレイアウトさせるように作っていきます。できあがったデータは「HTML」と言ってます。ところが通常の作り方ですと、作成者が内容を更新しない限り、常に同じ状態のページが表示されるに過ぎません。ところが最近はそうではないホームページがたくさんありますよね。たとえば通販サイト。画面に表示された商品を好きに選んで「送信」ボタンを押すと、その商品を購入した場合の代金や送料などが自動的に表示される。別の商品を選ぶと、その商品に応じた表示になりますし、複数の商品を選ぶと、ちゃんと合計額を自動計算もしてくれます。あるいは電車やバスなどの「乗り換え検索」というのもありますよね。出発地と到着地や条件(最短時間・最安金額など)入れると、条件に合わせて最適な経路を自動検索し画面に表示してくれる。こういう場合、もともとそのようなHTMLデータが存在しているわけではなく、サーバ内に登録されているデータベースから、必要な情報を抜き出して、サーバ内でHTMLが自動生成され、それがブラウザに表示される仕組みになっています。通常の、表示されるべきHTMLデータが既に作ってある場合を「静的コンテンツ」と言い、上述したように、その時の条件に応じてHTMLが自動生成される場合を「動的コンテンツ」と言います。コンテンツの元になるデータベースを管理(マネジメント)する仕組みなので、正式には「CMS」(コンテンツ・マネジメント・システム)と言うんです。そしてこれは別名「ブログ型コンテンツ」とも言われます。そう、ブログだってそうですよね。ブロガーが自分の意見や感じたことをフォーム内にテキスト入力し、「送信」ボタンを押すだけで、Webページになります。別にブロガー自身がHTMLのコーディングをしているわけではない。で、今回の埼玉チャプター・ホームページでは、勉強会・イベント情報や活動記録のページをサクサクと編集したい、という自分自身の要求が、このCMSに挑戦するきっかけとなりました。このシステムを構築するには相応のソフトウェアが必要です。良く知られているのは「Movable Type(ムーバブル・タイプ)」と「Xoops(ズープス)」の2種類。どちらも機能的には甲乙つけがたいのですが、「Movable Type」は場合によってはお金が必要なようなので、どこまでも無料の「Xoops」を選択。選択したは良いものの、ここからが雲を掴むような話でした。そもそも、WebサーバにインストールしたXoops相手にテンプレートやスタイルシートを編集するわけで、画面上はすべてテキスト。Dreamweaverやホームページビルダー等のホームページ編集ソフトは使えません。ということは、HTMLのタグやCSSの属性情報がすべて分かっていないとダメ。しかもCMSには「PHP」形式という新手のデータが登場します。これがPHP形式のデータなんですが、素人目には何が何だかさっぱりわかりませんね(^_^;これも編集対象に入るんです( ・_・;)虎の巻を買ったものの、それでもよく分からず、日々、編集画面と自動生成画面とを交互に見つめつつ、ネット上で公開されているさまざまなTIPSにアクセスしてあーでもない、こーでもないと格闘すること半年が経過。ようやく日の目を見たわけです。埼玉チャプターの会員さんにはIDとパスワードを発行。ログインしない状態でアクセスすると、画面の右上はこのような表示になっていますで、個々に割り当てられたID・パスワードでログインすると、こういう表示に『ようこそ○○○○さん』の文字だけではなく、その直下のメニューも表示が違いますよね。ユーザーが異なるだけで、このように画面表示を変えることができ、さらには「この人は閲覧だけ」「この人は編集も可能」と、権限も違えることができます。今回のCMS導入によって、勉強会やセミナーの申込者も一元管理が可能となりました。たとえばセミナー申込者にメールを送りたいときには、別途、メーリングリストを立ち上げねばならず煩わしかったのですが今後は、ホームページ上の管理画面から「メール送信」ボタンを押すと、メッセージ入力フォームが表示され、メッセージ入力後に「送信」ボタンを押すことで、そのセミナーの申込者だけに一斉同報でメールすることができます。運営者側にとっても、とても使いやすいWebサイトになりました。【送料無料】XOOPS独習マニュアル価格:2,940円(税込、送料別)
2011年01月20日
コメント(4)
車のオーナーズクラブつながりで、千葉でクリーニング店を経営している友人から「ホームページをリニューアルしたい」ということで引き合いがあり、このほど完成しました『レッツクリーニング』実はオファーをもらったのは春先のことで、その間、iPad購入で意識がそっちの方に行ったり、別の方からホームページ制作のオファーをもらったりと、あちらこちらで道草を食い、完成までずいぶん時間をかけてしまいました。それでも諦めずにできあがりを粛々と見守ってくれた友人に感謝です。コンテンツ制作のテクニカルな部分は、これまで培ってきたスキルを活かし、そつなく育て上げましたが、そんな中でも今回も新たな進化を持たせました。それは、トップページのFlashムービーの作成技法です。表面上はわかりませんが、1つ1つのムービーアクションを独立したモジュールで作りました。たとえば冒頭の「あなたはあきらめていませんか?」メッセージのフェイドイン・フェイドアウトで1モジュール。続いての、シミで汚れた衣類が順番に3つ現れる上に「衣類などに付いたシミは、必ず除去できるんです」メッセージで1モジュール。こういったあんばいで、すべてのアクションを1モジュールずつ部品として作成し、それをマスターのタイムライン上で配置した上で、それぞれの再生時間をActionScriptで設定。こういう作り方をすると、途中で1モジュールごとのアクションの差し替えが簡単に行えるんです。とっても効率的だし、データの構造も簡単になってメンテナンスしやすい。「検見川送信所を知る会」HPの作成時に着想したんですが、今回のホムペ作成で実行に移しました。それともちろん、昨日の日記にも書いたように、Flash Playerが無効になっているブラウザ対策もカンペキFlashムービーの効率的な制作をマスターできた感をたっぷりと味わったことですFlash職人になる本価格:2,394円(税込、送料別)
2010年07月26日
コメント(2)
今やモバイル端末として爆発的ヒットになっているアップル社のiPhoneとiPad。有名な話ですが、Web上のムービーコンテンツとして今や切っても切り離せないFlashの動作を無効としています。いろいろと物議を醸していますが、現状ではアップル社の決めたことなのでどうしようもありません。で、そういうFlashの動作を無効としているブラウザでFlashムービーが入っているWebコンテンツを開いた場合、Flashの部分はグレーの枠が表示されるだけでとても不親切。そこで「SWFObject」という技術があります。SWFObjectを取り入れたHTMLソースを書くと、細かい技術的な説明は省きますが、Flashを有効としているブラウザ上ではFlashを動作させ、Flashを無効としているブラウザ上では別に定めた静止画像等を表示させるよう、自動的に切り替えてくれるんです。「検見川送信所を知る会」のHPでその技術を取り込んでみました。Flashが有効な場合はFlash動画が再生されます。そしてFlashが無効の場合は、このような静止画像に自動切り替え。静止画像だけではおもしろくないので、各コンテンツへのリンクも表現してみました。で、くだんのiPadで表示させるとご覧のとおり。Flash無効のブラウザ上でも、こういう技術を使えば、多少はストレスも減殺されますね。FLASH HACKS価格:3,780円(税込、送料別)
2010年07月25日
コメント(4)
一昨日に引き続いてWeb制作のお話です。僕のWeb制作の流儀は、『シンプル & ビューティー』。余計な要素をできるだけそぎ落とし、真髄だけ残す。それが「ビューティ」、つまり「美」につながるわけです。ただし、この流儀は僕の専売特許ではなく、プロのWeb制作の世界では今やしごく当たり前のことではありますが。以前の日記にも書きましたが、僕は「プロのWebデザイナーに匹敵するWebコンテンツを作る」ことをめざしています。なので、『シンプル & ビューティー』の流儀は当然の帰結。そしてこの流儀を貫くためには、HTMLの構造を理解し、それに応じた工夫が必要です。その代表的な取り組みを以下に取り上げたいと思います。Webページを構成する要素には、大きく分けて2種類あります。1つはコンテンツの内容そのものをあらわす『構造』、もう1つは、レイアウトや装飾を司る『書式』がそれ。従来のWebページでは、HTMLファイルの中(ソースコードと言います)に『構造』と『書式』がミックスして書かれていることが通常でした。しかしこれがHTMLの複雑化・煩雑化を加速させていたのです。HTMLというのはもともとデータベース言語が起源であり、そもそもは、最低限必要なデータを系統だって規則正しく書き連ねることが本来なのです。それを、あまりにも見た目の体裁にこだわるあまり、内容とは直接関係のない記述がソースコードに溢れている。これは本来のWebのあり方ではない、ということで、現在では『構造』と『書式』を厳格に分け、HTMLファイルには『構造』のみをソースコードとして収録し、レイアウトを司る『書式』は、『スタイルシート』(正式名称は『カスケーディング・スタイルシート』、略称は『CSS』、以降CSSと記述します)と呼ばれるファイルに収録することが推奨されています。Webブラウザに表示するときには、目的のHTMLファイルが立ち上がると同時に、そのHTMLファイルと関連づけられているCSSファイルも裏側で同時起動し、HTMLとCSSがお互いを参照しあって、レイアウトする仕組み。実はこの仕組みの方が、素早く表示できるメリットもあります。かくして『構造』部分のソースコードは、非常に見た目が簡素になり見やすい。つまり「美しい」。そして「簡素な美しさ」は、単に「美」だけではなく、実務的にも大きなメリットをもたらします。つまり、後々でデータを修正したり、新たな情報を追加するときに、ソースコードが見やすいため、何をどうすればよいのかが瞬時に分かり、スピーディーに、かつ間違いが少なくメンテナンスできる。良いことずくめなのです。さらにさらに! 今日の日記は長くなります。ごめんなさい。1つの事例をここで取り上げましょう。今回の作品『かまくらん』ホームページもそうですが、僕が制作するWebページは、各コンテンツへジャンプする際のナビゲーションに、画像バナーを用いています。しかもマウスを近づけると、バナーボタンの色が変わる仕組み。『かまくらん』ホームページのバナーも、マウスカーソルが乗ると、バックの薄紫が濃色の紫に変わります。バックが薄紫と濃紫の2種類の画像を用意し、マウスカーソルが画像上にあるかないかで自動的に画像を差し替える、というカラクリです。この動きを実現するためには、従来はJavaScriptというプログラミング言語まで動員し、複雑怪奇なソースコードをHTML上に表現していました。上図の上の赤枠がJavaScriptというプログラミング言語の記述。下の赤枠内は、それぞれのナビゲーションバナーを設定しているHTML上の記述。いずれも何だかごちゃごちゃしていますね。これを、CSSを活用したシンプルなHTMLで作り直すと、こんな感じ。実にシンプルだと思いませんか?そして「美しい」という感覚も分かっていただけるでしょうか。さらに、マウスカーソルの動きで画像が差し替わるロジックは、すべてCSS側に書いてあります。これらHTML上の記述とCSSの記述が合わさって、美しいハーモニーを表現するワケですね。ちなみに、従来のJavaScriptを使用した記述ですと、バナーに使う画像は、1メニューにつき2種類、ここでは3メニューありますから、下図のような画像ファイルを合計6個作ることになります。 ところがCSSを活用した作り方だと、1つのファイルに6個分のバナーをデザインするワザが使えます。このメニューバナーの1つ1つの画像を表示させるエリアは、CSS上で座標指示をすることによって定義しています。あたかも6つの画像ファイルがあるように見せるギミックです。6個のファイルが1個で済む。これも『シンプル & ビューティー』の1つですね。つらつらと書いてきましたが、これらはプロのWeb制作者にとってはしごく当たり前の技法。彼らはさらに高いレベルに進んでいます。僕も負けじと新たな次元へ進んでいきたいと考えています。プロとして恥ずかしくないWEBデザインの大原則新版価格:1,890円(税込、送料別)
2010年06月17日
コメント(2)
昨日の続きです。今回制作した『かまくらん』ホームページは、こちらの提案に依頼者が絶賛してくれたので、縦書きで攻めることにしました。ところがこの縦書き。メチャクチャ難しい。昨日の日記にも書きましたけど、米国生まれのHTMLは、もとより縦書きを表現するタグを持ち合わせていません。結果、当初はスタイルシート中の「float(フロート)」というスタイル属性を用い、1文字1文字下へ回り込む技法で表現しました。しかし、これがやってみると難関。というのも、IE7で何とかレイアウトが整い、今度はIE6で見ると、大幅にレイアウトが崩れている。ハックしてIE7でもIE6でもレイアウトが崩れないよう補正し、今度はFirefoxで見ると、さらに崩れている。こうなるとイタチごっこです。半日格闘し、ようやくまとまりました。ところが依頼者に知らせると、彼女のPCはIE8らしく、「崩れてます」と返信がご覧のように『自然にあふれ…』から始まるタイトルがダブっていますよね。IE6とIE7で異なるタイトル画像を出すハックを仕組んでいたんですが、IE8ではそのハックが効かず、どちらの画像も表示され、その影響で文章がすべてこぼれて欄外に落ちてしまっていました。結局、縦書きHTMLは断念。すべて画像でまとめることにしました。さらにiPadのSafariでも問題ないことを確認。iPad・SafariでOKなら、おそらくMacintoshでもOKかと僕としてはHTMLで縦書きが表現できる、という達成感が味わえませんでしたが、何とか無事に「見られるWeb」が完成して何よりです。できるホームページHTML入門改訂版価格:1,659円(税込、送料別)
2010年06月15日
コメント(0)
コーチングを学び始めたときに研修で知り合ったコーチ仲間から、「企業のエグゼクティブを対象としたコーチング会社を立ち上げた」ということでホームページ制作の依頼がありました。話としてはもう1年以上前にさかのぼるのですが、彼女もご自身の勉強や会社設立、あるいはプライベートで多忙な日々を過ごされており、僕も何だかんだと不精を囲う人間なので、作業がなかなか進まず、このほどようやく日の目を見た、というわけ。こちらがそのホームページです。最初に行った打ち合わせで、「作成するページ数は3ページ分」といった基本的な内容を取り決め、翌日から五月雨式に文章や写真等が送られてきたのですが、デザインについては全部こちらにおまかせ。彼女からは「既定の枠を取っ払って、“枠外思考”で考えて!」と再三言われていたのですが、果てさて、どうしたものか……。来る日も来る日もアイデアが湧かず、ほとんど別のことに情熱を傾ける日々が続いてしまいました。そんななか、ふとしたことであるアイデアが浮かびました。社名の『かまくらん』とは「鎌倉人」の意で、コーチ仲間の彼女自身、古都・鎌倉で生まれ育った生粋の『かまくらん』。そして鎌倉というと、古都・海と山(自然)といったキーワードの他に「セレブ」「エグゼクティブ」というキーワードも似合いますよね。古くから高級住宅地が開発され、そして大企業の経営者がこぞって住まうエリアでもあります。その鎌倉の地で、エグゼクティブを対象にコーチングを行う。古都・鎌倉。ふむふむ。ところで、ホームページを構成するHTMLというのは、ページの概念がありません。ワープロなら用紙サイズという概念がありますよね。設定した紙の大きさの画面が表示されてページアップできるようになっています。ところがHTMLは1ファイルが1ページ、という概念なんです。そう、言うなれば昔の『巻きもの』のイメージです。おや?ここで、「古都・鎌倉」と「巻きもの」が頭の中で符合しました。「あ、そうだ! ホームページを縦書きにしたらどうなるだろう!?」米国生まれのHTML。なので、当たり前ですが横書きが基本です。編集に必要なコマンド(タグ)も、横書き用しか用意されていません。翻って、縦書き文化が生き残っているのは、おそらく世界でも日本や韓国くらいなもの。本家の中国ですら新聞は横書きですからね。あまたあるホームページの中で縦書きのホームページは皆無ではありませんが、しかしこれは、依頼者の“枠外思考”ピッタリではないか?ということで、パタパッとデザイン案をまとめて提案したところ、絶賛を受けましたこうやって生まれたのが、今回のホームページです。しかし、ここに来るまでの数週間、来る日も来る日も縦書きとスタイルシートとの格闘でした。結果的には、どうやってもブラウザごとに表示が異なるため、涙を飲んでほとんどすべてを画像でまとめることになりましたが、しかし、「シンプルなソースコード」を標榜する僕にとっては、とってもシンプルなHTMLコードが実現し、それはそれで満足。明日は、格闘シーンの一端を書いてみたいと思います。できるホームページスタイルシート入門価格:1,659円(税込、送料別)
2010年06月14日
コメント(0)
HTMLの世界が今年2010年に大きく変革しようとしています。従来のHTML4.0ないしXHTML1.0のバージョンが、一挙にHTML5という仕様にアップされるのがそれ。長年にわたってWebの仕様として君臨されてきたHTML4.0は、もはや10年以上前にリリースされた内容。当時は大容量のデータを通信で送受信するようなブロードバンド技術も黎明期であり、そういった技術基盤が前提で策定された仕様でした。ところが今や一般の家庭でもADSLや光回線による大容量のデータ送信により、PC上でTV放送や映画を見ることができる時代です。現在のHTML仕様ではそのようなWebライフを想定したものではないので、それを補足するためのアプリケーションが開発されてきました。このような補足アプリを開発する会社が大きく幅をきかせ、それがWebビジネスの賑わいを演出してきたのは事実。しかし冷静に俯瞰してみれば、そのようにめんどっちいプロセスがなければムービーすら満足に表現できないのが現在のWeb環境なんです。それを打破するために策定されているのが「HTML5」。ところがこのHTML5、どうやらWebコンテンツを制作する会社やサービサー、各種のアプリケーションを開発している会社からは、かなり冷めた目で見られているようです。たとえばWebページのレイアウトには、これまでの仕様だと半ば「芸術」と言っても良いくらいのコーディング技術が制作会社ごとあるいはWebデザイナーごとに編み出され、それがウリになっていました。ところがHTML5では、本格的なレイアウトを単純に実現するためのタグが実装され、コーティングが「芸術」ではなくなります。これは制作会社やデザイナーのウリがなくなるのに等しい。自分のWebサイトが、多くの人の目にとまってくれるよう、つまり検索されやすいような構造にする。これを実現するために、「SEO対策」と称したコンサルティングを行うサービサーが世間から注目を浴びていますが、これも簡単に対策できるタグが実装されるので、サービサーの存在価値がほぼゼロになります。ビデオ・オーディオコンテンツが素直に掲載できない現状のHTML仕様では、それを補足するためにAdobe社の「Flash」が一世を風靡しています。ところがHTML5では、GIFやJPEG等の画像を貼り付けるのとまったく同じ手法でビデオ・オーディオコンテンツを取り扱うことができます。つまりFlashは不要になります。最近、FlashをiPhoneやiPadに実装するしないでクローズアップされたApple社とAdobe社の仲違いも、このHTML5の仕様開発がベースにあると言われています。今までWeb制作にあたってさまざまな「強み」を持っていた企業や組織が、HTML5のリリースによって一気にその「強み」がなくなり、むしろノウハウや技術を囲うために構築してきた資源が「弱み」になってしまう懸念があります。だからHTML5のリリースに真っ向からアレルギー反応を示している人たちもたくさんいることでしょう。しかし大勢にはあらがうことはできません。かつてエネルギー源が石炭が石油に代わったように、いかに過去の既得権益があろうと、その時代の趨勢はシフトチェンジを加速させていくものです。さてWeb制作をたしなんでいる僕にとって、このHTML5のリリースは実は朗報です。SEOもFlashも自分にとってはけっこうハードルが高い。それが、あまりそのような周辺の技術のことを考えずしてコンテンツの本質を磨く方に力を割くことができるわけですから。今から待ち遠しい、HTML5の公開です。HTML 5 & API入門
2010年05月07日
コメント(0)
「検見川送信所を知る会」ホームページのリニューアルですが、今月初めに全コンテンツのデザイン変更を完了しました。ブラウザのアドレス欄左端に表示されるファビコンもホームページ本文のカラーと合わせてシックな色合いに変更しています。今回も裏側でいろいろな仕掛けを施していますが、その中の一つが、「ブラウザの画面表示とプリントアウトした際の表示を切り替える」というもの。具体的には、下のキャプチャを見てください。2月7日開催したイベントをニュースとして報じたページで、それをブラウザで表示したものです。このページをプリンタから印刷したいとき、薄い赤枠で囲われた部分というのは全ページに掲載されている検索フォームやシンボリック画像、あるいはサブメニューのたぐいであり、特に印刷してまで必要な要素ではありません。それよりも本編をA4用紙いっぱいにレイアウトさせて、できるだけ用紙を効率的に使う方が経済的だし合理的。そこでCSS(カスケーディング・スタイルシート)による画面制御のスキルが活かされます。閲覧者が「印刷プレビュー」や「印刷」のコマンドを実行すると、CSS中の印刷仕様のスタイルが適用されます。その結果がこちら印刷時には不要となる要素がノンディスプレー(表示されない)モードになり、さらに本編の横幅がA4いっぱいになるようリサイズされます。これで紙の無駄遣いも減らせる、という算段。時代はエコ。いろんな場面で工夫の余地がある、ということです。
2010年03月11日
コメント(6)
昨年秋ごろから取り組んでいる「検見川送信所を知る会」ホームページのリニューアル。お正月のトップページリリースに続き、今日は「サイトマップ」や「お問い合わせ」など、このホームページの補足的なコンテンツを新しいデザインでリリースしました。【サイトマップ】http://kemigawaradio.web.fc2.com/cont/opmenu/sitemap.html【お問い合わせ】http://kemigawaradio.web.fc2.com/cont/opmenu/inquily.html今回のリニューアルは、既存のページを活かしながら、新しく作成し終わった順に、ファイルを差し替える手法をとっています。よく百貨店の改装工事とか、鉄道線路の高架化・鉄道駅のリニューアルでもありますが、『営業しながら更新していく』というパターンですね。ですので、しばらくの間は旧デザインと新デザインのコンテンツが入り交じって公開されています。色遣いが新旧で違いますので目が疲れてしまうかも知れませんが、なにとぞご了解のほどを。ちなみにわが家のハードディスクは、新旧のデータ双方を同時に管理していて、ほとんど神経衰弱の状態ですそんな中、作成したデータをWebのホスティング先へ転送する『FFFTP』を重宝しています。この転送ソフト、無償で利用することができ、Web作成者の間では定番のソフトウェア。取り扱いが簡単なうえに、けっこう高度な仕事を請け負ってくれます。たとえば「ミラーリング・アップロード」という機能。手元の(ハードディスクに入っている)Webファイル全体と、ホスティング先(公開している)Webファイル全体の双方を検索し、手元のWebファイルの方が新しければ、自動的にそのファイルだけホスティング先に転送し、また、ホスティング先に存在して手元に存在しないファイルは「不要ファイル」とみなされて自動的に削除される、といった作業をワンクリックでやってくれます。Web作成アプリの「Dreamweaver」にもファイル転送の機能は付属しているのですが、けっこうガチガチに作られていて、意外と融通がききません。【送料無料】在庫あり 翌営業日出荷Dreamweaver CS4 通常版 日本語 Windowsそれにひきかえ「FFFTP」はソフト自体がとっても軽く、サクサク動き、ファイル転送のメンテナンスもあっという間。今回のWebリニューアルに際しては大活躍です。
2010年01月10日
コメント(2)
今日から僕の会社は仕事始めです。昨年末の12月29日からの、まる1週間の休暇はあっという間に過ぎ去り、いつもの生活に戻りました。さてこの休暇期間は、大掃除をしたり、買い出しに行ったり初詣をしたり、映画鑑賞をしたりと何かと毎日を慌ただしく過ごしていましたが、その合間あいまに着々と進めてきたのが「検見川送信所を知る会」ホームページのリニューアルです。実は1月1日にトップページを新しいデザインに更新しました。 (画像をクリックすると、ホームページが開きます)今回の目玉は、ストーリー性を持たせて編纂したFlashムービー。このムービーの制作にあたっては、動画そのものもさることながら、画面下に左右に広がるナビゲーションボタンをクリックすると、各階層メニューが上方へ展開する動きを実現させたことが、自分にとっては大きな成果です。ここに至るまで、ActionScriptのリファレンスマニュアルとにらめっこする毎日が延々と続きました。しかし、それ以上に僕自身が満足しているのは、前バージョンよりもさらにレベルを上げたスタイルシート(CSS/カスケーディング・スタイルシート)のワザです。前バージョンは、段組を表現するために罫線のない大きな表を作成してレイアウトしていました。たとえばトップページだと左端・真ん中・右端と3つのセルから構成する表になっていました。これをCSSを駆使することで、表を作らずに「フロート」という流し込みスタイルを多用してあたかも段組になるように構成させました。これを「リキッド・レイアウト」といいます。このデータ生成方法によって、画面全体の表示にかかる時間が短縮されました。また、リンクバナーの画像のマウスオーバー効果(マウスを当てると画像が薄くなったり濃くなる)も、従来はJavaScriptを利用したプログラムでしたが、これもCSSの表現で行うことにより、スムーズに画像が表示されるようになりました。さらに、従来はブラウザの種類やバージョンによってレイアウトに差異がありました。IEではちゃんと見えるのに、Firefoxでは崩れてしまう、ということが往々にしてあったんです。これを、CSSをハックさせる技術を使って、ブラウザがIEであろうがFirefoxであろうが、Google ChromeであろうがSafariであろうが、ほぼ同等のレイアウトで閲覧できるようにしました。リキッド・レイアウトにしろ、CSSハックにしろプロの世界では当たり前の、Web作成における要諦です。ようやくここまで自分のウデも到達させることができました。「検見川送信所を知る会」のホームページを担当させてもらってありがたい限りです。世界の「最先端」事例に学ぶCSSベスト・プラクティス
2010年01月05日
コメント(2)
「検見川送信所を知る会」ホームページのリニューアルに細々と取り組んでいる昨今ですが、Web全体の顔となる、トップページ用のFlashムービー素案ができあがりました。今月最初の日記に、「ActionScript(アクションスクリプト)」を活用したプルアップメニュー完成の話を書きましたが、そのときのデータを土台にして、検見川送信所の価値や保存の意義についてそのアウトラインをムービー化したものです。百聞は一見にしかず。下のリンクをクリックするとご覧いただけます。http://kemigawaradio.web.fc2.com/header_mv.html面白いのは、ムービー再生中もナビメニューにマウスカーソルを当てると、下階層のメニューがムービーを覆うようにプルアップすることです。しかもメニュー画像が半透明になっているので、メニュー画像と重なる部分の動画も肉眼で見えるんですよ。原理的には簡単なワザですが、我ながら「うまくできたなぁ」と、ひとりほくそ笑んでいます。とは言っても、まだまだ荒削りなところもあると思いますので、改善点を忌憚なくいただければと思います。ActionScript 3.0プログラミング入門
2009年11月26日
コメント(2)
この日記のトップページに掲げてあるバナー集に、新たなバナーを加えました。「fun together」という屋号で、コーチング・セミナー・研修などを企画・開催するコーチ仲間のWebサイトです。これまでも日記ではこのWebサイトの作成途上のトピックを書いてきていましたが、一応の完成を見たため、バナーを掲げることにしました。ぜひ皆さまも一度バナーをポチッと押してみてくださいな。↓はじめてのホームページ作り小さな会社のWebサイト制作・運用ガイド
2009年11月12日
コメント(2)
かねてより「検見川送信所を知る会」ホームページをリニューアルすべく取り組み中です。ページのデザインやレイアウトも変更しますが、トップページのFlashムービーも大幅な変更を計画していまして、現在、フリーのFlash作成ソフト・Suzukaにて育成中です。この週末で、全体の半分近くまで仕上げることができました。まだまだ完成には遠いですが、1つ1つオブジェクトの作成を楽しみながら作り上げつつあります。来週までには形にしたいと考えています。WebデザインFLASH
2009年11月08日
コメント(0)
「検見川送信所を知る会」ホームページのリニューアルを計画しており、そのためにFlashムービーの新たなワザに挑戦していることは、10月8日の日記で書きました。で、このトレーニング結果をもとに、本番用のFlashムービーを作り始めました。下が作成中の『Suzuka』画面です。いろんなカーソルの動きを想定し、ストーリーを作ってからプログラムへ落とし込む。それをアクションスクリプト(ActionScript)に書いていきます。と言えば簡単なのですが…(^_^;)アクションスクリプトは、ほとんどプログラミングの世界なので、文系人間にとってはパッと見、まったく不可解。これをリファレンスマニュアルと首っ引きで格闘するのですが、なかなか勘所が鈍くてですね~。何度も行きつ戻りつ、かなーりモチベーションが下がった時期もありまして…。で、ようやくプルアップメニューが完成しましたhttp://park23.wakwak.com/~masayan/header_mv.htmlカテゴリ(下メニュー)にマウスカーソルを当てると、そのカテゴリに属しているインデックスが、左下から順番にストレッチします。そして表示された各インデックスにマウスカーソルを当てると、見出しの文字が光っているかのようにフォーカスされるしかけにしてみました。メインのFlashムービーができあがったことで、これからいよいよリニューアルに弾みがつきます。ActionScript 3.0ビジュアル・リファレンス
2009年11月01日
コメント(4)
全62件 (62件中 1-50件目)