[Enchant.js]スマホで全画面表示した際、Viewportのサイズに画面を合わせる方法

Enchant.jsで沼にはまったところがあったので、ここにメモしておきます。

Enchant.jsをはじめとして、HTML5ベースに作ったWebアプリをスマホとかで全画面表示（ネイティブアプリっぽく表示）するとき、 metaタグでviewportとかの設定をすると思います。

ただ、このときに、ゲーム画面が全体にフィットしないという問題が起こりました。
スマホの解像度に合わせて作ったにも関わらず...

結構これで悩んだのですが、いろいろ試したり調べたりするうちに、「viewportで表示した際、innerHeightを取得すると、最初の一回 目はアドレスバーを考慮した数値が出てくる」ということがわかりました。

viewportでの表示の時と、普通のブラウザの時の表示で何が異なるかというと、主にアドレスバーの有無です。

ブラウザで表示した際のinnerHeightが500だったとします。
viewportで表示すると、アドレスバーがない分これより値が大きくなりそうですが、一回目の表示の際は500となることがわかりました。

で、その状態でリロードすると、innerHeightの値が500より大きい、すなわち、アドレスバーが消えた状態の高さが取得できました。

実際には、最初に読み込んでからしばらく時間が経ってからinnerHeightを取得すれば、正しい高さが取得できるようでしたので、次のような コードを実装すればこの問題は解決できると思われます。

var game = new Core(540, 930);

var CenterMove = function (core) {
    var scale = Math.min(window.innerWidth / core.width, window.innerHeight / core.height);
    core.scale = scale;

    var stage = document.getElementById('enchant-stage');
    stage.style.position = 'absolute';
    stage.style.top = (window.innerHeight - (core.height * core.scale)) / 2 + 'px';
    stage.style.left = (window.innerWidth - (core.width * core.scale)) / 2 + 'px';
    core._pageX = (window.innerWidth - (core.width * core.scale)) / 2;
    core._pageY = (window.innerHeight - (core.height * core.scale)) / 2;
};

setTimeout(function () {
    CenterMove(game);
}, 55);
  

最初にgameオブジェクトを作成します。

正しい高さを取得するため55ms後にCenterMove関数を呼び出します。

ここでは、縦、横においてそれぞれ、拡大縮小率を計算し値が小さいものを選んで、それをgameオブジェクトのスケールとします。

その後は、画面を中央に表示しています。

以上です。

Enchant.js製のスマホ向けアプリを横向き（縦）回転の表示に強制させる方法！また、画面を中央に表示する

はい、こんにちは。
@CortanMathです。

今回は、JavaScript製の軽量ゲームエンジン「Enchant.js」についての記事になります。

別にEnchant.jsを使用しない場合においても応用できると思います。

で、内容は、「JavaScriptでスマホ向けアプリを作成した際、画面の向きを固定する」「画面を中央に表示する」といったものになります。

Enchant.js製のスマホ向けゲームで、画面横向き（または縦向き）のみでプレイしてほしい場合などがあると思います。
ただ、標準のままだとスマホの傾きにより画面が回転し、ゲーム画面サイズが小さくなってしまったりしますよね。

ということで、「画面の向きを判断し、もし目的の向きでなかった場合、その向きに端末を回転させるよう促す」ということを今回やりたいと思います。

最初のころは、何があっても強制的に画面を横向き（縦向き）に表示したいと考えていました。

「画面の向きを判定」　⇒　「もし目的の向きでなかった場合、ゲーム画面を無理やり90度回転させ、調節する」

という予定でしたが、スプライトとかの回転はできても画面自体の回転は良くわからなかったのと、画面横向きでプレイさせたい際に、縦にもった状態で横 向き表示する必要はないので、ただ警告を出すだけにしました。

また、それに加えて、Enchant.jsのゲーム画面を中央に表示するようにしたいと思います。
これをしないとゲーム画面は常に左上につめられて表示されるため、縦横比の異なるスマホとかでは、左右の余白のバランスがおかしなことになってしまい ます。

スマホによって余白ができてしまうのはどうしようもないので、せめて、全体のバランスが良くなるようにしたいと思います。

では、やっていきましょう。

Enchant.jsでゲーム画面を横向き（縦向き）に

これを行うためにも、まず、スマホの向きが「今、縦なのか横なのか」を判断する必要がありま す。

書き方はいろいろあるのですが、今回はその中でもシンプルな書き方をします。

if (window.innerHeight > window.innerWidth) {
            //縦向きだった場合
        }

こんな感じです。

画面の幅と高さを出して、その長さの比較をするという簡単なやり方です。

で、この縦向きだった場合に、「端末を横向きにしてください。」みたいなメッセージを出せばよいわけです。

実際にメッセージ表示を実装するとこうなります。
gameオブジェクトがロードされたところに書きます。

var alert = new Scene();
alert.backgroundColor = 'black';

var message = new Label('端末を<br><br>横向きにして<br><br>持ってください。');
message.color = 'white';
message.font = '50px "Arial"';
message.textAlign = 'center';
message.x = (game.width - message._boundWidth) / 2;

alert.addChild(message);

if (window.innerHeight > window.innerWidth) {
    game.replaceScene(alert);
}

こんな感じです。

これで最初ゲームがロードされた際、もしスマホが縦向きだったら、横向きにしてくれという警告を出しています。
また、最初から横向きだった場合は、標準のrootSceneが読み込まれます。

rootSceneにゲーム本体を用意すればよいわけです。

それが嫌な人は、上記のコードのif分にelseを足し、そこにゲームのメインシーン（もしくはOPシーン）を読み込むように書けばいいと思います。

ただこのコードのままだと問題があります。

ロード時に端末が横向きだった場合は良いですが、縦向きだった場合、メッセージだけ表示してそれ以降なにも進みません。

端末を傾けて横にしたら～、という処理が必要なわけです。

その部分はこう書きます。
window.onload = function(){}; の外にでも書いてください。

  
  window.addEventListener("orientationchange", function () {
    location.reload();
});
  

こんな感じです。

端末を90度傾けたら、みたいなイベントのようです。（正確には違うかもしれない）
だから、横から縦にしても、縦から横にしても発生します。

で、そのイベント発生後、ウェブサイト自体をリロードしています。

そうすると先ほどのコードがまた読み込まれ、今度は、ゲームがスタートするという仕組みです。

リロードするというのはあまり賢い書き方ではないと思いますが、コードを簡潔にし、減らすために採用しました。

これで、画面の向きが解決しました。

画面を中央に表示する

今度はゲームの画面を中央に表示します。

  
  var game = new Core(640, 360);

var CenterMove = function (core) {
    var stage = document.getElementById('enchant-stage');
    stage.style.position = 'absolute';
    stage.style.top = (window.innerHeight - (core.height * core.scale)) / 2 + 'px';
    stage.style.left = (window.innerWidth - (core.width * core.scale)) / 2 + 'px';
    core._pageX = (window.innerWidth - (core.width * core.scale)) / 2;
    core._pageY = (window.innerHeight - (core.height * core.scale)) / 2;
};

CenterMove(game);

こんな感じです。

gameオブジェクトを渡し、それをちょうど画面真ん中に来るよう移動しています。

以上です。

ではさようなら。
またお会いしましょう。

もしよければ、LINEスタンプの方もよろしくお願いします。

https://line.me/S/sticker/7072968

無言で何かを伝えよう とする白男くん - LINE スタンプ | LINE STORE

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。

お そらくいつでも使えるLINEスタンプ集

iPhone・iPad(iOS)やAndroidとPCとの間でファイルの転送を行うなら「Send Anywhere」が超簡単でおすすめ！！

皆さん、こんにちは。

今回は、スマートフォン・タブレットとパソコン間でのファイルのやり取りについて書いていこうと思います。

「スマホで撮った写真をPCに取り込みたい」、「パソコンからスマホに音楽を入れたい」みたいなことありませんか？

そんな時、スマホとパソコンでファイルの送受信ができれば、便利ですよね。

スマホやタブレットとPCなどで、ファイルのやり取りをする方法はいくつもあります。

代表的なものだと、こんな感じですね。

• メールで送信・受信する
• オンラインストレージを使用する
• 専用アプリを使用する

この他にも、iPhoneやMacといったApple製品に限りますが、AirDropを使用 するやり方などもあります。

Androidの場合、USBケーブルでつなげば、ファイルのやり取りが簡単にできますが、iPhone・iPadだとiTunesが必要になってき たりします。

これは、面倒ですね。

メールは一見簡単そうですが、ファイルサイズの上限があったりなどして、ファイルの転送にはあまり向きません。
（そもそもメールとは、テキストのやり取りが基本ですから）

オンラインストレージ（例えば、Google DriveやOne Drive、iCloud、Dropboxなどです）を使用する方法というのも手軽なようで、デメリットも大きいです。

オンラインストレージは、ファイルの保存場所として使用するのが一般的です。

なのに、ファイルの送受信に使用しようとすると、いちいち送受信したファイルを消さなければ、 オンラインストレージ内が様々なファイルでごちゃごちゃになってしまいます。

これは大変ですね。

ということで、今回は「専用のファイル転送アプリ」を使用してみることにします。

このアプリですが、スマホ側はiPhone(iPad)・Android、パソコン側はWindows・Mac OS・Linuxに対応しているので、OSに応じて区別する必要がありません。

では、説明に入ります。

Send Anywhereについて

今回、ファイル転送に使用するのは、「Send Anywhere」というアプリ・サイトです。

こちらのアプリでは、ネット回線を利用して、ファイルの送受信を行っています。

ですので、PCやスマホはWifiなどにつないでおいてください。

iPhoneやAndroidなどのスマートフォン側には、こちらのアプリをインストールしておいてください。

Send Anywhere (ファイル転送・送信)

ESTmob Inc.無料posted withアプリーチ

続いてパソコン側ですが、こちらは特にソフトウェアをインストールしておく必要はありません。

下記のリンクにブラウザでアクセスしてください。

https://send-anywhere.com/ja/

ブラウザで使用できるからこそ、OSに依存しないのですね。

これで準備は整いました。
実際にファイル転送を行ってみましょう。

Send Anywhereでファイル転送を行う

「スマホからPCにファイルを送信」、「PCからスマホにファイルの送信」に2パターンに分け て説明していきます。

とは言っても、やり方はほぼ同じです。

いや、まったく同じですね。

今回はテストなので、こちらの画像ファイルをスマホ・パソコン間で転送してみようと思います。

ちなみに、僕はスマホ側にiPad(正確にはタブレットですね)、PC側にはWindowsを 使用しております。

PCからスマホにファイルを送信

まずは、パソコンのブラウザで先ほどのサイトを開きます。

送信というところをクリックして、送信したいファイルを追加します。

複数のファイルがあれば、すべて追加しておきましょう。
まとめて送信できます。

一通りのファイルと選択出来たら、送信をクリックします。

するとこのような暗証番号とQRコードが表示されます。
これをスマホ側で入力すると受信できるわけです。

が、これには期限があります
10分以内に作業を済ませてください。

では実際に受信してみます。

スマホで先ほどのアプリを開いてください。

受信待ちの画面を開いてください。

ここで、先ほどの暗唱番号を入力、もしくは、QRコードを読み取る、のどちらかを行うことでファイルの受信ができます。

せっかくスマートフォンにはカメラが付いているわけですから、QRコードを使用した方が簡単でいいと思います。

しばらくすると、ファイルが完全に受信できます。

これで大丈夫ですね。

次は、今のと逆のことをやっていきます。

スマホからPCにファイルを送信

まずは、スマホでSend Anywhereのアプリを開きます。

送信というところから、転送したいファイルを選択します。

同様に、転送したいファイルをすべて追加した後、送信をクリック。

ここで表示されている暗証番号をパソコンのサイト側に入力して、受信してください。

以上です。
簡単でしょ。

非常に手軽にできますので、スマホ・タブレット・PC間でファイルの転送をしたいと考えていた方は、ぜひお試しください。

では、さようなら。
また次回、お会いしましょう。

ブログ・ホームページでアプリ紹介するなら「アプリーチ」！！その使い方も（例：Blogger）！

皆さん、こんにちは。

ブログやホームページなどのサイトで、スマホアプリを紹介したいことってありますよね。

ただ、普通にアプリストアのリンクを貼ろうとすると、iPhone(iOS)用のApp Store、Android用のGoogle Playストアの2つのリンクを貼らなければなりません。

正直、面倒くさいですよね。

iPhoneのアプリだけ、もしくは、Androidのアプリだけを紹介したいというのであれば、別にこれでもいいのですが、ほとんどの場合は、2つ 同時に表示したいはずです。

そんなときに便利なのが、今回ご紹介する「アプリーチ」というものです。

これを使用することで、紹介したいアプリのiPhone版、Android版へのリンクを画像付きで、作成することができます。

アプリを紹介しているサイトのほとんどが、このアプリーチというものを使用しています。

また、これとアプリ用のASPを組み合わせることで、アプリがインストールされたら報酬が手に入る、なんてこともできますので、とてもおすすめです。

アプリーチはWeb上のサービスなので、ブラウザで簡単に使用できます。


今回は、基本的な使い方を説明します。
とはいっても、超簡単です。

アプリーチの使い方

まずは、アプリーチのサイトにアクセスしましょう。

アプリーチ

では、まずは、CSSの設置からですね。

アプリーチでアプリの紹介HTMLタグを生成すると、「新コード」と「旧コード」の2種類のソースができます。

このどちらかを、サイトのHTML編集のところに貼り付ければいいわけですが、この2つには違いがあります。

旧コードは、紹介タグのデザインCSSも含んでいるので、これを単体で貼り付けるだけで、使用 することができます。
が、その分コードが読みにくくなります。

一方、新コードは、HTMLタグとCSSが分離してあります。
そのため、このコードとは別に、CSSを設定しておく必要がありますが、コードはその分、読みやすいです。

ですので、今回は、新コードを使用していこうと思います。

1.CSSをブログの設定に貼り付ける

こちらのCSSというところをクリックして、でてきたCSSコードをコピーしてください。

そうしましたら、ブログサービスのカスタムCSSなどに貼り付けて、保存してください。

Bloggerならば以下の画像のところになります。

以上で、下準備が終わりました。

2.アプリ検索

紹介したいアプリ名を検索します。

そうしましたら、その下に、iPhoneとAndroid版のアプリが正しく表示されていることを確認してください。

もし、違っていたら、「複数検索」というところをクリックして、アプリを指定し直すことができます。

3.設定

ここでプレビューを見ながら、好みに設定してください。

4.ソースの貼り付け

新コードを、ブログのHTML編集に貼り付けてください。

これで完成です。

実際、このように表示されます。

LINE

LINE Corporation無料posted withアプリーチ

以上です。
今回は触れませんでしたが、アフィリエイトにつなげることも簡単ですので、興味がある方はぜひ、お試しください。

では、さようなら。
また、次回お会いしましょう。

トリプルタップによるAndroidの拡大操作がウザい？！消し方を解説。

こんにちは。

スマートフォンもってますか？
今どきは、ほとんどの人が持っているスマートフォン。

一般的なスマホには、iPhoneとAndroidがありますよね。

今回は、そのうちAndroidについてのお話です。

トリプルタップに拡大操作

Androidユーザーに人に聞きます。
（ちなみに、僕はAndroidを使ってます。）

こんな経験ありませんか。

こうやってWebサイトを見ているときに、
なんかの拍子で、画面を何回かタップしてしまい、

（※写真はイメージです。）

こう、なっちゃった。

おそらく、一度は経験しているのではないでしょうか。

結構この機能、鬱陶しいですよね。
思ってもいないのに、勝手に拡大されて。

具体的に何が困るかというと、

LINEで、スタ連・スタ爆ができない

これは、結構大きいダメージです。

友達に、スタ連しようとして、スタンプを連続でタップしたら、その部分が拡大されて、スタンプを送れないんですもの。

不便極まりない。

キーボードで早打ちできない

これも迷惑ですね。

キーボードで連続で早打ちしようとすると、拡大されて、入力が中断されてしまいます。

不意打ち

ちょっと意図せずに、画面を連続で触ってしまったときです。

なんか急に画面がでっかくなって、びっくりします。

この機能の消し方（解決策）

この機能、簡単にOFFにすることができます。

まず、「設定」を開き、

「ユーザー補助」を選択、

そしたら、「拡大操作」をタップ、

初期設定では、「ON」になっていると思うので、

「OFF」にしてしまいましょう。

これで完了です。
もう、トリプルタップで、拡大されることはありません。

皆さんも、もし、この機能が邪魔だと感じるのであれば、OFFにしておくことをおすすめします。

それでは、また。
さようなら。

もしよければ、LINEスタンプの方もよろしくお願いします。

https://line.me/S/sticker/7072968

無言で何かを伝えよう とする白男くん - LINE スタンプ | LINE STORE

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。

お そらくいつでも使えるLINEスタンプ集