Author Archives: わいつ

レッドストーンあんてな更新

こんちくわ。

昨日出張中にスマフォが飛んでいって画面が粉々に割れました。m9(^Д^)プギャーwwwwww

がしかし、明日までに新品になってご帰宅するそうです。テヘ

 

ということで、あんてなさんですが、どうやら途中でフィルターがけに使っていた”YahooPipes”さんが仕様変更したのか怒ったのか、アクセス多いところには制限かけまくりらしいです。
全世界で同じような人が大量にでているらしいのでどうなることやら・・・。
そんな事もあろうかと、色々と他の手を考えバックアップとして残していたわけですが・・・。

そんなわけで、データベース版が完成したので昨日から公開しておりまする。

レッドストーンあんてな@モバイル

デザイン的にモバイルファーストの概念を取り入れ(たつもり)、PCよりモバイルでの見やすさや操作しやすさを優先させ作ってみました。
まだまだ記事だけなのでアレですが、動画や他サービスも同様にモバイルベースで考え新規設置を考えています。

本家のレッドストーンあんてなさんも鯖ごとどうしようかお悩み中です・・・。
もしくはデータベースだけ取り出してPC版にするか・・・。
近日中になんとかしまする。

 

 

 

レッドストーンあんてな@DBてすとん

おこんにちは。

前々からちょくちょく作っていたものをテストで一時的に公開してみます。

レッドストーンあんてな@DBてすとん

以前というか、現在公開中のモノとは全く違う仕様になっております。

スマフォも対応済みで検索もタイトルとブログ名でいけます。

 

現状との違いを思いつく中で箇条書きにでもしてみます。

  • 保存方法をMySQLにしてみた(現状:Cron+Html)
  • CMSを改造してるので色々楽(現状:独自)
  • ブログ情報取得はRSS内容から自動取り出し(現状:自動+ちょっと手動+yahoo pipes)
  • キャッシュ使用はなく、データベースからそのまま取り出し(現状:キャッシュ)
  • 鯖を国内SSD鯖へ(現状:米国鯖)
  • レスポンシブ対応なので大概のブラウザとスマフォではそのまま見られる(現状:別ページ)
  • リダイレクトでクリック数カウント(現状:cgi)
  • クリックカウント数はプログレスバーで表示(とりあえずMax値200クリック=100%設定)
  • 全鯖の最新記事をTOPに表示(現状:無し)
  • その日(24時以降)の記事でのランキング表示(現状:無し)
  • ブログ名クリックでそのブログの記事の一覧表示(現状:無し)
  • 外部サービスは一切使用なし(現状:yahoo pipes)
  • 外部サービスが無いのであんてなに載るのが早い(現状:yahoo pipes→キャッシュ→Web)

データベースにしたことで、色々な表示方法が出来るようになります。3時間のクリック数ランクとか週間・月間ランクとかも。

とりあえずのテスト版なので、デザイン的にまだ未完成です。
あと、広告も(笑)

見る方からすると、どっちがいいかはその人次第かもですが、お試しあれ。

好評なようでしたら入れ替えてみます。

モバイル用あんてなさんを更新

お久しぶりです!
年度末で忙しく過ごしております。

 

ということで、レッドストーンあんてなのモバイルページですが、どうやったらベストなのか悩んだ結果・・・
ワードプレスにあんてなを組み込む事にしてみました!
さらにプラグインで簡易キャッシュ+モバイルページ表示(ガラケーでも多少は見られるかも)
もちろんPCでもみることはできます。
対戦表はRSSから読み込み文字を置き換えて少し見やすく設定してみました。

更新は10分おきで設定。

さらにサーバーは国内VPS鯖のSSDプランということでまぁまぁ現状では文句ないだろうなぁと。
鯖はApache+FastCGI(mod_fastcgi)+PHP-FPM+APCで多少のカスタマイズはしております。

1日で作った物なので今後見た目は変えていくと思いますが、とりあえず。

以前のサイトからでもブクマからでもリダイレクトで飛ばすようにしておきました。

現状は右上のメニューから各鯖ブログ一覧ページへ行けます。

てことで、リンク
http://rsmp.rssjp.com/

レッドストーンあんてなに動画一覧

 

レッドストーンあんてな
レッドストーンあんてな-動画一覧

 

とりあえず、更新報告

要望のあったRS動画一覧ページを公開。

youtube動画はユーザーIDごとにいけるので載せて見ました。

 

やりかたは、Yahoo! PipesにてYouTube APIを利用します。

色々やりかたはあると思いますが、シンプルにユーザーIDを読み込みソートして出力。

PHPにて文字列の置き換え(窓用・HD用)等を行い表示。

 

ニコニコ動画はお勉強後やってみます。face_c07.gif

ウェブ制作の流れ

自分のメモがてらにウェブ制作(ウェブサービス)の流れを書いてみようかと。

ちなみに私の場合の話なのであしからず!

レッドストーンあんてなの時を思い出しながら書いてみます。

※下記は部分的でも全文でもコピペしても流用しても何をしてもOKです。
何かに役立てば幸いです。
face_c02.gif

 

[button link=”#” color=”#000080″ size=”4″ style=”5″ dark=”0″ radius=”auto” target=”self”]1)計画を立てる[/button]

[button link=”#” color=”#000080″ size=”4″ style=”5″ dark=”0″ radius=”auto” target=”self”]2)設計する[/button]

[button link=”#” color=”#000080″ size=”4″ style=”5″ dark=”0″ radius=”auto” target=”self”]3)制作する[/button]

[button link=”#” color=”#000080″ size=”4″ style=”5″ dark=”0″ radius=”auto” target=”self”]4)テストする[/button]

[button link=”#” color=”#000080″ size=”4″ style=”5″ dark=”0″ radius=”auto” target=”self”]5)公開する[/button]

 

さて、1)から多少内容をみていきましょう。

1)計画を立てる

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]サイト(ユーザー)の目的(やコンセプト)[/button]
これによってサイトの大まかな流れが決まります。
ベクトルを見誤ると結果、使い勝手もデザインもおかしな物になるでしょう。
※コンセプトとは

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]ターゲット層[/button]
誰が何を見るために作るのか。この層を間違えないように。

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]現状把握[/button]
現状のサイト、または競合するサイトなどの情報を集めます。競合サイトより上を行くもの目指しましょう。

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]広告の有無[/button]
最初に設定しておき、デザインに組み込まないと広告の効果を発揮できません。

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]使用する言語[/button]
静的(HTML)・動的(PHP/CGI etc.)を決めておくと後々楽です。

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]管理方法[/button]
管理の方法を初期で決定しておきましょう。1人なのか複数なのか後から追加出来る方法なのか。

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]現在の問題点[/button]
リニューアルの際はこれが重要になります。なぜ、リニューアルするのか。

アイデアで勝負したい時や思いつきを重視する際はマインドマップ(有料もあるが無料ウェブ版で充分です)なんかも有効です。

すぐに使える無料マインドマップツール10選

2)設計する

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]フローチャート[/button]

簡単な流れ図があると設計も楽です。

※フローチャートとは

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]サイトマップ[/button]

ページ構成をわかり易く表示。トップの下には詳細ページみたいな。

上記のフローチャートと一緒に設計するもよし、別で作るもよしとおもいます。

ここで言っているのは、ウェブURLクロール用のサイトマップではありません。

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]デザイン案(ワイヤーフレーム)[/button]

ウェブページの主なデザイン案です。手書きでも無料サービスでもある程度決めましょう。

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]ブラウザ・スマフォ対応[/button]

各種ブラウザに対応させるかどうか。スマートフォンや携帯にまで対応させるか。設計の時点で決めておかないと大変になります。

またサイト自体、Javascript・Flashを切っても同じように見ることができるのか?は最近ではセキュリティ上重要になっています。

ブラウザのシェア率はここでみましょう。
StatCounter Global Stats

日本のここ半年のシェア率

[button link=”#” color=”#b0e0e6″ size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]フレームワークの有無[/button]

簡単に言うと、ウェブサイトの土台です。CSSボタンやフォームやデータベースなど初期から作るにはめんどい事もサクッと実装できます。

この辺はサイトの目的やデザインに合わせて使用するかどうかも考えましょう。

最近は楽なCSSフレームワーク、Bootstrapが有名かも。
老舗はアプリフレームワークの、CakePHPか。

フレームワークとは

ここまでにサイト制作の95%を注ぎましょう!

3)制作する

ここまでの計画を形にしていきましょう。

無心で制作するのみ。

4)テストする

実際にサーバーにアップして動作検証をしてみましょう。

5)公開する

公開後はSEO対策、管理、サービス追加などでウェブサイトを育てて行きましょう。

 

 

というような感じで進めていけば、自分がやりやすいサイト作成が出来ると思います。

やはり、明確な道標というのは重要だなと実感します。

ただし、この通りにやったから成功するというわけではありません!

結果はまた別物と考えておいたほうがいいです。

 

一番やってはいけないと言われているパターンは、

[button link=”#” color=”#ffdead” size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]「あ、このサイト良さげ!デザインもいいなぁ~」[/button]

[button link=”#” color=”#ffdead” size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]「真似してまず作ってみよう!」[/button]

[button link=”#” color=”#ffdead” size=”1″ style=”1″ dark=”1″ radius=”auto” target=”self”]「まず公開してから徐々に変えて行こう!」[/button]

です。

 

私は過去これで大変な思いをしましたが、いい勉強にもなりました。

重要なのは作る前の計画と設計に力の95%を注ぐことです。

気づいたことを箇条書きでも付箋でもいいので書き留めていくことで、必要な物そうでないものが見えてきます。

 

という感じに、途中まで書いて段々と尻すぼみになってしまいましたが、ウェブ制作の流れを書いてみました。

次回はウェブ制作に便利なサイトやサービスのまとめでも書いてみます。

久々のRS記

こんちくわ☆(ゝω・)vキャピババ

 

RSは鏡もかけら出しも狩りも何もしていないので、たまに出られるときのGvだけになっております。face_c07.gif

で、久しぶりに昔の装備で知識極にしてGBTに出てみました!

かかしにはこれだけでたよ!

もちろん、このままでGBT決勝に挑みました。

花投げありで450↑とか見えましたが、そこはやはり知識・・・。

久々で楽しかったです。hand_09.gif

 

 

GBTお疲れ様でした!

あんてな1ヶ月たったったとか色々

こんちくわ!

 

ここ最近は、恐竜王国2012に行ったり国家試験があったり、歳をとったり珍しいイベントがありました。

恐竜王国2012

恐竜って子供の頃に見ていた爬虫類っぽいのとは全然違って案外びっくり。

鳥っていうのもうなずけるな。うん。

 

歳をとった日

画像じゃよくわからないけど、虹が2本上下に出ています!

 

 

さてさて、レッドストーンあんてなをリニューアルして1ヶ月たちましたが、鯖ログからどんな感じかみてみましょう。

 

鯖転送量グラフ

2012年09月

[note color=”#f3f3f3″]

Apacheログよりrss.y2blog.comのみの統計情報

2012年09月
ページビュー:866,980回(1日あたり28,899回)
ユニーク数:50,373回(1日あたり1,679人)
ヒット数:1,415,719回(1日あたり47,191回)
転送量:2.962GB

[/note]

※ユニーク数:同じ人が一定期間に何回訪問しても”1人”とカウントする

ちなみにこれまで

[note color=”#DFE7FF”]

Apacheログよりrss.y2blog.comのみの統計情報

2012年5月
ページビュー:184505回
ユニーク数:8279回
ヒット数:305674回
転送量:4.14GB

2012年6月
ページビュー:459548回
ユニーク数:22762回
ヒット数:702563回
転送量:9.93GB

2012年7月
ページビュー:610636回
ユニーク数:32611回
ヒット数:985888回
転送量:13.65GB

[/note]

こりゃ、大成功と言えるのではないだろうか。

転送量をかなり抑え、アクセス数は上昇。

CPU消費時間も以前よりは減っている。鯖に優しくなったね!

 

広告収入もあんてなサイトはかなり微力ながらに健闘。

キャラ名も広告もあるってことで、ある程度の責任や強制力なんかも出てくるだろうし、その方が完全ボランティアよりもいいんじゃないかと思う今日この頃。

 


 

ま、なんというかここからは自慢乙な話しですが、他にも色々昔からサイト作成はチャレンジはしていて広告収入って馬鹿にできないんですよ。

どん

どん

どん

 

レッドストーンで得られるアクセスの数倍どころか数十倍あるサイトも複数やってたりで。そんな訳でサーバーも何個も持ってたりします。

どこかは明かしませんけど、そういうアクセスが多いサイトを運営すると問題は毎日のように起きたりface_c08.gif

あとは、中国やロシアからのが色々とひどい。mark_13.gif

広告で収入を得るからにはその対価として管理というのは当たり前にあるわけで。ユーザーもそこを突いてくるのは普通です。

だからこそ、サイトとして成り立っていて運営できているんだろうと個人的に小さな実績から思っています。

 

あ、税金問題はちゃんとしているのでご心配なく!hand_09.gif

レッドストーンあんてなリニューアル

 

こんちくわ。

お盆休みと土日でレッドストーンあんてなを1から作りなおして見ました。

サイト作成やPHPなんかの知識があるわけでもないので、多くのサイトを見ながらやっていました。

そんなわけもあって、HtmlもCSSもJavascriptもサイト作成はぜーんぶメモ帳のみでやっています。hand_09.gif

で、思ったよりも時間がかかっちゃったけど、一応更新してみましたよっと。

 

というわけで、後々の事も考えてメモがてらにやったことでも箇条書きにしておきます。

もし、何か作るときの参考にでもなれば~

 

使ってるスクリプトやサービスや種類なんか

[note color=”#FFF7DF”][list style=”check”]

  • MagpieRSS-PHPで使えるRSSパーサー。PHPで外部のRSSを取得、解析、そしてキャッシュまで全部やってくれる
  • Yahoo! Pipes-任意のRSSに色々なフィルター処理をかけ出力することができる
  • jQuery-JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ
  • PHP-自力

[/list][/note]

RSSについてやったこと

[note color=”#FFF7DF”][list style=”check”]

  • 日時で限定-31日前より現在時刻まで
  • 広告削除-アメブロ対策
  • ソート-日付降順
  • 最大100件

[/list][/note]

サイトの見やすさ?に向けてやったこと

[note color=”#FFF7DF”][list style=”check”]

  • 横幅は950~1000pxで構築(大手サイトはほぼ950px付近)
  • サーバーの色分けをパステルカラーっぽく
  • メニューの並びは鯖順ではなく色順
  • テーブルを行ごとに色分け
  • ブログ名で絞込み
  • ブログ内容をTipで表示
  • 小窓でページ偏移無くチェック可

[/list][/note]

サイト高速化に向けてやったこと

[note color=”#FFF7DF”][list style=”check”]

  • HTML,CSS,Javascriptファイルの圧縮(最低限の圧縮)こことかでやった
  • RSS取得後30分後にキャッシュ設定(30分まではキャッシュを表示)MagpieRSSで設定
  • キャッシュ更新はCronJobで各サイト30分ごとに自動更新設定(サーバーCronJobで設定)
  • 主なCSS,Jquery,imageファイルは外部国内別サーバーに置き負荷分散
  • ブラウザキャッシュの設定(変更が無いファイルは1ヶ月設定).htaccessで設定
  • JqueryはGoogleにホストされているものを使用(簡単コピペサイト)
  • サーバーのPHPバージョンを5.2から5.4へ変更

[/list][/note]

サイト修正についてやったこと

[note color=”#FFF7DF”][list style=”check”]

  • 修正しやすいようにテンプレート化にした(PHP-1箇所変えたらページ変わる)
  • テンプレートはヘッダー・メニュー・右カラムの3箇所

[/list][/note]

RSS取得の仕組みについて

[note color=”#DFE7FF”]

  1. RSS発信サイトのRSSを取得-手動・投稿より
  2. Yahoo!Pipes(以下YP)にRSSを登録-手動
  3. YPにて31日前より現在時刻までのRSSに絞る-Date Builder
  4. YPにて広告RSSを削除-Filter
  5. YPにて日時降順に並び替え-Sort
  6. YPにてRSSを100件に絞る-Truncate
  7. magpierssにてYPのRSSを取得
  8. PHPで文字コードをUTF-8へ変換
  9. PHPでhtmlタグ、改行、スペースを削除
  10. PHPでタイトルと記事内容の文字数制限
  11. PHPでドメイン判断で各項目追加
  12. PHPで現在日時を取得し経過アイコンを付加
  13. 30分毎に出力をキャッシュで保存
  14. サイト表示

[/note]

ここまでのサーバー統計(今後はまだわからない)

[note color=”#DFE7FF”]

Apacheログよりrss.y2blog.comのみの統計情報

2012年5月
ページビュー:184505
ユニーク数:8279
ヒット数:305674
転送量:4.14GB

2012年6月
ページビュー:459548
ユニーク数:22762
ヒット数:702563
転送量:9.93GB

2012年7月
ページビュー:610636
ユニーク数:32611
ヒット数:985888
転送量:13.65GB

[/note]

レッドストーンあんてなの見直し

やっとの事で連休に入りました。

もちろん、お持ち帰りのブツも大量に持ってきているので休みのようで休みでは無い今日この頃です。

 

さてさて、自分用で作っていたレッドストーンあんてな@わいつを一般公開したところ、思ったより好評でして何よりです。

がしかし、あくまで自分用の用途でしか無かったため色々と問題もあったわけです。

ということで、この休みを利用して一つテストスクリプトを組んでみました。

以前と違う点は主に、

・RSS取得プログラムをYahoo! Pipesへ変更
・RSS表示プログラムをmagpierss+PHPへ変更
・RSSソートプログラムをYahoo! Pipesへ変更
・1サイトにつき2記事までを無制限に変更
・Yahoo! PipesでRSS50ブログ取得+取得時より1ヶ月前までのもののみ取得+広告削除+時系列降順ソート+上位50件~100件など
・magpierssとPHPでキャッシュ30分ごとに設定+UTF-8へコンバート+改行とhtmlタグ削除+スペース削除+文字数制限+ドメイン判断で項目追加+24/48/72時間アイコン追加など
・jQueryでテーブルストライプ+マウスオーバー+ToolTipsで本文一部表示など
Pingdomでサイトの表示速度や何が重いかをチェック

と、箇条書きにしてみてわけが分からなくなりましたが、簡単に言うと

・なるべくシンプルかつ情報量を多く
・サイトは軽く見やすく
・取得とフィルターは外部で
・キャッシュを利用
・jQueryでより軽くクロスブラウザ対応
・本文一部をちょっと見せる

こんな感じにしたいなぁと言う話です。

まだまだテスト段階ですが、見てみたいよ!なんていう人は下記からどうぞ。

レッドストーンあんてな@βテストVer.

黒鯖ブログのみでテストしています。

まだテストなのでそのへんよろしくです!

レッドストーンちゃんねる

 

どうせなら、メイン名晒してお前が掲示板やれよ!

という圧力に屈し作っておきました。

したらばの避難所でも何でも使ってみて下さい。

とりあえず、テスト運用で。てけとーにテスト書き込みでもしてみてください。

スレッドは自由に作成できます。削除人はいません。メインキャラ名晒せる人にしよかなw

仕様なんかは後ほど。

http://rsch.y2blog.com/bbs/