Home > Web関係

07月26日 

Web関係

ドットコーダーセッション2で喋ってきました

生きてますよw

この放置っぷり…スイマセン…orz

最近はネイティブなiPadアプリにも手を出したりしてて、もうちょっとしたらお見せできるかと思います。

そんな近況ですが、この頃なにかと顔を出してるドットコーダーのゆるふわ会に行って喋ってきました。今回のテーマはjQuery。基礎的な所は他の人が話すので、応用的な内容で喋って欲しい、と。
こういう喋る内容ってターゲット層にバラつきがあるので、どこら辺にターゲットを置いて内容を決めるのかが難しいところではあるのですが…

まーボチボチjQueryのメソッドをちょいと使った感じで且つJavascriptのTips的なことも盛り込める「画像切り替えスライダー」を作ることをテーマにしてみました。というのも、先日のコーディング案件で作ったばかりだったんで…(ちゃんと受注元にも許可を貰いましたよw)
実際に使用されている物の方が参考にもなりません?

ちょっと他のプレゼンターがゆるふわな雰囲気だったので、一人お堅い感じで進めてしまいましたが…何かの参考になったりモチベーションの向上の一助になれたとしたら発表者冥利に尽きます。不手際とかお叱りの言葉もありましたら真摯に受け止めたいと思います。。。
少しずつ発表には慣れてきましたが、いやー喉がカラカラでひっつく感じでしたよ。まだまだ緊張しながらの発表です。

もうちょっと全体的な雰囲気とか感じ取りながら話せるようにならねば、といった感じです。

しかしjQueryっていつになっても人気の話題ですねぇ。

04月22日 

Wordpress

Wordpressでページ内に記事一覧サムネイル

久しぶりのWordpressネタです。
次のVer.3からはマルチブログにも対応するなど、このところ進み具合が半端無い感じのWPですが(アップグレードでコケるところ多そうだなぁ…)。

ページ内で記事の一覧とそのサムネイル画像を表示させたい、という要求は往々にしてあると思うのですが、それをなんとか使用者にも使いやすい形で実装できないものか…と。

最初に考えたのはカスタムフィールドを使用して、アップロードしたファイルのURLを入れてもらう。。。は手間が増えるし、おそらくイマイチ分かりにくい操作だなぁ。。。と。
記事内の最初に出てくる画像を正規表現で取得して…矩形のサムネイルだと良いけど、中・大の画像サイズとファイル名が不明…
Ver 2.9から実装されているthe_post_thumbnail()はなにも表示されない…

ということで実装したのがこちら、

PHP:
  1. $posts = get_posts('numberposts=5&category=3');
  2. foreach($posts as $post) {
  3.     setup_postdata($post);
  4.    
  5.     $dat = get_posts('post_type=attachment&orderby=menu_order&order=ASC&numberposts=1&post_parent='.get_the_ID());
  6.     if (count($dat)> 0) {
  7.         $image = wp_get_attachment_image_src($dat[0]->ID);
  8.         $desc = '<img src="'.$image[0].'" width="'.$image[1].'" height="'.$image[2].'" alt="" />';
  9.     }
  10.  
  11.     // 記事出力
  12.     echo $desc;
  13. }

get_posts()にパラメータ「post_type=attachment」を指定すると、「post_parent」に与えた記事IDに紐付いているデータを取得できます。その他のパラメータは並び順の先頭にある1件のみを取得する指定です。ギャラリーダイアログで1番上に指定している物を取得する仕様にしました。
配列にはそれぞれファイルURL・幅・高さが入っています。

お客さんにはサムネイルに表示したい画像をアップロード、1番上に移動してもらうだけ。記事内にその画像を表示させたくなければ挿入しなければ良いだけで、ギャラリーの1番上にある画像が自動的に表示されるのは分かりやすいかな?と(サムネイルは表示させたくないけど、記事中に何か画像を表示したい、という希望には添えませんが…orz)。

次のネタは「ページ内で記事を表示させたい。そしてページングも表示させたい」です。ネタは小出しでw

12月14日 

Web関係

URLにハッシュを指定してページ内リンクしたときにレイアウトが崩れる件について

URLの末尾に

fuga.html#hoge

とかして、ページ内のアンカー位置に表示を移動させたいときってありますよね。

HTML:
  1. <a href="#hoge">ほげ</a>

とかしても同じ動きですけど。

そうすると、なぜかボックスが上にずれてしまう、という現象がありましたので、その解決法を一日うんうん言いながら探してました。
ググっても全然出てこないしさ…orz
続きを読む »

08月04日 

Wordpress

Wordpressで記事に投稿した画像一覧をProgression用のXMLで出力

ラーメン屋のネタを華麗にスルーしつつ、タイトルの長すぎるエントリーです。
しかも解説無しという暴挙!読者をなんだと思ってるんだ!

Wordpressで記事に投稿した画像一覧をProgression用のXMLで出力するためのテンプレートです。
(元ネタはこちらを参考にさせて頂きました。深謝)

PHP:
  1. <?php /*
  2. Template Name: scenedataXML
  3. */ ?>
  4. <?php header('Content-Type: text/xml; charset='.get_option('blog_charset'), true); ?>
  5. <?php echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>'; ?>
  6. <?php echo '<prml version="2.0.0" type="text/prml">'; ?>
  7.  
  8. <?php query_posts("order=DESC"); ?>
  9. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  10. <?php
  11.     $d = the_date('Y-m-d', '', '', '', false);
  12.     $attachments = get_children(array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image'));
  13.     if ( is_array($attachments) ){
  14.         foreach ($attachments as $key => $row) {
  15.             $mo[$key]  = $row->menu_order;
  16.             $aid[$key] = $row->ID;
  17.         }
  18.         array_multisort($mo, SORT_ASC,$aid,SORT_DESC,$attachments);
  19.         foreach ($attachments as $row => $data) {
  20.             preg_match('/src="(.*?)"(.*?)title="(.*?)"/ie', wp_get_attachment_image($data->ID, 'thumbnail'), $thumb);
  21.             preg_match('/src="(.*?)"(.*?)title="(.*?)"/ie', wp_get_attachment_image($data->ID, 'full'), $image);
  22. ?>
  23. <scene name="<?php echo the_title(); ?>" cls="myproject.scenes.ImageScene" title="<?php echo $image[3]." | ";the_title(); ?>">
  24. <num><?php echo $image[3]; ?></num>
  25. <cap><?php echo $image[3]; ?></cap>
  26. <thumb><?php echo $thumb[1]; ?></thumb>
  27. <path><?php  echo $image[1]; ?></path>
  28. <date><?php echo $d; ?></date>
  29. <category><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name;} ?></category>
  30. </scene>
  31. <?php
  32.         }
  33.     }
  34. ?>
  35. <?php endwhile; endif; ?>

Progressionはプログラミングの知識がなくても柔軟且つ簡単ににフルフラッシュサイトを作れる工夫が成されてる割に、細かいことをやろうとしたら意外に奥が深いフレームワークです。ちょっと世界観の把握に苦労した。

あとはこの出力されたXMLをProgressionで読んで、Papervision3Dと絡めて…

という実験的勉強を、クライアントからの連絡をずーっと待ちながらイヂけつつやっている梅雨が明けたある暑い夏の日。

08月02日 

Web関係

雑談

今日はリクリビアガーデン大会

関西のWeb系の人が集まって、夏と言えばビアガーデン大会に行ってきました。
ビアガーデンにしてはそこそこ料理もボチボチな駅前第3ビルの「神仙閣」。ここは友人が一夏バイトしていたのが縁で訪れ、たまに行ってるところです。

0801いやービアガーデンって感じですね~
天気も心配されたんですが、会場に居る間は降られず。ビルから出た直後にパラパラとし始めました。参加者の日頃の行いがよっぽど良かったんでしょうなぁ(敢えて自分とは言わない)。

0801_1なぜか皿の上にあるホタルイカの佃煮。
想像してた味+ホタルイカの底力的な感じで美味かったッス。ホタルイカ万歳。富山万歳。
お土産、ありがとうございましたm(_ _)m

来週は淀川の花火大会だったりしますが、週明けからバシバシと忙しくなる予定です。
リフレッシュしたし、頑張るでー!

んで、8月中に服部緑地公園でBBQします?
食材やらの準備は出来ますが、BBQコンロの手配や、一番の問題の人集めなどなど、目処が立てば開催したいな~と思うこの頃であります。

07月29日 

Web関係

8/1 リクリビアガーデン大会

すでに日がありませんが…(汗)

8/1の19時から梅田でリクリのビアガーデン大会が開催されます。
大会なので頑張るしかありません(何を?)

今回も濃いメンツが揃っております。
参加は下記アドレスのmixiからどうぞ~
http://mixi.jp/view_event.pl?id=44588746&comm_id=1994993

金曜はキックオフお食事会、来週末は淀川花火大会と、なにげに忙しい感じでございます。例によって「お盆までに」納品のお仕事などもあったりするので、8月もなんだかバタバタし始めてますYo!

07月13日 

Web関係

Webの勉強用に本を買ってみた

嫁が産休に入ったのをいいことに、仕事を手伝ってもらおうと悪巧みしている駄目な旦那です。

最初は某Webディレクター本を与えていたのですが、内容が難しすぎる(そして役に立ちそうにない)ので、新しく偶然本屋で見つけた「Web制作新人育成ガイド」という本を買ってみました。

適度に挿絵が入っていたり、基本的な事などをサラっと書いてあるので読みやすいです。
読みながら「TCP/IPとか懐かし~」とクスリと笑う嫁は流石です。

が、さらりと書きすぎる面もあって、PHP・JavaやJavascript(Ajax)・Flashの区別や意味が分からなかったようです。が、それも身振り手振りで教えると、キチンと理解できてしまうあたりが逆に怖い。プログラムで負ける気はしないけど、それ以外では速攻追い抜かれてしまいそうです。。。

もう1冊がAndroidの開発本。「Google Androidアプリケーション開発入門」。
先日、妙に時間が空いてしまった時に「折角iPhoneとmac miniがうちに有るんだし、iPhoneアプリ開発しちゃえ」と思って本屋に駆け込んだのですが、やはり先々を見越して「やっぱり今のうちにAndroid勉強しとくか」ということに。

そしてAmazonで評価の高かったのがこの本、という訳です。

ちょっと個人的には「サンプルを作り上げていきましょう」的な流れでコードがずらーっと掲載されているスタイルは好きではないのですが、センサー周りの事なども記載されているので有用かと思います。
順次読み解いていこうと思ってます。

が、手元に実機が無いのが痛い。。。
docomoは先日発売が開始されたそうですが…auユーザーの自分としては、早くソニーのAndroid携帯がリリースされるのを待つのみです。(というかAndroid携帯もパケ放題必須だよな…やべぇ。iPhone早まった…orz)

07月10日 

Web関係

一人歩きのSEO

お客さんの所に行って話をすると必ず出てくる言葉。

「SEO対策はしていただけますか?」

答える時は

「サイトの中でやれることはやりますよ」

うちはテーブルでのレイアウトはお断りしていて、基本的にXHTML1.0 Strictで組むし、文書の再構造化も行い適切なマークアップをするようにしているので、デフォルトで検索エンジンのロボットに親和なサイトになっている(と思ってる)。

「Web標準」という言葉が持て囃され、同時にSEOという言葉が一人歩きし始めた頃、SEO対策といえばテーブルレイアウトの構造を(X)HTMLとCSSで組み直すことと同意で、制作会社の口車に乗せられサイトを更新した経験のあるクライアントは多いことだろう。ま、それはそれで全然悪くない。当時は凄いことのように言われてたことが、今や業界では当然の事になってるし対応できない制作は白い目で見られる(実際にまだ存在するし!)。
自分の言う「サイトの中でやれることはやりますよ」というのは、言うなれば「最初からSEOされたページを作ってますよ」程度なのだ。
言葉的には間違ってない(と思ってる)。「Search Engine Optimization」なのだから(もちろん、最近のSEOに有効とされてるページ構成は取り入れますが)。

じゃ、これで検索サイトの上位にバンバン表示されるようになるんですね?というのがクライアントの考え。

いやいや。

「どんなキーワードで検索に引っかかりたいですか?」と質問してみる。

「○○、××、格安」

格安って言葉、サイトの中に1回も出てきませんよ?サイトの中に検索で当たって欲しい言葉が出てきてないのに、検索上位に出てくる事なんて無理っぽくないですか?さらに「○○」なんて競合他社も狙ってるキーワードですよね?大変ですよ?

(ここで暗躍するのが、衛星みたいなサイトを作りまくって被リンク数を稼ぎ、ページランクを上げて対応するSEO屋。が今回はその話パス)

ここから大事になってくるのが「SEM(Search Engine Marketing)」。
検索エンジンを考えたマーケティング。というかコレが一番大事。

  • ターゲット層に対するキーワードの策定
  • 1つのキーワードに対して、一緒に検索されるキーワードは何か?
  • 組み合わせのキーワードがサイトに対して有益な物はどれか?

そのキーワードを含めた上で、サイト内の文章をライティングしていくことが必要となる。カタログに載っている文章では難しいことも多いので、検索エンジンに対応した文章にリライトしないといけない場合も(実際、それが出来るライターは人気です)。
その出来上がった文章に適切なマークアップを施すことで、検索エンジンにも親和で、見に来たユーザーも見やすいページ作り。
必要であればランディングページ(検索サイトから飛んで来やすいページ)の提案もあるし、さらには別サイトとしての独立、なんて提案も出来るかも。

そういった施策、対応を行っていって初めて検索結果の上位に表示されるようになってくるんです。

さ、これで検索上位に表示されるようになりました。

ところがどっこい。

すでに競合が多いキーワードだと、既に上位に来ているサイトを押さえ込んで自分のサイトを持ってくることは大変です。資本があってサイトにお金を掛けられるところには太刀打ちできないですよね?やはり現在上位に来ているということは実績がある故ですから。

ここまでの話は、一般的にSEO・SEM対策として実施される基本的な内容です。

そこで一旦話を戻して考えて欲しいのが、キーワードの選定や文章を考える時に、地域だったり自身の強みをもっと前面に押し出してみる、ということ。
美容院」で検索されて上位に来なくても「摂津富田 美容院」で上位に来ることの方が、実際にお客さんとして来店してくれそうな人に対しては重要ですよね?「彦根 動物病院」より「彦根 動物 急患」で上位に来る方が、お客さんにとって(も)有益ですよね?

  • 実際のお客さんになってくれる層・地域などに絞って考える
  • 検索で表示されて、見に来たお客さんが有益だと思える内容にする

この点をしっかり考えた上で、キーワードの選定やライティングを行っていくことで、大手やポータルサイトが奪い合う検索キーワードから離れ、実際のお客さん候補を的確に誘導して有益なサイトとしていく種があるのだと考えています(これも基本と言えば基本なのですが…)。

どうです?海のものとも山のものともつかぬ「SEO」という言葉も、結局は当然当たり前の事を考えて作っていくことに過ぎないんです。何かについて知りたいと検索したターゲットとなるユーザーをしっかり捕まえ、実際に閲覧された時に「このサイトは自分にとって有益だ」と思わせること。そこで初めて広告であるサイトからお客さんが獲得できた、ということに繋がっていくのだと思います。

もちろん自分はWeb業界の人間なので、クライアントの業界については全くのシロウトです。なので自分一人ではサイトを作ることが出来ません。教えていただかないといけないことも数多くあります。クライアント側と制作側が一緒に1つのサイトを作っているんだ、という気持ちを共有出来れば、もっともっと良いサイトが作れると思います(なんだか最後は精神論的な話になっちゃいましたね。。。)。

その他、検索上位に来やすくなるように、という点も含めて提案している「ブログシステムを統合したサイト作り」という話もありますが、それはまた次の機会に。。。

06月09日 

Web関係

WebSig会議の中継を見る会 in 心斎橋

WebSigという東京で開かれてるWeb系のワークショップを中継で大阪で見よう、という企画に参加してきました。

第1部はスピーカーの方のお話を聞いて、第2部はそれについてのディスカッション、という流れです。

今回のテーマは「ストレスフリーのWebプロジェクト ~Web担当者に出来ること、制作会社に望むこと~」ということで、発注者と受注者それぞれの立場から見た経験や失敗に基づいて、ともすればチグハグになってしまいがちな気持ちや考え、トラブルをどうやってイイ感じに進めることが出来るのか?という内容。

会場でスピーカーの話を聞いてる状況だと話を聞くのに集中するんだけど、中継ということもあり合間合間で意見を述べたり人の考えを聞けたり、ただ聞くよりもさらに内容が濃くなった印象です。
話の中で、実際にあったプロジェクト失敗談の披露は笑える事もあり、参考になる点もあり。
常に制作者である自分として、発注者の気持ちや考え方は参考になる点が多かったです。

第2部は第1部の内容を踏まえて、どういう心持ちであれば2者間のギャップを埋めることが出来るのか、それぞれ格言で考えることで解決してみよう、といった内容のグループディスカッション。
大阪での初中継、ということで参加メンバーがいつもの顔ぶれなので、忌憚なく(とはいえ、相手の意見は否定しない、というのが前提)議論することが出来ました。

photo最後に各自で明日から心に抱く格言を付箋に記す、ということで自分の格言は「ホームページは制作者・発注者、一緒に作ってるんですよ」ということ(他にも一杯イイ格言が!)。
ともすれば制作側として「ホームページのプロとしてやってるんだから、こっちの意見を聞いておけばいいんだよ」といった態度に、発注側として「プロに任せておけばいいんだから、最初にやりたいことを伝えて後はお任せ」といったそれぞれの状況に陥りやすい。自分の経験として。

そういう状況で腐るんじゃなくて、「一緒に作ってるんだ」という意識を強く持つことで、「相手の立場・考え方」をしっかり認識して、発注者の意見に脊髄反射で沸騰することなく「なぜそういう意見が出てきたのか」という流れや背景を考えた上で対応できるようになるのではないかな?と。
もちろん制作者側だけで持つより発注者もその意識を共有してらえるために、スタート段階から雰囲気を作っていけるよう意識しようと心がけました。

ワークショップという、テーマについて議論して意見を出し合い理解を深める、といった場は初の参加でしたが、正直「ここまで良いものだとは!」という気持ちで主催者に感謝感謝です。今回は既に顔見知ったメンバーで、WebSigという東京で既に確立しているワークショップがベースでしたが、もっと多くの人たちや、可能であれば大阪発信でこういうイベントが開催できたら、と思うばかりです(リクリ?w)

(写真のモザイク?ナイショw)

04月28日 

concrete5

concrete5 ページごとのCSSを適用する一案

今回もconcrete5ネタです。
日本語の資料が無いので英語を漁る日々ですわ。導入コストは依然として高いなぁ。。。

さてさて、ページごとに独自のページごとにCSSを切り替えたい、という要望は多々あるはず(少なくとも自分には必須項目)。ページごとにページタイプを作ってテンプレートを作る、なんてナンセンスなので、何とかお手軽に導入できないものか…

そこで利用するのが「ページ属性」。デフォルトでも「Metaタグタイトル」「Metaタグ説明」「Metaタグキーワード」など、“ページごと“に独自の値を設定できるように用意されたオプションですね。管理画面の「ページとテーマ」メニューから、「ページタイプ」の下に設定があります。
続きを読む »

次の記事 »