2月
24
2009
2

HTML のみで携帯から Twitter する

ちょっと携帯から Twitter に投稿してみたいと思って、色々と方法を調べてみました。
携帯用の Web インターフェースや、メールから投稿できるもの、専用アプリなどいろいろあったのですが、どれもいまいち自分のニーズにしっくりきません。

  • よく分からんサービスに ID とかパスワードを預けたり送ったりするのは不安だ
  • 単につぶやきたいだけだから、多機能である必要はない
  • そもそもパケホじゃないので、なるべく無駄なパケットは使いたくない

なので、自分のニーズにしっくりくるものを自作することにしました。
もちろん、PHP やら Perl やらを使ってごりごりやることも出来るんですが、簡単に (x)HTML だけで事が済みそうだったので、HTML だけで作成することに決定。

HTMLソース

下記の xhtml ソースを任意の名前で文字コードを UTF-8 として保存し、任意のサーバにアップします。
携帯からアクセスして、「投稿」ボタンを押すと、最初は BASIC 認証が聞かれるので、Twitter で使用している ID とパスワードを入力します。
以上で Twitter への投稿は完了です。

ひたすら軽く軽くシンプルにをモットーとして作られているので、投稿結果の処理が入っていません。(というか、HTML だけでそこまで出来ません。)
投稿後は端末上で「未対応のフォーマット」的なエラーになるかと思います。
アップしたページを画面メモなりお気に入りなりで携帯に保存しておけば、必要最小限のパケットで、Twitter に投稿することが可能です。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title>モバT</title>
</head>
<body>
<div>モバT</div>
<form action="http://twitter.com/statuses/update.xml" method="POST">
<input type="text" name="status" /><input type="submit" value="投稿" />
</form>
</body>
</html>

制限事項

UTF-8 ＋xhtml が読めない端末だと使用できません。最近の 3G 携帯なら特に問題ないでしょう。
BASIC 認証に対応していない端末では使用できません。これも最近のものなら特に問題ないようです。
au では使用できません。ページのエンコードが UTF-8 であっても、フォームの送信は Shift_JIS で行うという謎仕様のせいです。

参考ページ

Written by Otchy in: Development | タグ: , ,
2月
19
2009
3

右下または左下においた画像に文字列を回り込ませるHTML/CSS

普通、HTML で画像の回り込みというと、右上か左上に画像があって、そこに文字列が回り込むという感じです。これは簡単です。画像に対して float: left; すれば OK です。
しかし、右下か左下に画像を固定して、文字列がそこにたどり着いたら回り込むという動作は一筋縄ではいきません。
画像をブロックの左下に配置してテキストを回り込ませる方法を考える というページで色々と考察されていて、ふむふむと思ったのですが、この方法では、テキストの量が変わるたびに調整が必要になってしまうので、テキストの量が動的に変わる場合には対応しにくいです。
何より、文章をぶった切って画像を入れるというのはどうもスマートではありません。

色々と試行錯誤してみたところ、以下の方法で実現できそうだったので、公開してみます。

<html>
<head>
<style>
#block {
    width: 200px;
    height: 200px;
    overflow: hidden;
    font-size: 10pt;
    border: solid 1px #666;
    padding: 0.5em;
}
#bar {
    float: right;
    width: 1px;
    height: 100px;
    background-color: red;
}
#img {
    float: right;
    clear: both;
    width: 100px;
    height: 100px;
    background-color: blue;
}
</style>
</head>
<body>
<div id="block">
<div id="bar"></div>
<div id="img"></div>
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
</div>
</body>
</html>

このソースを保存して開くと、以下のような見た目になります。
わかりやすいように色分けした div で表現していますが、赤線は実際には透明、青い四角は実際には画像だと思って下さい。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

#bar の部分とか美しいマークアップとは言えないですし、画像に文字が被ったりとかしてますが、微調整してやれば十分使い物になるかと思います。
最初は絶対実現できないんじゃないかと思ったので、出来た時は嬉しかったですね～。

Written by Otchy in: Development | タグ: , ,
« Newer Posts

Powered by WordPress | Aeros Theme | TheBuckmaker.com