Webアプリケーションの基礎覚書

お勉強 Webアプリケーション

今日はWebアプリケーションの基礎を先輩から教わったので箇条書きで書き出す

  • URLスキームは「プロトコル://ホスト名[:ポート番号]/パス
  • 通常のWebアプリケーションのやりとりは、HTTP1.0、HTTP1.1またはHTTPS
  • リクエストヘッダは改行コードが2つ連続したら終わり
  • 1行目は「メソッド パス httpバージョン」
  • メソッド
    • GET
    • POST
    • HEAD
    • PUT（あまり使わない）
    • DELETE（あまり使わない）
  • HEADメソッドを使うシーン
    • 容量の大きなデータが手元にあるものと変更がないかの確認をする場合など
  • POSTのデータはリクエストボディに含まれる
  • HTTPサーバ
  • CGI
    • Common Gateway Interfaceの略
    • STDINから読み込んでSTDOUTに吐き出す
    • 古い
  • MVC
    • モデル・ビュー・コントローラ
    • ディスパッチャ
      • 処理を割り当てる（コントローラを選択する）
    • コントローラ
      • ビューとモデルを選択する
    • モデル
      • データソース
    • モデルとビューを分ける必要は？
      • ケータイとPCの両方に対応しているサイトなどではモデルとビューを分けることでビューだけそれぞれ作ればよい
  • Ajax
    • バックグラウンドで処理が飛ぶ（ページ遷移がない）
    • イベント駆動

javaサーブレットからついったーにポストするだけのコード

tomcat サーブレット java

会社の研修でjavaサーブレットの勉強をしてます。
今日の課題は「サーブレットからついったーへメッセージをポストする」でした。

ついったーへの接続はTwitter4Jライブラリを使用。

ソースコードはこちら

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import twitter4j.Twitter;
import twitter4j.TwitterException;

public class PostTweet extends HttpServlet{
	public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException{
		res.setContentType("text/html; charset=UTF-8");
		
		req.setCharacterEncoding("UTF-8");
		String message = req.getParameter("message");
		if(message != null){
			message = new String(message.getBytes("8859_1"), "UTF-8");
		}
		
		PrintWriter out = res.getWriter();
		out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional/EN");
		out.println("http://www.w3.org/TR/html4/strict.dtd\">");
		out.println("<html>");
		out.println("<head>");
		out.println("<meta http-equiv=\"Content-Type\"");
		out.println("content=\"text/html;charset=UTF-8\">");
		out.println("<title>ついーと結果</title>");
		out.println("</head>");
		out.println("<body>");
        
		try{
			tweet(message);
			out.println("<p>ついーと成功</p>");
		}catch(TwitterException e){
			out.println("<p>ついーと失敗</p>");
		}
		
		out.println("</p>");
		out.println("</body>");
		out.println("</html>");
		out.close();
	}
	
	public void doPost(HttpServletRequest req, HttpServletResponse res)
	throws ServletException, IOException{
		res.setContentType("text/html; charset=UTF-8");
		
		req.setCharacterEncoding("UTF-8");
		String message = req.getParameter("message");
//		if(message != null){
//			message = new String(message.getBytes("8859_1"), "UTF-8");
//		}
		
		PrintWriter out = res.getWriter();
		out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional/EN");
		out.println("http://www.w3.org/TR/html4/strict.dtd\">");
		out.println("<html>");
		out.println("<head>");
		out.println("<meta http-equiv=\"Content-Type\"");
		out.println("content=\"text/html;charset=UTF-8\">");
		out.println("<title>ついーと結果</title>");
		out.println("</head>");
		out.println("<body>");
        
//		out.println(message);
        
		try{
			tweet(message);
			out.println("<p>ついーと成功</p>");
		}catch(Exception e){
			out.println("<p>ついーと失敗</p>");
		}
		
		out.println("</p>");
		out.println("</body>");
		out.println("</html>");
		out.close();
	}
	
	private void tweet(String message) throws TwitterException{
		/***********************
		 * ログイン
		 ***********************/
		Twitter twitter = new Twitter("ユーザ名", "パスワード");
//		twitter.updateStatus("Tweeting!");
		
		/***********************
		 * ついーと
		 ***********************/
		twitter.updateStatus(message);		
	}
}

冗長的なのは仕様です。

なぜかdoGetからのツイートは
String(message.getBytes("8859_1"), "UTF-8");
として明示的にエンコードしてあげないといけないのに、
doPostからのツイートは何もエンコードしなくておｋらしい。
あと、getOutputStreamを使うと文字化けの原因になるよ！*1


ついでに、当たり前ですがTwitter4Jはapache-tomcat-6.0.18\libに入れなくちゃ動きません。
これをしておらず30分くらい進みませんでした。



仕事(と言ってもまだ研修ですが)は楽しいです。
色々ありすぎるけど頑張りたいと思います。

*1:http://www.ingrid.org/java/jserv/i18n/corruptedchar.html

ニコ動で動画検索ページに共起タグクラウドを表示し、複数タグを選択してタグ検索が可能なユーザスクリプト作ってみた

ニコニコ動画 ユーザスクリプト Chrome

前回、動画検索結果ページに共起タグクラウドを表示するユーザスクリプトを作りましたが、そこから複数のタグを選択して＆検索が出来るようにしました。
これで、例えば図の様に特定の曲で「演奏してみた」動画だけ欲しい時などは簡単に検索できるかと思います。

  • 導入
    • こちらから。
    • 導入方法は過去の日記を参考にして下さい。
  • 使い方
    • ＆検索で用いたいタグのチェックボックスにチェックを付けて、「複数タグで検索」ボタンをクリック→ｳﾏｰ
  • 注意事項
    • 前回のユーザスクリプトを導入している方は、競合してしまい予期せぬ動作を起こすため、前回のスクリプトをアンインストールしてから導入してください。



ニコニコのマイリストを整理するツールを作ってみた

ニコニコ動画 Adobe AIR

【重要】2010/02/12の19:20以前に本ツールをダウンロード・インストールした方はアップデートを強く推奨します。マイリストの削除を取り消せないバグがあります。


ニコ動のマイリスト、特にとりあえずマイリストは便利で重宝しているのですが、マイリスト内の動画を別の動画にコピーしたり移動したりが非常に面倒だなぁと感じだので、もう少し直感的に操作できるツールを作ってみました。

  • ダウンロード
    • 最新バージョン：ver0.5.6
    • 動作にはAdobeAIRが必要です。
    • 前のバージョンからの更新履歴
      • マイリストの削除を取り消せないバグを改善
      • 静画の移動・コピー・削除に対応
      • 動画のマイリストコメントを編集出来るように改善
      • 選択中のマイリスト中の削除されている動画を「削除された動画」リストに移動する機能を追加
      • サムネイル画像をキャッシュするよう変更
      • 削除された動画のサムネイルは「視聴できません」画像になるよう変更
      • その他細かい修正
  • 操作概要
    • 起動後、ログインして左側のリストから任意のリストを選択すると右側のリストに動画のリストが表示されます。
    • 右側のリストの動画を左側のリストの好きなマイリストにドラッグアンドドロップすることで、マイリスト間で動画を移動できます。
    • 動画を選択した後ctrl+cキーでコピーし、マイリストを選択してからctrl+vで動画をコピーできます。
    • 動画かマイリストを選択した状態でdeleteキーで削除できます。
    • マイリストを選択したあとにF2キーでマイリストの情報を変更できます。
    • マイリスト新規作成ボタンを押してマイリストを新規作成できます。
  • 既知のバグ
    • -静画の移動・コピー・削除ができません。（ver0.5.6で改善）
  • 付けたい機能
    • 右クリック操作
    • 自動アップデート
    • マイリスト内動画検索
    • マイリストバックアップ


バグ取りや機能追加は順次していければと思います。
ソースコードは起動してから右クリックで閲覧できます。
ご意見等あればコメントかついったー@aTaGoまでお願いします。

※本ツールを使用してマイリストや動画が消えるなどの損害が生じたとしても当方は一切の責任を負いません。使用は自己責任でお願いします。


ツールを作成するにあたり、下記の記事を参考にさせていただきました。

Chromeでつぶやくだけのユーザスクリプト

chrome ユーザスクリプト twitter

id:con_mameの作った見てる！Now*1のChrome版が欲しいなぁと思っていて探したのですが、色々な機能の付いたものはあったのですが、単にそのページをつぶやきたいだけなので、そういうのは導入したくないなぁってことで作りました。
その名も「Watch Now! on Chrome」。

導入すると図のようにページの右上にTweet!と現れます。


ニコ動のつぶやくボタンを見てささっと作ったので、適当な作りです。
APIなどは用いず、ついったーのページに行って投稿します。
ページによってはTweet!が隠れたり、ページ外にあったりという素敵な仕様です。
また、うっとうしく感じても消せませんので、そういう場合はスクリプトをアンインストールしてください。

導入はこちらから。
（ユーザスクリプトの導入方法は昨日のエントリを参照）

ソースコードはこんな感じです。
お好みで使いやすいように改変するといいと思います。

// ==UserScript==
// @name           Watch Now! on Chrome
// @include        http://*
// ==/UserScript==
(function(){
	var title = document.title;
	var url = location.href;
	
	var val = 'Watch Now! ' + title + ' ' + url;
	
	var tweet = 'http://twitter.com/home/?status=' + encodeURIComponent(val);
	
	var div = document.createElement("div");
	div.style.position = "absolute";
	div.style.top = "30px";
	div.style.right = "10px";
	div.innerHTML = '<p><img src="http://nicotag.sakura.ne.jp/twiticon.png"> <a href="' + tweet + '" target="_blank">Tweet!</a></p>';
	
	document.body.insertBefore(div, document.body.firstChild);
})();

※アイコンはこちらのフリー素材のものを使用しています。

*1:http://d.hatena.ne.jp/con_mame/20090523

ニコニコ動画の検索ページに共起タグクラウドを表示するChrome用ユーザスクリプト作ってみた

ニコニコ動画 ユーザスクリプト php javascript

タイトルのユーザスクリプト作ってみました。

  • 概要
    • ニコ動のキーワード検索やタグ検索のページで、ページ内の動画についている全てのタグを収集し、タグクラウド状に表示します。
  • 動作環境
    • Chrome4.0.249.43で動作確認しています。未確認ですが、firefoxのグリモンでも動くようです。


本当は全部ユーザスクリプト上で処理させたかったのですが、クロスドメインの制約上、外部に置いたphpにアクセスしています。
あんまり使用しすぎるとphp置いてるさくらさんから怒られるかなぁ…。

ご意見等ありましたら、コメントやついったー@aTaGoなどでお願い致します。

ソースなどはそのうち公開するかもです。

ニコニコ動画のシリーズものの再生数の変移

ニコニコ動画

美希の天下創世*1を見ていて、シリーズものってどの程度視聴者が減っていくのか気になったので調べてみました。
すでに調査されてるかなと思ってGoogle先生で調べたのですが見あたらなかったので自分で調べてしまいました。
既にあったらお手数ですが、教えていただけると幸いです。


◎対象シリーズ
（完結・未完にかかわらず、im@s架空戦記シリーズ紹介wiki*2及び、ゲーム実況プレイ動画シリーズ＠まとめ*3から独断と偏見で選びました）
（）内の数値は第1話目に相当する動画の再生数です。

  • 美希の天下創世（65815）
  • 三国時代に挑んでみたいです（11377）
  • 三国夢想（16052）
  • 天海無用！三国志（4025）
  • im@s白馬将軍（6100）
  • アイドル探しの旅in戦国（7359）
  • くされ戦記（121024）
  • 閣下立志伝（34720）


◎集計方法
wikiの紹介ページよりマイリストページを取得、マイリスト内の各動画の再生数を取得
公平に集計するため、グラフにした時に見やすくするため以下のルールにより集計

  • 原則として本編のみを対象とする（マイリストに含まれていて、かつ、第○話と続いているものが対象。マイリストに含まれていても「外伝」となっているものは除外）
  • 各シリーズ1話目の再生数で正規化したものを図示（このため、グラフの縦軸は再生数でなく第１話から見た再生数の割合になる）


◎その他注意点

  • 対象シリーズが少ないのであまり当てにならないかもしれません
  • 統計の知識がないため、データの図示のみとなります（知識のある誰かが統計的に解析してくれると信じてる）


◎結果
グラフ1「アイマス架空戦記シリーズの再生数変移」


グラフ2「ゲーム実況プレイシリーズの再生数変移」


◎考察

  • 基本的にどのシリーズも第1話目から第2話目にかけて視聴者数は半分程度になる
  • 基本的にその後も減衰していき、最終的に第1話目の20％〜30％の視聴者が固定客として見るようになる
  • グラフから除外した「外伝」や「CM」といった動画の再生数はシリーズ本編と比較して少なかった
  • くされ戦記、ゆっくりレオンは異常（コメントで指摘を頂いて少し検証した結果、再生数が跳ね上がる動画は次の動画が投稿されるまで期間が長く、「次の出たかな？」と確認するために見に来る人が多い可能性がある）
  • 動画によっては投稿間隔が長く空き、失踪した後に戻ってくると再生数が跳ね上がるものもあったので、各話数の投稿間隔を基準としたデータを出しても面白いかも


◎まとめ＆雑記
第一話を見てその後見ない人が多いことに少し驚いた。
固定客やリピーターを増やすにはくされ戦記やゆっくりレオンを見るとその方法が分かるかもしれない。
両方とも面白いけど、そんな特別なことしてたかなぁ。
注意書きにも書いた通り、対象動画数少ないし、もっと大規模にデータ取ったら結果は違うかもしれないけど、本編だけを対象にしようとするとどうしても手作業による動画の仕分けが必要なのでちょっと厳しいかも。
長い期間使えばできるかもしれないけども。


とりあえずこんなところでしょうかね。
ご意見、ご感想お待ちしています〜。


−−−−−−−−−チラ裏−−−−−−−−−
コメントで指摘を頂いたことを検証してみて思ったけど、シリーズものにおける投稿間隔って再生数変化の重要なファクターなのかもしれないな。
今度調べてみよう。

*1:http://www.nicovideo.jp/mylist/2803200

*2:http://www9.atwiki.jp/mikan3594/

*3:http://www8.atwiki.jp/niconicojikyouplay/pages/1.html