カテゴリー別アーカイブ: Web技術

多人数同時参加型小説執筆サイト

IEだけJavaScriptの動きがおかしいケースが多くて悩みに悩んだけど、なんとか主要ブラウザでリアルタイムで同期される多人数同時参加型小説執筆システムができました。

まだまだ作りこまねばならない部分があって、公開は9月の終わりか10月1日。

毎日13時間ぐらいプログラミングの日々で疲れがたまりつつありますが、これからが正念場です。

さくらのVPSからさくらのVPSへ引越しました(!?)

ついでにブログデザインもTwentyfourベースにアップグレード!

環境を一新したくて、同じプラン・同じリージョンのさくらのVPSを借りました。悩んでハマるところはほぼクリアしたかなというところです。

サーバのチューニングも同時にしていて、このブログは3秒以内にはレスポンスを返せるようになりました。
すごい名前生成器」は1秒以内に返せます。
(全文検索エンジンを使っていないSQLiteですが、それでもかなりスピードでるなぁ)

参考になった本↓

  • 「ハイパフォーマンスHTTPサーバ Nginx入門」
  • 「マスタリングNginx」
  • 「ハイパーフォマンスWebサイト」

最初はChefでやっていたのですが、すぐに面倒になって手動で構築しました。
(3台ぐらいサーバあったらChefやるモチベーションになるのですが……)

1文字フォントの作り方(無料)

💩 (うんこ)を表示できるフォント(うんこフォント)を作ったので作り方を軽くまとめておきます。

用意するハードウェア

  • スキャナー(デジタルでフォントを描く場合はなくてもOK)

最初に用意するソフトウェア

  • Gimp
  • Inkscape

フォント(SVGファイル)作成手順↓

  1. 紙に文字を書く
  2. スキャナーで読み込む(300dpiぐらい)
  3. Gimpで2値化(白と黒に分けること)
  4. 気に入らないところがあればGimpで編集
  5. bmpファイルで保存
  6. Inkscapeを起動
  7. 「ファイル」→「ドキュメントの設定」→「カスタムサイズ」で正方形にする(1000px x 1000pxぐらい)
  8. bmpファイルをドラッグ・アンド・ドロップしてInkscapeで読み込み(埋め込み)
  9. 「パス」→「ビットマップをトレース」→「OK」ボタンを押す
  10. 「テキスト」→「SVG フォントエディタ」→「新規」ボタンを押す
  11. 「フォント 1」をクリックして「ファミリ名」を適当なフォント名(うんこフォントなら「Unko」とか)にする
  12. 「グリフ」タブをクリック→「グリフを追加」ボタンを押す
  13. 「グリフ 1」の「マッチング文字列」に作りたいフォントの文字を入力
  14. 「選択オブジェクトから曲線を取得」ボタンを押す
  15. 「プレビューテキスト」に作りたいフォントの文字を入力して描いたフォントが反映されているか確認
  16. 「ファイル」→「名前を付けて保存」でファイルの種類はInkscape SVGのままで保存

Inkscapeの操作は自作フォントの作り方|windowsで無料で作成!How to make Font in Inkscape.It’s completely free.が詳しいです。

SVGファイルから eot, ttf, woff ファイル作成手順(難易度高め)

  1. Linuxで「sudo apt-get install npm」する(パッケージ管理システムによって少し変わる)
  2. さらに「npm install -g svg2ttf」する
  3. 「svg2ttf from.svg to.ttf」でttfファイルを作成(もちろん適切なファイル名で)
  4. WOFFコンバータでttfファイルからwoffファイルとeotファイルを作成!(終了)

紙にかいた文字は↓ですが、線はもっと太くしたほうがいいです。
うんこ

↑のように線が細いと、小さく表示したときに文字が見えなくなるのでGimpでかなり太くしないといけなくなります。
unko

ファイルサイズは woff, eot, ttf で2,000から3,000 バイトぐらいになりました。

PerlでServer-Sent Events

サーバからPUSHされたイベントを受け取るやつ。(http://www.w3.org/TR/eventsource/)

Server-sent Event

最初リアルタイムで反映されなくて試行錯誤していたのですが、nginxの設定を変えたらリアルタイムで反映されるようになりました。(http://stackoverflow.com/questions/13672743/eventsource-server-sent-events-through-nginx)

コードは下の通りで「plackup」とかで立ち上げられます。

WebページへのDirectional Formatting Charactersの埋め込み

で、ブラウザ上でも「おえういあ」になったので、Webアプリとかでは「Directional Formatting Characters」の入力を削除しておくべきっすね。
(アラビア語やヘブライ語かけないと困るような場合は例外として)

実際はp要素のところはこう書いています。