ラノベ日記

ラノベの感想用

カテゴリ: JavaScript

専用レンダラを開発するのは、WEBブラウザ+CSS3縦書きを試してからですね。


#box1 {
-ms-writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
direction:ltr;
font: normal medium "メイリオ","MS 明朝";
}
rt{
font-size:0.6em;
}

これで、IE系、Webkit系(Chrome,Safari)の両方が縦書き表示になります。
AndroidのブラウザもWebkit系です


<p id="box1" class="box">
縦書き<br>
<ruby>日本語<rt>日本語</rt></ruby>行けるかな?<br/>
「かっこは」<br/>
(大丈夫)<br/>
(どうだろう)<br/>
”クオート”<br/>
"クオート"
</p>


ie9_tagegaki
chrome_tagegaki




実際のファイルを確認する



古いブラウザでは縦書き表示にならない可能性があります。
実は、問題がないわけではないのですが、実用になる気がします。

マンション立たない、仕事が無い…
受注管理やってる部署は定時で帰れることもある…

だとか、リアル勤務先が酷い状態になってるわけですが
技術系部署の仕事はあまり減りません。
開発費は減るけどね…

まぁ、マリ見て4期でも見て元気出そう。

Silverlightって何?

なんかFLASHみたいなものらしい。
だから、プラグインをインストールしないと表示されない。
→このあたりは同じ。

FLASH:.swfファイル→Silverlight:.xmalファイル

表示方法。
<object type="application/x-silverlight">
 <param name="source" value="test.xaml" />
</object>

サンプル
OBJECTタグで簡単に表示できる。
→xmalファイルを直リンクして直接表示させることはできない。

XAMLの中身は


<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="10" Canvas.Top="10" Height="200" Width="200"
Stroke="Red" StrokeThickness="10" Fill="SlateBlue" /> <Ellipse Canvas.Left="30" Canvas.Top="30" Height="200" Width="200" Stroke="Red" StrokeThickness="10" Fill="SlateBlue" /> <Ellipse Canvas.Left="50" Canvas.Top="50" Height="200" Width="200" Stroke="Red" StrokeThickness="10" Fill="SlateBlue" /> </Canvas>

円を描画って命令が3つ入ってる。
→ベクターグラフィックスって機能らしい。

まぁ、FLASH使ったことないので、全く分かりませんが。
FLASHをかなり意識したつくりになってるみたいです。

ギャルゲー専用Wikiの開発が約2ヶ月ストップしてるわけですが……

もうしばらく、基礎習得を続けます。
→次はSilverlight!
※最終的には、JavaScript、Java、FLASH、Silverlight版のクライアント
側を作って対応プラットフォームを拡大します。

で、Silverlight
何それ?て感じなのですが……
MSの資料読むと、更に意味が分からなくなってきます……

触込みとしは、FLASHの対抗製品。

SilverlightはJavaScriptで記述できるらしい。
※Silverlight2では、更にC#やJavaでの記述が可能になるんだとか……

で、ひたすら強調されるのが、WMAとかに対応してるてこと。
※Gyaoは、前回のサイトのアップデート時に、FLASHとSilverlight両方
を検討しており、大量の既存WMAコンテンツを活用できることが、
Silverlight導入の決め手になったらしい。


わけ分からないことが多いですが、分かってきたら、ここで報告しようと
思います。

ASP.NETを使ってみて思ったのですが…

C#か、VBでソース書くと、JavaScriptのプログラムが
生成される。

というよりも、JavaScriptなり、HTMLなりは
ブラウザの種別により、目的を達成するためのものが出力される。

何と言えばよいのか、うまい言葉が見つかりませんが
少し複雑な気持ちになります。

C#でJavaScriptを生成するプログラムを記述。
気持ち悪い。

材料高でマクドが最値上げ……
59円バーガーあった時に、42円まで下げても大丈夫!!
とか豪語してたのにな。

プレミアムローストコーヒー
100円 → 120円

ハンバーガーとチーズバーガーは値上げ無し

あの強気は何処へ行ってしまったんだ?


リアル勤務先は、値上げしたってのに
今期の売上げ目標下げたが…

まぁ、競合相手は値上げしてないしな。

このまま行くと、来年は完全に賞与無くなるだろう。

面倒な上に、通信量増加とかで何のメリットもありませんが……。
とりあえずの方針決定。

スクリプト上では、文字コードの変換は行わず、全て鯖側でやる。
ファイル名はシナリオソース中の日本語平文で鯖に問い合わせて
JSONのリストを取得
(この機能は既に組み込まれてるから流用できてウマー)

はぁ……
どうにかならないのでしょうか?

ここで大きな問題が発生。

可能な限りブラウザ依存を無くしたいってことで、
文字コードの変換とかは、極力サーバー側スクリプトでやってたのですが……
ここで大きな問題が。

シナリオソース(テキスト平文)を読みこんで、GUIベースの入力画面
に変換する部分。

・シナリオソース中のファイル名は日本語で書かれてる
・サーバー上のファイル名は、特殊な方法で数字列に変換されてる。

つまり、シナリオソースからファイル名を知る為には、JavaScriptで
日本語→ファイル名の変換処理が必要になります。
(画像のプレビューとかする為です)

サーバー側ではEUCで送信されてくるシナリオソースで
変換してるのですが……
ブラウザ上の文字列は、文字コードに関わらずUTF-16で処理されてるっぽい
(FireFox2)
まぁ、UTF-16ってのが決まってればまだ変換の方法はあるのですが
どの文字列で処理されるのかも、はっきり言って環境依存らしい。

ブラウザには特定の文字を扱う機能がないため、ファイル名が取得できませんorz

どうしたものか……
画像表示とかにリダイレクトでも使って日本語で指定できるようにするかな……
ぐは……

ギャルゲー専用エディタ 6/26日版!

http://ikinako.hp.infoseek.co.jp/cgi-bin/man_system/projects/example/gediter.html


ついに完成しました(毎度のことですが、詳細なデバッグはまだ……)
前回の更新からずいぶん、間隔が空いてしまいましたが、なんとか公開することができました。
#No深夜残業デーを作ってくれたリアル勤務先に感謝!
#→21時までには帰社できるはずなんだけど、21時の時点でほとんど残ってる…
○今回の更新
前々から言ってたGUIとCUIの統合に向けた第一歩!
1.シナリオライタさんに聞くと、シナリオは普通のエディタで
  書きたいって意見が大勢
2.エフェクトとか、画像の扱いはGUIが向いている

今回のポイントは
1.クリックで編集モードになる
2.右クリックでGUIモードになる
→うまく書き表せない……、実際に使って、意見もらえるとうれしいです。

ギャルゲー専用エディタって目標には近づけてるでしょうか?

試作画面2つ目です。 前回HTMLで書いただけだったデモページにJavaScript組み込んでます。 まぁ、リアル勤務先が納期前でぜんぜん作れてないので、コマンド選択時にオプション項目が変化するだけなのですがww。

ところで、今回書いてて思ったのですが……
Select項目にイベント付ける場合
 onChange="henkou(this,this.value)"
と書けるのですが……。

ソースコード読みやすくする為に、prototype.js使う場合は
 Event.observe(select, "change", henkou);
を使う事になります。

で、ここで困ったのが、引数が渡せない……
これって方法あるのでしょうか?

いろいろ試して、結局分からなかったので。
結局……
function henkou(evt){
 var elm;
 if(ua == IE){
  elm = evt.srcElement;
 }else{
  elm = evt.target;
 }
 //変更されたselect
 elm;

 //設定地
 elm.value;
}
って、何故かブラウザ互換性保つ為のコードが増えてるのですが……
私が知らないだけで、何か良い方法があるんですよね、たぶん。

http://ikinako.hp.infoseek.co.jp/link.html?man_system/projects/example/gediter.html