2016年10月08日

ブログデザイン変更してみた

普通にこちらに書くのはかなり久しぶりですが、ブログのことなんで書いてみたでござる。

ブログのデザインってだいたいはある程度のテンプレートがあって、それを微調整しながらいじるものです。
というか、普通の人はCSSとかいじれないしね。
だから、テンプレ選択→パーツ配置→色調整→完成みたいな流れであまり手を入れないんですけどね、なんか使いづらいんです、ここ。
なので、CSSいじくってもうちょっと変えてやろうと…。
ていうか、横幅750px固定っていつの時代のブログだよっていうね。

なので、ヤフーのトップと同じ920まで横幅を広げて、右カラムの新着記事が折り返されないように修正。
残りを記事の横幅にして、文字色も見やすい黒に。
背景に画像が張ってあるので画面が崩れるから全部取っ払って、その代わりに色とラインを配置。

ずいぶん軽くてシンプルになったんじゃないかと思います。
うむ、納得。

こんな簡単ならすぐにやればよかった・・という反省。
posted by ゆうと at 18:46| Comment(0) | TrackBack(0) | NET | このブログの読者になる | 更新情報をチェックする

2016年06月15日

FacebookのOGP設定ではまった問題を解決した件

(タイトルはあの番組っぽくwww)

きっかけ

週末いろいろとデータ更新したので、FBにシェアしようとしたときのことです。
URLを入れたらふつうはサムネとページタイトル、簡単な説明文が掲載されるはずがなぜか出ない…。
どうやらOGPに何だか問題がありそうだ…ということで調べてみました。


OGPとは?

Facebookにシェアやいいねをした時に、FB側がどんな内容かを把握するためにページ内に記述する情報のことです。
同様の情報もtwitterで利用しており、それをベースに、画像を表示したりタイトルや説明文を出していたりしています。
これがちゃん出てないとただのリンクでしかなく、あまりFBやtwitterにシェアしていただいていても効果を発揮しません。


今回どうなっていたのか?

本来は、曲に紐づくサムネイルとページタイトル、曲に関する情報などが出るはずなのですが、出ていたのはドメイン名だけ…。
なんだそりゃ・・と調べていたら、どうやら出るのと出ないものがあるらしい。
CDリストは出た、アーティスト別曲一覧と曲名一覧は出た。
つまり、出ないところは曲詳細のみでした。


原因はなんだったのか

いろんなサイトを見たのですが、キャッシュがどうとか、画像がほかのページと被ってるとか・・いろんな原因と思われる内容が書かれていましたがどれも該当していませんでした。
で、出力ページのhtmlファイルをスタティックなページにしてサーバーにおいて読ませてみてもちゃんと認識され、全く問題がなさそう・・。
その時に確認していた一つのページがヒントをくれました。

「ステータスコードが正しくないと読み込まれない。」

まぁ言わずもがななんですが、よくよく見たらステータスコードが502だったのですね。
つまりBadGatewayで、どこかネットワークの途中で止められてんぞ・・と。
ただ、そういう場合の本来の原因は海外串を止めたりとかの設定をしている場合で、今回全くそういう設定はしてないんです。
で、更にそのページの最後にちらっと書いてあったことが、この一文。

「プログラムの出力について確認してみてください。」

プログラム??
ちゃんと表示できてるし、ブラウザ上でソース確認をしたのですが全くおかしなところはない、サーバーログもちゃんと出力されてて何らおかしなところはなかったのです。
もしやCGIでの出力時の見えないところになにか問題があるんじゃないか、とページのレスポンスヘッダを見てみたら・・・・
あれ?なにか変な文字が混ざってる・・。
どうやら開発時に細かく動きを検証するためにDebugコードを埋め込んでいたりするのですが、一部がそのままレスポンスヘッダ上に出力されておりました。

「なんということでしょ〜」

ということで、該当箇所を削除し確認ツールで再取得したら、いけました〜!
ブラウザは、大きな間違い以外ではちゃんと出力してくれちゃってわからないんですなぁ〜という失敗でした。


まとめ

OGPの設定方法については、別のサイトでこまごまとしてくれてますのでここでは割愛。
実際必要な内容はいくつかなので、FBのdevページで登録したりして埋め込みましょう。
ただし埋め込んだあと、そのFB側のツールで正しく判定できるかどうか定期的に確認するのを、忘れないようにしておかないといけませんな。
もちろntwitterもね。

あと、ブラウザは優秀なので、マルっとしちゃってくれてるのに気が付かず、ホントに穴でした。
画面崩れとかInternalServerErrorとかならイッパツなんですけどもねぇ。

ということで、今回は体裁もきれいにして見やすい感じで書いてみました。
posted by ゆうと at 01:50| Comment(0) | TrackBack(0) | NET | このブログの読者になる | 更新情報をチェックする

2016年05月29日

リニューアルの件

そいえば全面リニューアルして1年経つけど何も書いてなかったなと思い出して、振り返ってみるなど。
先に過去の修正時のリンクも置いておくなど。
リニューアル裏話(2010/5/16)

まずは今回の検討ポイント。
・スマホでもPCでも全く同じソースで表示するレスポンシブデザインの導入。
・レスポンシブ導入のための、htmlの軽量化とCSSの再構成。
・より強力なSEO施策。

続きを読む
posted by ゆうと at 07:47| Comment(0) | TrackBack(0) | NET | このブログの読者になる | 更新情報をチェックする

2013年09月05日

iTunesのアフィリエイトが変更

iTMSのアフィリエイトは提携先がLinkShareだったのですが
PHGという会社に10/1を持って変わってしまうようです。
というか、LinkShare自体が楽天の子会社だったなんて全く知らなかった。

新しい会社になることで色々とハードルがあがるようでめんどくさそうなので
箇条書きで書いておきましょうか。
・契約先の変更し、ID発行
・リンクの貼り直し
・報酬支払が30000円からに引き上げ

契約先の変更と銀行登録はめんどくさいですね。
スイフトコードってなんだよ…って思ったんですが
世界共通の銀行番号的なものがあるみたいなので入力。
前は100円未満でも入金があったので入金手数料のほうが高いんじゃないかとか思ってましたが
かなり現実的な金額になったのかもですね。
とはいえ、一番めんどくさいのがリンクの貼り直しでしょうね。
普通ひとつひとつリンク貼ってたりするので大変だし
そのままにしておけば単純にデッドリンクになっちゃうんだよね。
うちはがさっと変わるんでプログラムをちょこっと直せば
全部なおるからいいんだけどね。
とはいえ、毎日数十円とかしか売り上がってないので
そこまでリソース掛かったらなおさないだろうねww

まぁ、アフィリエイトってむずかしいね。
※9/14追記 最低価格が3000円ではなく30000円でした。高すぎだよね
posted by ゆうと at 00:31| Comment(0) | TrackBack(0) | NET | このブログの読者になる | 更新情報をチェックする

2010年07月03日

PCDJとDJコントローラー

最近ニコ生やってると
CDJで繋いでるのって俺とババシャツさんぐらいで
あとみんなPCDJなんですよね。

確かにそれも考えたんです。
そのほうがいろんな意味ですごい便利。
だって、音源の観点で言えば
EDITしなくてもCUE打ちすれば
CD焼かなくてもそのまま使えるしね。
音源追加もMP3作れればネット購入とかでも簡単だし
探したり持ち歩くのが大荷物じゃなくていいしね。
あと機材の観点で言えば
場所取らないしミキサーもいらないしね。

そんなこんなもあって最近ちょっと考えてたので
ちょっと現在の状況を調べてみました。
今コントローラーってすげー安いんだね。
値段は下は1万切ったのからあって上は5万以上のもあって
ピンキリですけどね
ただ、安いのと高いので大きく違うのは
ピッチコントローラーがなかったりするんです。
ただ、PCDJってBPMを合わせるのがsyncボタンで一発だったりするから
それはどうなの?って話はあるんですが
確かに聴いてる方からしたら関係ないっちゃ関係ないんですよね。

あと最大の難点としてはCUEモニタがないんですよ。
つか、CUEモニタなしでもできちゃうってのがPCDJの利点だったりもするわけで、
普通に回している人からするとそれもびっくりですよね。
ブレイクポイントさえ分かっていればいい…みたいな。


まぁね、最近はSEFのお二人もPCDJになっていたりもするんで
時代の流れなのかな…なんて思ったりもします。
ただ、USBコントローラーじゃなくてタイムコード付きのレコードだけどねw
タイムコード式のシステムだと安くても4万からだからなぁ…。

ちょっと考えてみます。
posted by ゆうと at 18:28| Comment(0) | TrackBack(0) | NET | このブログの読者になる | 更新情報をチェックする

2010年06月06日

パラマニの秘密

今年で10周年を迎えたうちのサイトですが
中の人らしくたまには裏のお話もしてみましょうか。
かなり長文ですがお暇でしたらお付き合い下さい。


うちのサイトは
CD、Videoの情報サイトとしてみなさんに利用されているんだろうな
というのはよく理解しています。
自分も始めたきっかけが
「振りを覚えたい!」というのと
この曲ってなんて曲でどこのCDとかビデオに入ってるんだろう
って思ったところですから。

今更新のメインはCDとDVDのDatabaseですがそうなった理由として
まず振付解説ページがありましたがとりあえず大変。
画を書くのが面倒だし、描いたら描いたであーだこーだ言われるし
だったらやーめた・・
ってなったわけです。
それ以外にもなんだかんだいろんなものがありましたが
結局残ったのがDatabaseだけだったわけです。


実はそんなDatabeseも当初は1枚1枚手でページを作っていたんです。
けど、そうすると何が大変って
リストページの作成がとりあえず面倒。
というわけで、早々にプログラム化しました。
とはいえ、その頃の自分がDBなんて使えるハズもないですから
テキストベースの簡易リストを自分で作り
リストファイルをCGIで読み込んで成形して表示していたわけです。
で、更新もプログラム上でタイトルをつっこんでいくだけで
新しいリストが作れるようになりました。
途中、リストをまとめてガサっと入れられる簡単な方法を作り
かなりのスピードアップを出来るようになったり
外部のダウンロードURLなどの情報を追加できるようにしたりと
細かい追加変更などはたくさんありますが
このテキストリストの方式は10年間今も変わりません。

さてリストのプログラム化ができたので
次はこの曲がどこに入っているのか?
となると検索をしたくなるわけで
検索エンジンを作りました。
つまりリストを横断化して読み込むようにし
該当する結果のみを表示するわけです。
ここがやはりプログラムの醍醐味ですね。
数十枚で1枚16〜18曲程度ならそんなの訳ない作業ですが
SEBはその時すでにvol.100を超えており
それ以外にもたくさんのCDがありました。
ていうことは、単純にン100枚のファイルを引っ張り
計ン1000曲以上の曲名を確認しないといけないわけです。

最初は全部をそのまま出していてもまだ良かったのですが
下手すると検索ワードにより一致したリストに出てくる件数が
100件を越えることもままありました。
ただ、このまま増えるととんでもないことになるだろうなと思い、
検索で最初に取り掛かったのが「名寄せ表示」です。
つまり、いろんなCDに入っていても同じ曲なんだから
その場合は表示上はひとつの曲名にして
タイトルに紐付くCDタイトルだけを別表示にしよう、と。
とりあえず、表示には一部誤字があったり
キレイにまとまっていないところもありましたが
まだなんとかなっていました。

で、しばらくはこれで大丈夫でしたが
登録CDが増えるに連れ見えない箇所で問題が出てきました。
あまりにも調べないといけない総曲数が多くなりすぎたので
サーバー側が限界になってきたのです。
実は最初の段階で検索内容にキャッシュ機能も付け
負荷軽減もはかっていたのですが
キャッシュも一度検索したもののみのキャッシュでしたから
新しいワードでリクエストされると
また最初から全部を調べる必要があります。
そうすると調べないといけない曲数が多すぎるため
サーバー側に大きな負荷がかかり支障がでてきました。
さらにこの先もどんどん増えて行くことは目に見えている。
ん〜こりゃこまったなぁ…
ということで次に考えたのが「曲名のインデックス化」です。

よくユーロビートサイトでは
アーティスト別や曲別にリストとしてまとめられてたりしていましたが
ハッキリ言ってあれを手作業で全部の曲やってたら
どんなに忍耐強いひとでも途中で心が折れてしまいます。
ということで、
全プログラム化してまとめてやってしまえ
ということになりました。
つまり名寄せした全曲のリストを検索の仕組みを使い事前に作成し
そのリストから検索するように変更しました。
ユーロの場合完全に新曲もありますが
コンピ系の場合は同じ楽曲の再収録が非常に多いので
レコード数がぐんと減りかなりのサイズダウンが出来るようになりました。
これで現在の形がほぼ出来上がったというわけです。

ここまでできればあとは大した作業ではなく
データの見せ方や使い方をどうするかの問題だけなので
それを土台にして
・インデックスファイルの名寄の修正
・MusicListの作成
・カタカナタイトルの追加や表示
・CDをまたいだ配信楽曲情報のリストへの追加表示
・iPhoneやWiiなど新デバイスへのリスト対応
などを行っていったというわけです。


なので、全く専用のDBサーバーなどを使わず
テキストベースのファイルのみで全てを実現しています。
ただ、この話をすると
あれだけのDatabaseを全くDBなしで作ってるの??
とだいたいびっくりされますが
組み方の問題だけなんですよね。
DB使うともっと複雑なこともできますが
当然サーバーも選びますしいろいろ問題も多いです。
ということで、この方法でずっとやっています。


まぁ、こんな感じで現在に至るわけですが
仮に僕が作らなかったとしても誰かが作っていたのだと思います。
仕組みとしてそんな難しい話でもないですし
DB組める人ならば追加するトラックデータさえ集めれば
すぐにでも作れる話です。
たまたま先に僕がやっていただけなので、
たいした話ではありません。

強いて言えば、
継続することが一番面倒なことかもしれませんね。
こういう自分も仕事が忙しかった一時期
更新がほぼ止まっていたことがありましたし
いくら運用を簡単にしても
運用しなかったら更新が止まってしまいますからね。


そんな中の人の裏話でした。
こんなくだらないお話にお付き合いくださった皆さん
ありがとうございました。
今度検索とかMusicListを使った時に
ちょっと思い出してみていただけると嬉しいです。
posted by ゆうと at 03:46| Comment(1) | TrackBack(0) | NET | このブログの読者になる | 更新情報をチェックする

2010年05月16日

リニューアル裏話

5月でうちのサイトが10周年だったわけですが
最初特に何も考えてなかったんですね。

中面のページはちょこちょこ改修をしていたりするんだけど
トップページはよくよく考えてみたら
このレイアウトにしてもう7年ぐらいだったんです。
そろそろ今のブラウザや画面サイズに合わせてレイアウトを変えるか
と重い腰をあげたわけです。


一番悩んだのは
来てくれる人がトップページで何を見たいのか…という点でした。
最新データリストはみたいだろうなというのと
検索を便利に使えるようにするというのはあると思います。
ただ、トップに何を載せるかでSEOで影響が出てくるので
外部の検索エンジンからの表示を考えると
その点も重要だったりするんですよね。
この7年でいろいろやれることができてきたのと
twitterなどの外部サービスなどとの連動がやりやすくなっているのと
今まで載せていたけど要らないところもあったりするわけです。
あと先行してリリースしたスマートフォン(iPhone)版もかなり悩んだのですが
できるだけイメージは近くした方がいいだろうな
というのもひとつの検討項目です。

最期まで悩んだ項目として左ペインでした。
Yahooから始まった3ペインにするのはかなり必然的だったのですが
メニューを上部に持ってくるのはほぼ決まっていたのと
携帯やスマートフォンで先行展開しているトリビア機能をどうするか
というところが最後に決まった項目でした。

レイアウトイメージはほぼ出来上がったんですが
今回xhtml+CSS3ということだったので
実は本格的にやるのはほぼ初体験だったんです。
でも、理解ができるとすごい便利ですね。
確かにすごく考えて作られてるなぁと思いました。
とはいえ、今後iPhone版はHTML5対応をするわけですけど
CSSはそのまま持ち込めるのでいい勉強になりましたね。
角丸とかグラデーションとか勉強になりました。
あと、CSSといえばブラウザによって表示が異なってしますのが
非常にめんどくさい感じでしたね。
まぁ、古いブラウザでは確かに最新の機能は対応してませんからね。
そういう僕がメインで使っているのがFirefox3.01だったので
そのウンコブラウザでした。
で、Choromeとかでみたら無事キレイに見れました。
CSSにコメントをいっぱい入れてますので
気になる方は覗いてみて下さい。
けど今回はjavascriptはほとんど使っていないので
その点についてブラウザ挙動が異ならなかったのは
非常に良かったかもしれませんね。

にしても、画面上部のメニューが
まさかCSSだけで作れるとは思ってもいなかったなぁ。
このメニューの件もWiiと同じように当初CSSのレイヤー構造にしようと考えていたんですが
たまたま友人のtwitterでCSSの解説がされているページがあったので
参考にしながら工夫してみました。
おかげで画像もほとんど使わず軽いページとなったのは良かったかも。

あとはSEO対策用にタグに関してはものすごい気を使いました。
今までのページだとページ得点算出をすると必ずひどい点数でしたが
div idで属性もしっかり配置したし今回は気を使いまくりましたから
大丈夫なんじゃないかと。

今後トップで使ったメニューとかをjs化して
全ページで使えるようにするとか考える必要はありそうですね。
あとは、スマホページにCSS対応するのと
携帯電話のトップページレイアウト変更をしないといけないですな。

実は一つ情報系の機能が間に合わなかったので
今回は表示できていないんですが
近日中に追加しますのでそれは別途お楽しみに…ということで。

ということで、今後とも宜しくお願いいたします。
http://www.2choume.com/para/
posted by ゆうと at 03:07| Comment(0) | TrackBack(0) | NET | このブログの読者になる | 更新情報をチェックする

2010年02月02日

進化してますな〜

昨日ツイッターのランチ投稿用ブログを新たに作成した。

ツイッターへの同時投稿ができるのを知ってたからそこにしたんだが、
設定見てたらどうやらちゃんとiPhone用UIが用意されてんのね。
つかね、それが正解だよ。
ちゃんと対応しなきゃだめ。

だって手でリンク触るのにリンク幅とか高さがPCと同じサイズって
ちゃんと触れないじゃん。
タッチペン使う訳じゃないんだし、
見ることは出来てもそこから先に行けないっしょ。

まだまだ広告とかで金になるレベルの市場ではないけど
やっておくべきだと思う。
posted by ゆうと at 09:37| 東京 🌁| Comment(0) | TrackBack(0) | NET | このブログの読者になる | 更新情報をチェックする

2009年10月14日

bing

bingって知ってます?
マイクロソフトが出してる検索とかの統合エンジンなんです。
前みた時はホント使えなかったんですよ。

昨日会社の人に教えてもらってみたんですが、ちょっとビックリ。
何にかっていうと、とにかく地図が凄いんです。
まぁGoogleEARTHみたいなのもとりあえずはあったりはしてるんですが、一番凄いのが航空写真。
そんなのどこでもあるじゃんと言うでしょうが、
概観図ってモードがあるんです。
何かって言うと普通の航空写真だと真上からなんですが、パースがついてて斜め上から見れちゃうんです。
それもちゃんと方向が4方向あって建物が各方向から違和感なく見れるってのは、
ちゃんとこまめに場所毎に撮ってるって事です。
さすが、金持ってるMSのやることは違いますね。

以前、うちの社内の別PJで金絡みで大揉めした事があったんですが、
MSはそのハードルを一気に越えて行きましたからね。
さすが金にモノを言わせてますよね。

ま、そんな感じで一度見て下さい。
ストリートビューとは異なる、ちょっとした驚きの体験ができます!
posted by ゆうと at 10:14| 東京 ☁| Comment(0) | TrackBack(0) | NET | このブログの読者になる | 更新情報をチェックする

2009年09月03日

HBCと垢BANと人柱

最近Wiiで気になる事があります。
お手伝いマイスターの事も気になりますが、
どっちかというと今日はネガティブな話。

Wiiではゲーム中にネット対戦するの時はWi-Fiコネクションという独自のネットワークを使うのだが、
特定の理由に該当した場合そのネットワークを使えなくされてしまうらしい。
これがアカウント停止扱い、通称で垢BANと呼ばれています。
これに該当してしまうとWi-Fiコネクションを使ったゲームが一切できなくなるとからしいです。

でもね、普通にやってるだけの人は絶対に該当しないんです。
問題は悪さをしてる人への対策なのですが、
その悪さの条件がわからないためちょっとドキドキしてました。
まぁ、何でドキドキしてるかというと、
以前ちょっと書いたかもしれませんが
とわいらいと的なはっくな事をしてるので
該当したらどうしよう…と思っていた訳です。

まぁこの手の垢BANされる条件としてよくあるのは
ゲームデータを弄って勝手に強くしたりするチートなんですが、
これは明らかにアウトだと思います。
ただ、DSiのマジコン対策みたいにマジコン自体NGとする対応もしてたりするので、
home brew channelと呼ばれる独自アプリ稼働ツールがあるんですが、
これを入れてると該当すんじゃないかというドキドキ感があり
しばらくWi-Fiコネクションを繋いでなかったんです。

そこで、昨日意を決して人柱で起動してみました。
とりあえず垢BANはされなかったようです。

ただ、それとエミュ以外は
DVD起動用のほげほげとか
その他のファームを弄るようなものは
一切入れてないので何とも言えないんですけどね。

まぁ、もし同じような人がいたら安心してください。
ただ、この先どうなるかは不明ですから、
よくウォッチしておかないとです。
posted by ゆうと at 12:41| 東京 ☁| Comment(0) | TrackBack(0) | NET | このブログの読者になる | 更新情報をチェックする