タグ別アーカイブ: webツール

艦これの画像ツイートだけをまとめて閲覧出来るwebツール「艦これ画像まとめたった~改」

今まで艦これ画像をまとめているサイトに「艦これ画像まとめたった~」がありました。wordpressベースで艦これ画像のツイートを閲覧できるサービスです。

が!

画像を見るだけならまだいいのですが、これがなんとまあ、検索してもページ単位でしか見れなかったりと不便でもあったのです。

というわけで新しく作り直しました。軽快動作、快適閲覧!「艦これ画像まとめたった~改」です!!


艦これ画像まとめたった~改|ありすぎる艦これ画像ツイートを収集・閲覧!

艦これ画像を検索・閲覧

検索ボックスにワードを入れれば、言葉で検索してくれます。半角スペースを入れればAND検索にもなります。実際便利。

ソート

RT数、fav数、ツイート日時などで順序を変更できます! これで見たい画像を見たい順序で閲覧できますね。

収集日別閲覧

収集日別にも閲覧する事ができます。多すぎる画像をひとまず小分けに!

リセット

まあぶっちゃけ、トップページに戻るだけなわけですが。並び変えたり日別で見てたりしてて混乱してきたりしたらお使いください。

IEの対応なんてハナっからする気なし!「ie-owakon」で楽々と他ブラウザへ誘導

コードをコピペするだけでIE8以下で閲覧したときに警告を表示する『ie-owakon』を作りました | SANOGRAPHIX

IE向けにページを組むのは結構大変です! IE7までCSSがまともに使えない上に未だにIE6がうようよいやがるぜ!!!

とまあ、今ではtwitterですらちょっと前のIEで閲覧すると表示が崩れます。そろそろIEから乗り換えちゃいなよべいべー!! という感じで、IEの対応を最初からする気がないページを私もいくつか作ってきました。

さすがにこのブログではやっておりませんが、aoringo toolsで取り扱っているwebツールではIE8以下で閲覧すると警告が出たりします。

その警告の元が上記サイト様。オワコンちゃんかわいい!! イラストをそのまま載せるのはなんとなくはばかられたので置いてませんが、かわいいんだよね、オワコンちゃん。

デモページは↓

IEはオワコン!

IE以外のブラウザで見るとただの文字列ですが、IEで見ると、

オワコンちゃんが出てきます! かわいい!

ソースはリンク先で配布されていますが、IE10では「 <!–[if IE]>」が仕様変更でただのコメントとして扱われるようになりまともに動作しません。

なのでメタタグに

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

を追加する事によってIE9のシミュレーションをして表示させることができます。

IE10はCSSとかもある程度できるのでIE10までオワコンする必要はないと思うのですけれど、皿まで憎い人はやっぱりいるわけですよね!!

ちなみに私は特に気にせず実装しちゃう畑なんでわりとどうでもいいです!

SEO – goodkeyword – SEO対策、無料で使える関連キーワード検出webツール

【goodkeyword】Yahoo/Google関連キーワードツール

キーワードによく併用される関連キーワードを探す事が出来るツールです。

無料で使えて、手軽。余計な情報は一切ついてこなくてとても便利です。

試しに「SEO」で検索してみました。対策、無料、相場、チェックなど、よく併用されるであろう単語が並んでおります。

この結果をみて考えたタイトルが「SEO対策! 無料で使える関連キーワード検出webツール「goodkeyword」がスゴイ」です。SEOに適したタイトルを考えるのはブログ運営では必要になる技術です。是非ともマスターしておきたい・・・ですが、正直SEOなんてよくわかんないよーとか思ってました。

今度からはこれを上手に使っていこうかなと思います。

TRPGのリプレイに最適なCSSスタイルを考える

タイトル通りです。

CSSってのは、HTMLの見た目をエレガントにカッチョウヨクデザインする事の出来る特別な文法であります。この機会に勉強するのもよいでしょう。

この記事では、CSSはある程度理解しているという前提に立ち考えていこうかと思いますよ。

pre か p か dl か。

まずどのHTMLタグを使用してデザインをするのか、選定をしていかないといけませんね。

テキストをそのまま持って来るという意味で、一番簡単なのが「pre」タグです。

<pre>
改行なんかも気にせずいけるもんね
わーいわーい
</pre>

brタグなんかを利用しなくてもそのままコピペでいけちゃいますね。ただ、問題点もあります。

それは各行のデザインをする事が出来ないということ。無難なテキスト丸出しなのでションボリーにな感じになりがちです。

二つ目、「dl」タグです。これは辞典などの項目に用いられますね。

<dl>
 <dt>PC1</dt>
 <dd>あいうえお</dd>
</dl>

こんな感じです。見出しと内容でこのように分かれてくれるの比較的見やすい形になるし、CSSでスタイリングもしやすいです。

が、htmlタグを見ての通り、それぞれの項目をタグで包む必要があるので面倒くさいという点があります。

そんなわけで、今回私は「p」タグを利用することにしました。

このブログを作るのに利用されている「wordpress」では、普通に文章を打てば、吐き出されるhtmlデータは全て「p」タグで囲われているのです。

これを利用しない手はありません。

実際にデザインしていく

とはいっても特に難しい事は考えません。見やすい文章になるように細かく調整していくだけです。

<div class="replay">
 <p>PC1:テスト</p>

<p>GM :テテスト</p>

<p>
 PC1:テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

<p>GM :テ、テスト</p>
</div>

利用するテキストはこんな感じ。div.replayに囲まれた物のみに適応される形ですね。

素のままだとこんな感じ。

まず横幅を大体600pxにします。これは、横長になりすぎるとそれだけでストレスになる場合があるからですね。

読みやすい!

しかし折り返された文章が名前と被って読みづらい気もします。

そこで。

「text-indent」と「padding-left」を使用します。

text-indentは文章の一行目だけをインデントします。

p{
 text-indent:1em;
}

これで、

こんな感じになるわけですね。

じゃあこうしてみると?

p{
 text-indent:-3em;
 padding-left:3em;
 }

こんな感じで二行目以降にインデントする事が出来るわけですね。

他にも色々と装飾を乗っけて、見やすいTRPGリプレイを目指してみて下さいね。

軽く修正してみて最終的にはこんな形に。

<style type="text/css">
 body{
 max-width :600px;
 margin :0 auto;
 }

p{
 margin :0;
 text-indent :-4em;
 padding :10px 0 10px 4em;
 border-bottom :1px dotted gray;
 font-size :12px;
 font-family :monospace;
 }
 </style>

今回のデモは↑より。

また、aoringo worksではIRCやどどんとふの利用により生成されたチャットログを見やすくするためのwebツールを開発しています。

aoringo CHAT logger

こちらもご利用下さいな。

aoringo ICON writer

aoringo ICON writer

どどんとふでは基本的に絵のついたコマを利用します。

しかし、全てのコマに絵が必要でしょうか。手軽に差別化されたアイコンを利用したいと思ったことはありませんか。
例えば「罠」とか「月曜」とか、文字のコマが利用できたら便利だと思いませんか?

というわけで作りました。

50*50の文字アイコンを簡単に作成してダウンロードする事が出来ます。

色もカラーピッカーでお手軽に設定する事ができます。「追加」ボタンを押すことで同じ色設定でどんどんコマを作成する事も可能となっております。

このように、文字によって少し位置がずれちゃう場合もあります。そのための微調整欄も用意しました。

気になる文字の位置を少しだけ調整してやる事で、かなり良い感じのコマが作成できます。

是非とも自由な発想で遊んでみてください!

aoringo ICON writer

.

ps:さっそくあそばれました・・・(笑)

どどんとふ上に配置したら変なことになった。 on Twitpic

開発

一人、もしくは複数で制作されたもの。aoringo発案、メイン制作なものは「aoringo」が冠につく。

aoringo CHAT logger
IRC、TRPGチャットのログを綺麗に整形することができるwebツール
Aoringo Elysion Enemy-sheeter
エリュシオンTRPGのエネミーシートを簡単に作成できるwebツール
共同制作:Kurumi’s TRPG archive

提供

依頼を受ける形で制作した制作物。

TRPG.NET セッションマッチングシステム
TRPG.NETが運営している、TRPGをプレイする全ての人たちに向けたTRPGマッチング特化webサービス
cre.jp 検索ページ
NEXTに属する各種体系の総合的な検索webツール
IRC公開LOG | クリエイターズネットワーク
NEXTが運営する一部のIRCチャンネルのチャットログを閲覧することが出来る。CRE.jp、TRPG.net、語り部で運用中