名称がとうとう決定しました。詳しくは、下記をご参照ください。

サンプルステージリスト福田直人さん作の、サンプルステージが~~Canvasまさお~~Litttter正男で楽しめます。スマホからも。スコアランキング対応。さらにさらに、MasaoJSSも移植可能に！

まさおメーカーCANVASCanvasまさおが作れちゃいます。スマホからでも。背景レイヤー、4ステージと地図画面、作業マップ移動の新機能が追加！

MasaoJSS使用方法まとめ~~Canvasまさお~~Litttter正男でのMasaoJSS導入方法です。元のものと違って、移植されていないメソッドもあります。

これらのリンクをクリックしても何も起りません。ブックマークに登録しておき、Canvasまさおでプレイしたいステージのあるページで使います。

まさおソース変換器Applet要素やParam要素になっているソースを、~~Canvasまさお~~Litttter正男専用のコードに変換します。
各種設定項目初期値基本的にFX16のものを引き継いでいますが、音声関連では~~Canvasまさお~~Litttter正男独自のものもあります。

＜！重要！！重要！＞ライブラリ名称の扱いについて＜！重要！！重要！＞

とある男の失言により、世界を巻き込んで大規模な論争が繰り広げられた「CanvasまさおかJSまさおかの大論争」(以下、大論争時代)では、まるで、「Dead or Alive」というかのように「Canvas or JS [ or Lite or Mario or GACHIHOMO]」という言葉が多用され、そうこうしているうちに各国が核戦争に突入したため一瞬のうちに世界は焦土と化しました。

この大論争時代の反省を踏まえて、「正男同盟」は「正男連盟」と名を改めて設立し、その一番最初の議題として名称問題に決着を付けることとなりました。
そこで、常任理事サイトであった「閃光の星」の提唱した、「今までにない全く新しい名前(通称：新展開)」として、「Litttter氏のサイト閃光の星などで活動しているRYO氏作成のライブラリを用いたまさおコンストラクション、略してLitttter正男」を演説台に立った途端にまくしあげまくり、その雄弁なスピーチに心打たれた各サイトの全権大使らが、のちの評決において賛成:31 反対:1 という驚異的な結果を導き(通称：大逆転)決まったものです。これをやぶったものは小麦アレルギーになるので注意してください。

うそです。いつもの

CanvasまさおLitttter正男対応の正男サイト一覧LastUpdate:2015/3/23

当サイト含め、まだ移行できていないステージもサイトごとにいくつかあります。

A Cloudy Day	12/1
閃光の星
過疎村	12/1
むぎの手記
Cugry's Box
The Only Place	12/28
くるりんの住居	1中旬
urotaichi corporation	1/18
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!のウェブサイト	1/23
スーパー正男～GMS～	2/12
新緑の草木島	2/15
A storeroom of ennki	3/2
SUPER DIAMOND SMASH	3/3
平末号の会ver2	3/4
ueyukiのページ	3/8
qgshp	3/8
星霜の時	3/9
Masao World Adventure	3/10
宵闇舞踏館	3中旬
総合雑学鵺帝国	3/23

多度津観測所LastUpdate:2015/3/19

~~Canvasまさお~~Litttter正男に関連した更新情報を掲載しています。

JSまさお置き場公式の、最新版~~JSまさお~~Litttter正男置き場です。
GitHub mc_canvas開発ページです。ソースなどが公開されています。
Canvasまさおアップローダ今までの~~Canvasまさお~~Litttter正男のファイルがUPされます。(古いです)
JSまさおアーカイブこれまでの~~Canvasまさお~~Litttter正男の全バージョンの保管庫です。Cugry's Boxからの提供となります。

15/ 3/15 仮想パッドメーカーが公開。
15/ 3/12 ver.　0.05.5が公開。
	  → JSSの不具合の一部を修正と、追加 (setPatternImageの第1引数が8の場合の, setBossHP)
15/ 3/ 5 jsmasao_0054が公開。
	  → ライブラリの名称を CanvasMasao から JSMasao に変更 起動時の名称にも対応
	  → 仮想パッド(スマホでの操作に使用)のスタイル変更ができるように ほか
15/ 1/31 mc_canvas_0053が公開。
	  → スコアランキング使用時に打てない文字があるものを修正
	 mc_canvas_v28_002が公開。
	  → ゲーム画面のサイズを変更できるように
15/ 1/25 mc_canvas_0052が公開。
	  → ゲーム画面のサイズを変更できるように
	  → ゲーム画面をクリックして起動させられるように
	  → MasaoKani/MasaoKani2 版のブックマークレットが追加、ほか
15/ 1/24 Side がCanvasまさおに全面対応
	  → 従来のApplet版は分離
15/ 1/23 mc_canvas_0051が公開。
	  → まさお拡張クラス使用時の不具合を修正
15/ 1/17 mc_canvas_0050が公開。
	  → MasaoJSSに対応
	  → RYOさん作の新作ステージも
14/12/31 MasaoMakerCanvas02が公開。
	  → 背景レイヤー含む編集が可能に
	  → 地図画面、4ステージそれぞれの編集が可能に
	  → ステージ編集の作業を行う画面を簡単に移動できる小窓が新装
14/12/24 mc_canvas_0040が公開。
	 mc_canvas_v28_002が公開。
	  → それぞれランキング用のハイスコア取得が可能に
	  → ブックマークレットの更新
	  → RYOさん作のステージも
14/12/23 mc_canvas_v28が公開。
	  → まさおコンストラクション2.8に対応
	  → 両方のverに対応したブックマークレットの完成
	 勝手にcanvasまさお変換ツール(PHP版)が公開。
	  → アドレスを入力すると、そのページの正男をCanvasまさおに変換。
14/12/21 mc_canvas_0030が公開。
	  → ページ内のステージを自動で置換するように、など
	 MasaoMakerCanvasが公開。
	  → javascript版のまさおメーカーでスマホでも動作
	 (記録始め)
	―これより前は無し―

※管理人の周辺で、何か発するレーダーのようなものに引っ掛かったものだけを書いてます。
※過度な期待はしないでください。

CanvasまさおLitttter正男の導入

ここでは、~~Canvasまさお~~Litttter正男でのステージ作成・変換方法、加えてその際に注意が必要なことを紹介しています。

ステージ作り

まさおメーカーCANVAS: マリ...おっと、皆さんご存じのまさおメーカーで~~Canvasまさお~~Litttter正男に対応したものが早速リリースされています。
デザインも従来のものと違うのに加え、javascriptで作られているのでスマホでも利用することが出来ます。; まさおメーカーCANVASFX16のみ
まさおメーカーJSCugry's Boxからの提供となります FX16と2.8両方に対応
※名前は違いますが、中身は大体同じです。
Side: Sideで正男を作っている方向けの、~~Canvasまさお~~Litttter正男対応のランタイムはurotaichi corporationで他のランタイムと同様に公開されています。
ダウンロードしたランタイムは、Sideの起動画面のその他 → ランタイムマネージャ → 新しいランタイムのインストールから、
ランタイムパッケージを読み込んでください。
それ以外: ~~Canvasまさお~~Litttter正男のバージョンは下りますが、従来のソースを本来の~~Canvasまさお~~Litttter正男用に最適化する変換装置もあります。Readmeファイルにある使用例3,4で使うものです。
param要素を使わずに文法をしっかりと押さえておきたい人に推奨、でしょうか。

従来のステージ(Applet版)の変換①

あなたのHDD奥深くに眠る正男も、再びプレイ可能に!?
ここからは、もうステージとして出来ている正男(Canvasでない)を変換する方法を簡単に紹介します。早ければ3分で出来ちゃうと思います。

まず、~~Canvasまさお~~Litttter正男本体をダウンロードし解凍しておきます。
mc_canvas_0054 はFX16を元に、mc_canvas_v28_003 はまさおコンストラクション2.8を元にして作られています。必要なものを選んでください。

次に、動かしたい正男、きっとそれはHTMLファイルになっていると思われますが、それを解凍した後のフォルダにコピー、または移動します。
ファイルの正男がFX16か2.8かの区別を確認しておいてください。それぞれのフォルダへ移します。

そしてメモ帳などのファイルを編集できるもので開き、head要素(<head>と</head>の間)に

FX16なら

<script type="text/javascript" src="CanvasMasao.js"></script> <script type="text/javascript"> CanvasMasao.Game.replaceAll(); </script>

2.8なら

<script type="text/javascript" src="CanvasMasao_v28.js"></script> <script type="text/javascript"> CanvasMasao.Game.replaceAll(); </script>

と追加して上書き保存します。これで勝手にapplet要素内のステージや設定を読み込んで、~~Canvasまさお~~Litttter正男に変換してくれます。やった！
他にも、いくつか置換方法はあります。Readmeファイルを各自参照してください。

画像が表示されないときは、その画像を同じフォルダに移したりステージ設定を確認してみたりしてください。

従来のステージ(Applet版)の変換②

基本的な変換方法は↑で紹介したとおりですが、中には、それはもう大量のステージを変換したいという方もいるかと思います。
しかし、その時に一つ一つファイルを開いてなりしては面倒かもしれません。そこで、ここでは、複数の htmlファイルでもまとめて一括で変換できる方法の紹介です。

というわけで、今回使用するソフトは、「複数のHTML＆テキストファイルを一括置換 TextSS.net」です。(公式サイト)
htmlファイルの中身を書き換えて、~~Canvasまさお~~Litttter正男に変換、となるわけです。とても使いやすく、↓の解説が無くても、大体できちゃいそうなくらいです。
以下、作業の手順です。公式の解説の方も懇切丁寧で大変に詳しくなっているので、そちらもご参照ください。

1. ダウンロード&解凍

公式ページの「ダウンロード」から最新版(5.21)をダウンロードします。
インストールは不要で、ファイルを解凍(展開)したら、TextSS.net.exe から本体を起動します。

2. 変換したい正男のある htmlファイルを登録する

htmlファイルを選択してドラッグ&ドロップで「検索と置換の対象ファイルリスト」に乗っけます。
このとき、ファイルを一個ずつ乗っけようとせずとも、関係のないファイルが一緒に選択されている状態でも大丈夫です。
乗っけても、上の方に指定している拡張子以外のファイルは自動で弾いてくれます。フォルダの中身を全て選択して移動させるだけで大丈夫でしょう。
ここで、ファイルごとに .bak(バックアップ)ファイルが作成されますが、一応、変換が終わるまで取っておいた方がいいかと思います。
※リストのチェックボタンは全てついているようにしてください。

3. 変換する文字列を指定

リストに載せきったら、右下の「次へ」で置換する文字の設定画面へ移動します。
ここで、~~Canvasまさお~~Litttter正男に変換するときのコード(ソース)を指定します。

＜設定例＞

検索する文字列→置換する文字列に変換される感じです。設定項目の追加は、右下の方にある「行の追加」から出来ます。
「置換方法」は、「文字列の置換」で行います。(なお、正規表現を使うときはPerl5準拠になります。)

検索する文字列1: </head>
→ 置換する文字列1: <script type="text/javascript" src="CanvasMasao.js"></script>
<script type="text/javascript">
CanvasMasao.Game.replace("applet1_id");
</script>
</head>

検索する文字列2: <applet
→ 置換する文字列2: <div id="applet1_id"

検索する文字列3: </applet>
→ 置換する文字列3: </div>

↑の設定例のようにApplet要素をDiv要素に変換することで、プレイするときに出てくる警告みたいなのをなくすことも出来ます。
出力の時の文字コードも調整できるので、併せて設定しておくといいですね。(具体的なやり方はここでは取り上げません)
パターンリストも登録しておくと、次からも楽です。

4. いざ置換

設定が済んだら、再度、右下の「次へ」を押します。
ここでは、実行するときの置換具合を確認するかどうかの設定を行えます。
「置換の実行方法の指定」は、「すべてのパターンの検索と置換を行う」としたうえで、
「置換候補の確認」は、「表示しない」とすれば何も操作すること無く置換が終了します。
実際、Canvasまさおへの変換はコードだけで行うので、一つ一つ確認する必要はないですから大丈夫でしょう。
右下の「開始」で実行されます。

5. 置換結果の確認

置換が行われると、その時点で内容を書き変えて上書き保存します。元のデータのままのものを残すのならば、はじめから複製しておくのがいいです。
リストの「ステータス」欄が、「置換完全成功」になっていたらOKです。そうじゃなかったら、その項目を選択して下のプレビューから確認できます。
「次へ」がありますが、もう変換は済んでいるので進まないでください。
そのままソフトを終了すると、バックアップファイルも消してくれます。
これで、同じディレクトリに CanvasMasao.js を置けばプレイできる ... はずです。

なにぶん使い始めたその日に書いているものなので、内容が違っているかもしれませんがご了承ください。(ご指摘いただければ修正します)
他にも、さらに簡単に使えるソフトがまたあれば、紹介する予定です。

音声ファイルについて

元の、Applet版の挙動はほぼ完全に移植している~~Canvasまさお~~Litttter正男ではありますが、動作の仕方にはいくつか異なる点があります。
その中でも大きな違いとしては、使用できる音声ファイルが .au や .mid であったところが .mp3 .wav .ogg となったことでしょう。

これは、Canvasまさおでは HTML5 で新たに採用された、Audio要素を利用して音声を再生しているためで、
これまでのように、一つの効果音には一つの音声ファイル(.au や .mid)をアップすればいい、とはいかなくなりました。

というのも、最新であるがゆえに Audio要素についてブラウザごとに対応がまちまちとなってしまっており、拡張子によっては再生されないものがあって、
同じ効果音を再生するにも、より多くのブラウザで再生できるようにするにはそれだけ多くのファイルを用意する必要性が出てきてしまったからです。
音声ファイルごとに再生がなされるブラウザは、以下の通りです。

ブラウザ	Google Chrome	Internet Explorer	Mozilla Firefox
.mp3	○	○	△
.wav	○	×	○
.ogg	○	×	○

参考：Wikipedia(HTMLオーディオ)

Opera や Safari は　Google Chrome で見た場合と大体同じなので省略しました。
この表を見た限りでは .mp3 と、 .wav か .ogg をアップすれば大体のブラウザで音声が再生されそうですね。

.ogg と .wav を比較したとき、よく言われるのが「.wavの方がファイルサイズが大きい」ということで、CanvasまさおでもBGMでは初期値で読み込まないことになっています。
.wav は高音質に出来る、という利点がありますが、レンタルサーバを利用していて容量が気になるという場合には .wav は避けた方がいいのかもしれません。

(参考) 拡張子ごとのファイルサイズ比較gameover.mp3 : 6.9KBgameover.ogg : 5.7KBgameover.wav : 13.6KB

ここからは、管理人直選の音声変換に使えるソフトを紹介していきます。主に、.au や .mid からの拡張子の変換ができるものです。
拡張子変えるくらい、ファイル名の変更からできるわーいなんて言わずに、是非使いましょう。

EcoDeco Tool(えこでこツール): .au からの変換に。(.mid からの変換には使えません)公式HP
Zipファイルを展開し、.exe を起動して変換したいファイルをまとめて(複数ファイル可)ドラッグするだけ、とシンプルな操作が特徴。
上記の、.mp3 .wav .ogg 全てに変換することが出来ます。それも、割と高音質で変換してくれるらしいです。音量の調整や保存フォルダの変更も出来ます。

.mp3 の変換方法が2つありますが、デフォルトで使えるのはFraunhoferの方です。
Lameの方は新たにファイルをダウンロードするなどひと手間かかりますが、より高音質にしてくれます。(かなり高音質のものにすることもできて、普段使いにも最適!?)
iTuens: .mid からの変換に。(難あり?)
単に管理人のPCに入っていて、調べたら一応は変換できるよ! とのことだったので使ってた、程度でそこまで推す理由は無いのが本音です。が、せっかくなので。
まず、iTuensで .mid を再生するには QuickTimePlayerが必要だということで、わざわざPCにインストールしました。
あとは、1つ1つ変換するものを選択してはクリック、の繰り返しで済みます。少し面倒でしたけど。

これについては、調べればもっといいものがあるかもしれません。(もしあれば、連絡ください。書き足します。)

CanvasまさおLitttter正男の解説

既存のスーパー正男をJavaではなくてJavaScriptで動かすべく開発されてきました。

今までとの違い／特徴

~~Canvasまさお~~Litttter正男というだけあって、今までのapplet要素ではなくcanvas要素でゲームが動作します。
もしあなたがJavaの最新版をインストールして使っている場合、正男のようにapplet要素で動くものは色々な制限がかかっていました。が、これが無くなります。
これは、正男の動作にJavaではなく、JavaScriptを利用しているためです。この両者は名前が似ているようで実は全然違うのです。

そして、そのおかげでスマートフォンでもプレイが出来るようになっています。
ふと思い立った時に、例えばそれは駅で電車を待っていたり、なかなか着かないエレベーターを待っていたり、そんな時。

逆に、HTML5 に対応していない古いブラウザでは、canvas要素を使用しているCanvasまさおは動作させることが出来ません。プレイには、最新のブラウザに乗り換えてください。
加えて、ブラウザの設定でJavaScriptを有効にしていない場合も動作しませんので、必ず設定を有効に変更するようにしてください。

また、~~Canvasまさお~~Litttter正男には「まさおコンストラクションFX Update16」対応のものと、「まさおコンストラクション2.8」対応のものの2種類あります。
両者には様々な異なる点があり、これを取り違えると移植失敗となりますのでご注意を。(FXはmc_c.jar、2.8はmc_zipを使ってるという違いがあります)

ブックマークレットについて

JavaScriptのプログラムそのものをブックマークに登録しておき、開いているページでブックマークを呼び出して登録したプログラムを実行するというものです。

･･･上の説明がよく分からんというのはさておき、
今回では開いているページ内にあるAppletで動作する普通の正男のステージを、~~Canvasまさお~~Litttter正男に置換するというプログラムをブックマークに登録しておくということです。
肝心のコードは↑の薄い青色のリンクがそれになっています。リンクを選択した状態で右クリックし、リンクのコピーなどからブックマーク登録のアドレス欄にコピペしてください。

注意→変換しようとするステージが以下の条件に当てはまる場合、変換されません。

code属性が MasaoConstruction.class (または MasaoConstruction) 及び MasaoKani/MasaoKani2.class でないもの該当減りました
Applet要素ではなく、Object要素を使ってステージを表示しているもの
フレームを使ったページ(フレーム内のステージのリンクに直接アクセスすれば通常通り出来るようになります。)