メールでのお問い合わせはこちら、お問い合わせフォーム
  • スタッフブログ

スタッフブログ

前の15件 1  2  3  4

新着情報管理ツール whatsnew.d 

ホームページ制作には、いくつか定番の要素があります。
その一つがトップページにある「更新情報」の表示。
ホームページは更新がありますから、その更新を告知する事が必要ですね。
更新以外でもニュース等の告知情報※を掲載する事がよくあります。

※告知情報
 サイト自身の更新は伴わない情報です。
 病院や教育施設等のサイトですと、休診や休講のお知らせが該当します。

ですが、更新のたびにトップページを書き換えるのは大変です。
弊社と保守契約されているお客様のサイトなら、私共で書き換えますが、自身で制作運営されているサイトだと面倒ですよね。
もちろん、保守契約されているお客様でも、告知情報だけなら自分で書き換えられる方が便利です。
CMSを使っているサイトならそういった機能も用意できますが、普通のサイトでは何がしかのプログラムが必要です。

昔はSSIやIFRAMEとCGIを組み合わせてページ内に動的コンテンツを組み込むなんて事もありましたが、現在ではセキュリティの観点からSSIは利用できないサーバが多いですし、PerlのCGIは一般の方には設置のハードルが高いという問題があります。

そこで、この度「新着情報管理ツール whatsnew.d」を作りました。
「更新情報」や「告知情報」を管理するツールです。

このツールはPHPを使用しているため、Perlより設置が楽です。
また、SSIを使わないので多くのサーバで利用できます。
自身のサイトに設置される場合は、商用でも無料でお使いいただけます。
詳しくは下記ページをご覧ください。

無料配布ツール
http://www.dao.jp/s-tools/


このツール、実は私自身が必要とした機能を追加しています。
それは「プレビュー機能」です。
(その代わり確認画面はありません)
実際の見え方に出来るだけ近い表示でチェックしたいと思う訳です。
いきなり稼働中のサイトに載せて、後から再編集でも良いのかもしれませんが、途中の状態を公開するのは、やはりかっこ悪いので、この機能を付けました。

ウェブサイトを作るとき、CMSというものを利用する事が良くあります。
元はブログサイトを作るために用意されたものですが、今では普通のサイトでもよく採用されています。
このCMSの代表的なものに、WordPressというものがあります。

WordPressには多くのプラグイン(機能を追加するプログラム)が作られていて、それらを活用すると会員制サイトの構築なんかも行えます。
登録した会員が投稿するようなサイトが作れるわけです。

ところが、この「会員が投稿する」という所が実は問題になったりします。
今はスマホが普及しているため、投稿をパソコンではなくスマホで行う人も多くなります。
代表的なスマホとしてiPhoneがありますが、iPhoneを縦に持って撮影した写真を投稿すると、サイトに表示された画像が横倒しになってしまうのです。
原因はiPhoneが生成する画像が「常に横長」であるため。
ところが、その投稿をiPhoneで見ると、画像は正常に見えます。
実はiPhoneが生成する画像には「Exif情報」というデジタル写真用の情報が含まれ、その中で縦横を指定しているのです。
しかし、WordPressの画像表示機能を始め、一般の画像表示機能はこのExif情報を利用しません。
そのため、画像が横倒しになってしまうのでした。

投稿者が限定されるサイトであれば、iPhone側に「画像縮小アプリ」などを入れて、縦横を正した画像に変換してから投稿してもらうといった対応※もありますが、多くの方が利用するサイトではサイト側で対応する必要があると考えました。

※個人の方が無料ブログなどに投稿する際に利用されているようです。

そこで、対策としてこの「Exif情報」を元に画像自体を書き換えるプラグインを利用する事にしました。
あるサイトで利用したのが「Image Rotation Repair」というプラグイン。
投稿時に、画像がWordPressで処理される前に縦横を正してくれます。

Image-Rotation-Repair.jpg

Exif情報を削除するという処理だと、「iPhoneで見ても横倒し」になるだけなので、このプラグインは一般の方も投稿するサイトや、業務用でも出先からスマホで写真を投稿するような使い方をするサイトでは重宝すると思います。

なお、このプラグインで処理された画像はExif情報が削除されているので、情報保全※の意味でも有用です。

※Exif情報には撮影場所などの情報が含まれている事があります。
 ランチの時に写真を撮ってアップしたら、「どこで食べたか丸わかり」なんて事も。

Google Web Designer 試す 

Google Web Designer」はHTML5のコンテンツを制作できる無料ツールです。

Flashの様なアニメーションが作れるのかと試してみました。

簡単な移動と回転ですが、ブラウザによっては回転方向が逆になっているようです。
大きい画像を小さくして動かしてみましたが、画像ファイルは小さくなっていないのでダウンロードに時間がかかります。

簡単に3D効果など作れて面白いですが、実際に業務等で使うにはまだまだかもしれません。


gwd.jpg

夏の花 紫陽花 

会社の近所で紫陽花が咲いています。

夏の季語にも使われる紫陽花。

ウィキペディアによると、

『花(萼)の色はアントシアニンという色素によるもので、アジサイにはその一種のデルフィニジンが含まれている。これに補助色素(助色素)とアルミニウムのイオンが加わると、青色の花となる。アジサイは土壌のpH(酸性度)によって花の色が変わり、一般に「酸性ならば青、アルカリ性ならば赤」になると言われている。』

環境によって色が変わるのですね。

青い花の中に1つだけ赤が咲いている紫陽花をみたりもします。

会社の近所では青い紫陽花の隣に、

アジサイ

赤い紫陽花の花が咲いていました。(日の丸構図でゴメンナイサ)

虫たちはどちらの色が好みなんだろう。

暑くて大変な夏ですが、綺麗な花を見て楽しい気分になります。

アジサイ

19日(金)はカルチャーナイトが開催され、週末に良く行く円山動物園でも「夜の動物園」が行われ21時まで夜の動物たちを観察できます。

去年の12月に生まれたホッキョクグマの赤ちゃんも大きくなっています。

楽しくプールで遊ぶ姿など涼しい時間に見に行ってはいかがでしょうか。

ホッキョクグマの双子

スマートフォンで閲覧するサイトには、スマートフォン専用サイト、メディアで見栄えの変わるレスポンシブルデザインのサイト、そしてPC用のサイトをそのまま見せる見る場合があります。

近頃はAndroidも4.0以上の機種が発売されていますが、PCサイトを閲覧するとp要素の幅が狭くなっていることがあります。

気になって調べてみるとネットで情報を見つけることができました。

解決方法としてはp要素に背景のスタイルを指定することのようです。

色を指定すると問題が出そうなので、透過の画像を指定するのが良さそうですね。

p { background-image: url( 画像のパス ); }


DAOのサイトも閲覧して確認してみました。

分かりやすいように余白に色を塗ってみました。

sp.jpgp要素だけかと思ったのですが、li要素でも同じような現象がありました。

解決方法は同じだったので助かりました。

ちなみに画面のキャプチャーはAndroid 4.0*の機種で、「電源ボタン+ボリューム下げ」の長押しです。


昨今のHTML5の普及で色んなものをWebに載せられるようになっています。

今回はゲーム関係を見てみましょう。

enchant.js
enchant.png
以前もフラッシュを使ったWebゲームというものはありましたが、iPhoneの普及でフラッシュを使わない方法が模索されています。(iPhone/iPadなどのIOS機器はフラッシュを公式サポートしません)
そんな中昨年より話題となっているのが「enchant.js」です。
Webブラウザの標準機能だけで、以前は難しかったアクション・シューティングゲームなどの反射神経を要するゲームが作れます。
この標準機能だけというのが重要で、今のWebの世界はパソコンだけをターゲットとしているわけではなく、スマートフォンもサポートするのが常識になりつつあります。
元はゲームクリエーターを目指す若者のためのプラットフォームとして登場したようですが、結構高機能です。
PhoneGap と組み合わせてスマートフォンのアプリを作る人もいるようです。


ノベルスフィア
こちらはサウンドノベルのweb版という位置付けで、サウンドノベルの制作に必要な機能・環境が一通り揃っています。
やはり独自プラグインやフラッシュなどは必要としないものです。
ユーザー入力関係が多少弱いので、選択肢の多いアドベンチャーゲームには余り向かないかもしれませんが、まだ立ち上がったばかりなので、今後の発展が楽しみです。


とりあえず2つばかりご紹介しましたが、ここで重要なのはWebを利用する=公開プラットフォームが用意されているという所ですね。
昔のパッケージゲームのように流通や在庫を必要としないので、
「内容をよく理解しない営業が、ゲーム音痴なおもちゃ問屋の親父にピントのずれた売り込みをして、受注量が残念なことに...」
みたいなこともありません。
(品切れ店が多く、いつまで待っても安くならず、中古価格も高額な幻の良作と言われるものですね。その逆に売り込みが行き過ぎて受注量過剰になると、発売直後から値崩れして速攻でワゴンセール行き。これはこれで次回作を取ってもらえないので問題です。昔のROMカセットのゲームではよくあった話です。)

ユーザーにどれだけ受け入れられているかも、より正確に情報を取得できるでしょう。
力の無い中小メーカーでも活躍できる土壌として有望かもしれませんね。
今のところ課金や広告の仕組みが無いので、企業が利用する場合技術的挑戦・アピールや体験版制作などに用途が限定されているようです。

技術的にはゲーム用に特化した要素が多く追加されていますが、ウチのようなHP制作業者にとっては親和性が高いプラットフォームですので、適切なビジネスモデルが出来れば(収益を上げる仕組みが用意されれば)、注目に値すると言えるかもしれません。

IEでMT4のFCKeditorを表示 

MT4にFCKeditorを入れて使っていたのですが、IE9でフォーマットを「リッチテキスト」に変更してもFCKeditorのアイコンなどが表示されなくなってしまいました。
Firefoxばかり使っていると気が付かないことが色々とあります。

対応をしらべてきると「F12」キーで「開発者ツール」を出して、ブラウザモードをIE7にすれば一時的に表示されFCKeditorを使うことができました。

これでは一時的な回避なので、さらに調べてみると

"<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />"

をコードに挿入すれば良いと分かった。

編集画面のテンプレートを探してみると

/インストールフォルダ/tmpl/cms/include/header.tmpl

にあったので、タグを挿入してアップしてみるとFCKeditorが表示されたので解決しました。


mt4_fckeditor.jpg

円山動物園で平成24年12月8日に生まれたホッキョクグマの双子の赤ちゃんが22日に一般公開されました。

早速、週末に円山動物園へ行って可愛いコグマたちを見てきました。

母親のララと遊んだり、2頭で走り回ったりと可愛い姿を見ることができます。

天気も良かったのでお客さんもたくさん来ていたようです。

001.jpg

002.jpg

写真のコグマは可愛いですが、実際に近くで見るともっと可愛いので小さいうちに見に行ってみると良いと思います。

勤続10周年記念!! 

3月20日にディーエーオーで働き始めて10年になります。

何年務めたかは意識していませんでしたが、気が付けば10年の時間が過ぎていました。

たくさんのお客様とWEBサイトに出会えて感謝の10年です。


そんな10周年に会社から嬉しいプレゼントを頂きました!


『iPad』です!

IMG_1923.jpg

思わぬプレゼントに感謝です!


apple製品はiPodや古いiBookしか持っていませんでしが、これでまたappleが気になる日々になっていきそうです。

これからもディーエーオーでWEBサイトを作って行きたいと思いますので、よろしくお願いいたします。

調べものをしていて商品やサービスのサイトを閲覧することは日常の行動です。
たまたま閲覧したサイトの広告が、その後に閲覧するサイトの広告枠にいつも表示されてしまう。

ユーザの行動から興味のありそうな商品やサービスの情報を広告で表示しているのですが、興味のない内容である場合もあり、同じ広告ばかりで見たくなくなります。

そんな『行動ターゲティング広告』を無効にしてみます。

Google Adsense の場合は Ads Preferences Manager で設定できるようです。
画面上の「オプトアウト」をクリックして無効にするだけです。簡単ですね。

Ads_Preferences_Manager.jpg

Yahooの場合  行動ターゲティング広告の無効化について  のページから「無効化」をクリックして無効にしてます。

yahoo_20130227.jpg

興味の無い、または無くなった広告を見続けるのは苦になります。

ウェブサイトの制作で「Google Map」を使うときは、会社などの所在地を表す地図として使うことが多いのですが、時にお客様から地図情報を使ったコンテンツ制作の依頼があります。

ある地域上の一定面積を矩形で表したメッシュ画像があるが、メッシュ画像だけでは矩形の場所が地域のどこなのか分からない、そこでメッシュを地図の上に重ねて表示できるかどうか。

透過のPNG画像を重ねて表示することを提案しがた、地図の緯度経度にあった画像の生成が難しいので緯度経度の座標からメッシュの矩形を生成して表示できないかとの返事。

Google Map 上に線や矩形を描画したサンプルを見たことがある。

Google Developers のサイトを見れば画像を重ねたり、線や多角形などを描画するサンプルが掲載されています。

そんなサンプルを元に会社の位置を中心に50mmメッシュを作ってみました。

mesh.jpg矩形の塗りつぶしには、透明度の指定もできるので透かして地図のどこに矩形があるか分かるようになります。

この様な制作作業があったり、緯度経度を取得する地図や「Google Earth」を使い宇宙からの視点をスタートして、地球上の特定の地点を表示したりするページも作りました。
会社の所在地を表すだけではなく、ちょっと違った使いかたのコンテンツを作ることは制作の刺激になります。

守成クラブ札幌北会場の2月例会に参加して来ました。

今回も新規参加の方がたくさんいて、すごい熱気でした。

インフルエンザが流行っていて、参加できない方もいたみたいですが、

そんなの感じさせない会場の盛り上がりぶりでした。

shusei201302.jpg



私(佐藤)は例会のみで切り上げましたが、みなさんはその後の懇親会も出た様子です。

会場が、大通公園にとても近かったので、帰りに雪まつりを見て帰ってきました。

そこで見たアウディのプロジェクションマッピングが素晴らしかったので、iPhoneで撮影してアップしました。



最近の技術革新はすごいですね。

雪まつりもバージョン2.0という感じです。

どこの世界も、時代の変化を捉えて新しいものを取り入れていかないといけません。


ところで、守成クラブにおいては、私はまだ準会員なので、どなたか入りたい方がいればご紹介します。

私の方に声をかけてください!

動画の重要性について 

最近、ホームページでも動画の重要性が言われるようになります。

実際に、Youtubeは、1日あたり40億ページビューを超えるそうです。

それだけ動画が見られているということですね。

こちらは、以前にイベント用に作ったディーエーオーのプロモーション動画です。



今後はもう少しきちんとしたものを作っていこうと考えております。

長い文章を読まされるよりは、面白い映像で見たほうが、説得力がありますからね。

最近は、デジタル機器の発達で比較的安価でもかなり質の高い映像や音楽を作れるような時代になっています。

これから弊社でも撮影から、編集までの動画のサービスを作って提供していこうかと考えております。

紹介できるようになったらホームページにアップいたします。

前の15件 1  2  3  4