東京ウェブデザへろへろ日記 tag:ez.ws27.com,2010-09-25://2 2012-03-23T04:36:49Z 個人事業主として働くウェブデザイナーのへろへろでむふふな生活と意見。 Movable Type Pro 5.06 ガーナ共和国金鉱山採掘事業 tag:ez.ws27.com,2012://2.500 2012-03-23T04:34:51Z 2012-03-23T04:36:49Z 株式会社GGMジャパン ガーナ共和国金鉱山採掘事業... kj

株式会社GGMジャパン
ガーナ共和国金鉱山採掘事業
]]> jQuery Mobileを使って、スマホサイト制作に挑戦。 tag:ez.ws27.com,2012://2.459 2012-03-07T06:13:17Z 2012-03-12T12:36:03Z iPhone、Galaxyなどスマホが普及して、スマホ専用サイト制作の需要が増大... kj
私はスマホをもっていないが、時流に乗り遅れないように自分のサイトを実験台にしてスマホサイトを制作してみた。

スマホは独特のUIがあり、アップルが提供しているパーツもある。そのインターフェイスと使用感はPCとはまったく異なる世界のようだ。したがって、アップルが提供しているデザインの要素や動きを効果的に使って、「らしい」サイトにしたほうが、見た目もいいし、使い勝手もいいだろう。

そこで、スマホ制作用のプラットホームを探して、それを使って制作することにした。

いろいろググった結果、jQuery Mobileというのがあり、それが定番というわけではないが、いまのところ有力であることがわかった。

jquery_mobile02.jpg

で、このjQuery Mobileでつくってみた。

jQuery Mobileでスマホ用サイトをつくる場合、基本的にページを分けずに、すべて1ファイルの中に入れ、アンカーでページを呼び出す仕組みになっている。そうすることで、スマホらしいページ遷移の動きが可能になる。一番ポピュラーなものでやったが、サファリでみても、ページがぬるっと横にスライドされて遷移するので、「らしい」感じになる。いい感じだ。

制作した後、ヤマダ電機のiPhoneでチェックしたら、ちゃんと動いた。それにしても、iPhoneの液晶はものすごく高精細で、ドットが細かく、文字が美しい。この美しさが、スティーブ・ジョブスの偉大さなのだろう。

とりあえず、基本的なパターンでつくるのはむずかしくないことがわかった。

ご要望があれば、仕事としても受注します。※ただし、実機検証なし。すみません。

]]> セマンティックなWEBの記述、HTML5に挑戦。 tag:ez.ws27.com,2012://2.452 2012-03-05T13:35:55Z 2012-03-05T13:38:58Z 土日を使って、HTML5の研究をした。HTML5といえば、FLASHの代わりにな... kj
土日を使って、HTML5の研究をした。

HTML5といえば、FLASHの代わりになるものであって、FLASHが不要になるといった話題が先行しがちだが、セマンティックなHTMLの記述という点のほうが、WEBデザイナーの基本的技術として重要である。

セマンティックとはむずかしい言葉であるが、意味論の、という意味だ。これは、記述の仕方を意味論的におこなうということらしい。それによって、コンピュータによる意味的な理解が容易になる。もともとXMLはそんな感じであるが、そういう階層化が明確な記述をおこなうということと私は理解した。

HTML5はセマンティックWEBを標榜している。タグの記述はかなり構造化されている。とはいえ、sectionの中をどうするか、微妙にわからないところも何箇所かあった。

とりあえず、土日を使ってすでに完成している自分のサイトをテスト的にHTML5化してつくり直してみた。

感触としては、仕事でも使えそうだなという感じ。よしよし。 ]]> MTの無料テーマを使ってみた。 tag:ez.ws27.com,2012://2.445 2012-03-03T06:12:38Z 2012-03-05T01:50:06Z MT（MovableType）をいろいろカスタマイズしていじくっている。スマホが... kj

MT（MovableType）をいろいろカスタマイズしていじくっている。

スマホが普及してきたため、スマホ対応にしようと考えてトライしたが、再構築が重くなったりして、けっこうむずかしい部分がある。

自分流でカスタマイズするのに限界を感じたので、配布されているMT用のテーマを使ってみた。

MT underHatさんが配布しているテーマである。

canvas01.gif

MT underHat テーマ 002 - カンバス

インストールするのは簡単だ。ファイルをダウンロードして、MTのサーバーにアップし、管理画面のテーマのところから適用させればいい。そのとき、同時に必要なプラグインを入れる（サイトの説明に従って）。

で、管理画面からサイト全体を再構築する。すると、いちおうサイトは表示されたが、よくよくチェックすると、記事のパーマリンクが変更されていることに気がついた。

私がいままでにアップした記事とは異なるパーマリンクが設定されている。いままでの記事は大切なので、パーマリンクを変える必要がある。で、記事アーカイブのテンプレートを開き、アーカイブマッピングを変更する。これで、OK。

素晴らしいテーマである。文句なしにおすすめする。デザインはシンプルで、改造のしがいがある。

ただ、ひとつ問題があった。スマホサイトが表紙しか表示されないのだ。どういうわけか、私の場合、記事のファイルが生成されていなかった。いろいろ調べて、次の方法で解決した。

結論をいうと、スマホのテンプレートのアーカイブマッピングを変更する。そのとき、通常ならプルダウンメニューですでに例示されているもののなかから選ぶのだが、スマホの場合、ディレクトリをつくるため、選択のなかにない。カスタムでつくる必要がある。この作り方が、間違っていた。

■アーカイブマッピングの記述方法
ダメだった記述
i/yyyy/mm/entry_basename.html
↓
OKの記述
i/%y/%m/%_c.html

MTのマニュアル
この表のなかの一番左の列「項目」というのを使うとできた。
なぜか、わからないけど。
これで一見落着。

この問題が解決したので、次は自分独自のMT用スマホサイトを構築しようと思う。

]]> MTの再構築でScriptErrorが出る悩み。 tag:ez.ws27.com,2012://2.427 2012-02-26T15:53:21Z 2012-03-05T01:50:30Z MTの投稿記事数が多くなると、再構築が重くなるのは多くの人に共通の悩みである。... kj

MTの投稿記事数が多くなると、再構築が重くなるのは多くの人に共通の悩みである。これは、MTの宿命みたいなものである。当方も例にもれず、MTの記事が多くなって、再構築の重さに困っている。

私のケースでは、投稿のボタンを押すと、ScriptErrorが出るというものである。その内容は以下のようなもの。

Script Error
The script did not produce proper HTTP headers. Please see the error log to see the detail of the errors. Depending on the server configuration, you can also run thisscript under CGIWrap debugging. Usually, either rename or linkthe script temporarily to a file which ends with .cgidextension, or add a AddHandler cgi-script-debug .cgiline to your .htaccess file.

この改善策を探って、しつこくググってみたが、決定的な解決策はない。当方のサーバーはXREAであるが、XREAでよくこのScript Errorが出るようだ。

とにかく、軽くしようと思って、コードをできるだけ軽くし、MTインクルードもできるだけ削ったりした。しかし、いろいろやってもダメ。

というわけで、MTの再構築が重い場合の定番的な方策であるダイナミックパブリッシングにすることにした。やり方は、テンプレートのページから「公開プロファイルの設定」というところをクリックすると、設定画面が出る。.htaccessファイルは自動的に生成されるので、拡張子はhtmlのままでいいみたいだ。あとは、キャッシュを使う場合は、「設定」のところのキャッシュを使うチェックボックスにチェックを入れる。これも、かしこいことに自動的にフォルダが作成され、キャッシュされるようだ。ググったサイトの情報では、キャッシュの時間は短いらしい。

mt5_02.gif

というわけで、ダイナミックパブリッシングに変えたのだが、スクリプトエラーには効果はなかった。うー、残念。

で、さらにいろいろ試行錯誤した。3つあるブログのうち、1つはスクリプトエラーが出ない。その事実を手がかりに、どこが違うのかを検討した結果、ブログを入れる階層が深いとエラーが出ることが判明した。ドメインの下にblog/というフォルダをつくってそこにブログ入れていたが、それをやめてサブドメインにしたら、改善された。

XREAをご利用の方はお試しあれ。

]]> MovableType にソーシャルボタンをつける。 tag:ez.ws27.com,2012://2.349 2012-02-11T08:15:39Z 2012-03-05T01:50:56Z 最近はどこのブログを見ても、ソーシャルボタンがついている。けっこうたくさんツイ... kj

最近はどこのブログを見ても、ソーシャルボタンがついている。

けっこうたくさんツイートされていたりしておどろくこともある。

私のブログの場合、ツイートする人はたぶんいないと思うが、ないよりもあったほうがいいのでソーシャルボタンをつけることにした。

リンク1
リンク2

socialbutton1.gif

書いてある通りに貼るだけである。MovableTypeの場合、モジュールをまずつくり、「ブログ記事の詳細」というところにそのモジュールをインクルードで貼る。

エバーノートのボタンも紹介されていたが、つけなかった。普及率が低いと勝手に判断した（すみません）。

貼ってみると、ブログの表示が遅くなる。JavaScriptはフッターのほうに移動させたほうがいいのかもしれない（変則的だが、文中に入れた）。


]]> 1億人のバレンタインプロジェクト。 tag:ez.ws27.com,2012://2.327 2012-02-06T06:21:16Z 2012-02-06T06:26:27Z 1億人のバレンタインプロジェクト毎年バレンタインの時期に、世界の子どもたちへ... kj valentine01.jpg

1億人のバレンタインプロジェクト
毎年バレンタインの時期に、世界の子どもたちへ愛をプレゼントできたら、
世界はもっと幸せになるはずです。

バレンタインデーのひとつの選択としておすすめですね。

]]> 「マッサなび」のユーザー登録画面をカスタマイズ。 tag:ez.ws27.com,2011://2.308 2011-12-18T07:49:35Z 2011-12-18T07:53:24Z ワードプレスの機能によって表示させるユーザー登録画面とログイン画面をカスタマイ... kj

ワードプレスの機能によって表示させるユーザー登録画面とログイン画面をカスタマイズした。

まず、登録画面に出てくるワードプレスのロゴを自分のロゴに変更する必要がある。その方法は、いろんなサイトで紹介されているが、ファンクションphpに書きこむことらしい。で、以下のサイトに記述例がのっている。

http://www.doya-doya.com/word-press/2011/08/19/7785

ロゴはバックグラウンドで表示されているので、大きさは大きすぎなければOK。

massanavi02.gif
あと、「このブログに登録」という文言が自動的に出るが、これを「このサイトに登録」に変更したいと思った。これは、ググッてみると方法が書いてあるが、けっこうややこしい。Languageフォルダーの中にjp.po というファイルがある。この中に英語から日本語に翻訳した文がリストアップされている。そこで当該の文章をみつけ、修正する。さらにそのファイルをjp.moというファイルに変換する。変換にはそのためのソフトが必要だ。

以下のサイトに書いてあるURLからダウンロードして、変換して、アップする。これでOK。

http://hsuzuki.ddo.jp/weblog/92

他には、登録画面そのものを別のURLでつくってしまうという方法もあるが、今回は採用しなかった。

あとは、ユーザー権限を編集する必要がある。

]]> マッサージ店ポータルサイト、ほぼできた。 tag:ez.ws27.com,2011://2.307 2011-12-16T15:29:29Z 2011-12-16T15:37:31Z ワードプレスでここのところ、ずっと制作していたポータルサイトがほぼできました。... kj

massanavi01.gif

ワードプレスでここのところ、ずっと制作していたポータルサイトがほぼできました。「マッサなび」マッサージ店ポータルです。

2カ月もかかってしまった。けっこう難産でした。まだ、ユーザー登録はできないですが、ほぼ機能はつけました。ワードプレスでポータルサイトをつくるのは、思った以上にたいへんですね。

いちおう登録店には無料コースと有料コースがあります。有料コースはリッチに情報をのせられるようにしています。無料コースは簡潔にね。

このポータルは、他分野にも応用できますから、一般に販売したいと思います。ぼちぼちマイペースでやって、2カ月もかかりましたが、正味1カ月ぐらいはかかるので、40万円ぐらいでしょうか。

ご相談ください。

]]> GOSENスタッフによるソフトテニス日本代表帯同レポート tag:ez.ws27.com,2011://2.306 2011-12-07T06:35:34Z 2011-12-07T06:42:45Z 日本代表チーム・唯一のオフィシャルストリンガーGOSENスタッフによるソフトテニ... kj gosen01.jpg

日本代表チーム・唯一のオフィシャルストリンガー
GOSENスタッフによるソフトテニス日本代表帯同レポート
※ライブドアブログ

●関連記事
⇒ ライブドアブログのカスタマイズで、保存できないとき。
⇒ ライブドアブログのフルカスタマイズ作業。


]]> スカイプのアカントを取った。 tag:ez.ws27.com,2011://2.305 2011-12-02T06:26:24Z 2011-12-02T06:28:07Z スカイプを導入する必要があったので、アカウントを取った。サイトの説明をみると、ス... kj
アカウントの取り方は簡単。2?3分で取れる。

で、ソフトをダウンロードすればOK。

ただ、実際には使っていない。電話がかかってきたらどうなるんだろう。

普通の電話みたいにベルが鳴るのだろうか？

また、相手のところにオンラインまたはオフラインの記入が出る。これは、つながっているかどうかを示してるのかな？

いずれにしても、使ってみないと詳細は不明。

skype01.gif

skype02.jpg


]]> ライブドアブログのカスタマイズで、保存できないとき。 tag:ez.ws27.com,2011://2.304 2011-11-30T05:41:11Z 2011-12-02T06:31:58Z ライブドアブログのカスタマイズのお仕事があった。デザインが決まると、次にそのデザ... kj

ライブドアブログのカスタマイズのお仕事があった。

デザインが決まると、次にそのデザインをブログのなかに適用する作業がある。ライブドアブログの管理画面からおこなう。その作業をしていたのだが、何度ファイルを書き換えても保存できないというトラブルに遭遇した。こ、こ、こ、困った。

２時間ぐらい悪戦苦闘したのだが、いくらやってもラチがあかなかった。で、対策がないのか、いろいろネット検索してみたのだが、それでもわからなかった。しかたがないので、さらに考えて、ふと思いついたのが、ブラウザが悪いという可能性である。私はIEの8を使っているのだが、IE8では作業できないという可能性があるのではないかと思った。楽天市場もブラウザによっては作業できないからである。

で、FIREFOXで作業してみた。すると、当たり前のようにうまく保存できるではないか。なんじゃ、こりゃ。

とうわけで、ライブドアブログのカスタマイズ作業にはIE8を使わないようにしましょう。

同じ悩みで困っている方、参考にしてみて。

●関連記事
⇒ ライブドアブログのフルカスタマイズ作業。

]]> 最近のお気に入り。 tag:ez.ws27.com,2011://2.303 2011-11-27T04:02:43Z 2011-12-07T06:45:44Z これ、いいわ。ほんと。 エピックに削除されるかもしれないけど、とりあえず貼っとこ... kj
エピックに削除されるかもしれないけど、とりあえず貼っとこ。



●おまけ
「第５３回日本レコード大賞」の審査会が１８日、東京・赤坂のＴＢＳで行われ、 優秀作品賞、新人賞など各賞が選出された。
大賞の最終候補となる優秀作品賞はいきものがかりの「笑ってたいんだ」、 ＡＫＢ４８の「フライングゲット」など１０曲が選ばれた。
今年のレコード大賞、もしかして取るかも。
]]> アイキャッチ画像の登録機能を使う。 tag:ez.ws27.com,2011://2.301 2011-11-21T13:30:36Z 2011-11-21T13:34:55Z アイキャッチ画像をアップできないというトラブルが、前回のエントリーに書いたよう... kj

アイキャッチ画像をアップできないというトラブルが、前回のエントリーに書いたように解決したので、アイキャッチ画像の機能を使うことにした。

アイキャッチ画像は英語ではサムネイルと書いてある。サムネイルは爪のように小さい画像であるが、大きい画像も使用できる。ワードプレスのデフォルトのテンプレートTwentyElevenでは大きな画像を使っている。

もし、ワードプレスのデフォルトのテンプレートTwentyElevenを書き直して使っていると（私のケースだが）、画像サイズが1000ピクセル以上でなければアップできないというフィルターがかかっている。TwentyElevenでは、タイトルの大きな画像にアイキャッチ画像を使用しており、そのサイズが必要なのだ。

したがって、大きな画像が不要の人は、Function.phpからその部分を削除する必要がある。わりと最初のほうに書いてあるので、削除した。

ワードプレスでは、画像をアップしたあと登録したとき、自動的に切り出しをおこなってくれる。これもFuncton.phpに記述する。その際、もうひとつ、あるいは2つのサイズを設定できる。つまり、3種類のサイズに自動的にリサイズしてくれる。たとえば、小さいものを表紙に、中くらいのものをカテゴリーページに、大きい画像を個別投稿ページに、といった具合に使い分けできる。

私の場合、表紙とカテゴリーページに、小さな画像を使い、投稿ページに大きな画像をのせることにした。

画像を登録するときは、下記のように「アイキャッチ画像として使用」のリンクをクリックするのを忘れずに。私は、最初これをしなかったので、表示されなかった。トホホ

eyecatch01.gif

]]> Xreaで、ワードプレスのアイキャッチ画像がアップできない件。 tag:ez.ws27.com,2011://2.300 2011-11-19T13:11:09Z 2011-11-19T13:19:16Z ワードプレス3のすぐれもの機能、アイキャッチ画像を使うことにした。投稿した記事... kj

ワードプレス3のすぐれもの機能、アイキャッチ画像を使うことにした。

投稿した記事の画像をサムネイルのサイズにリサイズして表紙などに並べるのに使える。また、カテゴリーの表紙のメインビジュアルの画像にすることもできる。多くのサイトでよく利用されている定番の機能である。

function.php を設定して、投稿画面から試しに画像をアップしてみたら、エラーが出てアップできない。何度やってもダメ。で、設定をいろいろ変えてやってみたがダメだった。

仕方がないので、ネット検索で調べると、Xreaのサーバーでワードプレスの画像アップができないという問題があることを発見した。解決策は下記のサイトに書いてある方法で何とか解決した。
XREA で WordPress ファイルアップロード機能を利用する
.htaccessファイルを使うものだ。書いてある通りに.htaccessファイルをつくってフォルダに入れてやってみたら、できた。記事のおかげで助かりました。

ちょっと進むとまたトラブルでなかなか進まない。ほんと1歩1歩ですね。
]]>