忍者ブログ

そうだったのかブログ

初心者がゲームつくりに、プログラミングに、悪戦苦闘するブログ。

【Javascript】たのしいalert()【初心者目線】


こんにちは。

javascript初心者の管理人ほしなとおるです。

自分達のホームページとかを、見た目で少しでも変な表示を減らして楽しめるものにするために、悪戦苦闘することになるわけです。

そうして学んだこととか遊んだこととかを残そうというわけです。

今回はalert()です。


alert()って

フリーのHTMLエディタで打ってます。
ジャバスクリプトをは、<head></head>の間か、<body></body>の間に記述すればいいらしいです。
でも、HTMLは上から順番に読み込まれて実行されるらしいので、読み込みが全部終わってからスクリプトを実行したほうがエラーが少ないだろうということで、<body></body>の最後に持ってくるほうがいいとか、記事がありました。なるほど。

さて、<script></script>の中に、alert( ); を記述すれば、アラート表示の完成です。
素晴らしい。

カッコ内にいれた数字とか文字とか変数とかが表示されるわけです。



alertは何に使うのか
わたしには、よくわかりません(笑)
でも、スクリプトのエラーチェックにいいみたいです。

javascriptは書いた上から順番に処理が実行される。
エラーを起こした処理の下は実行されない。

ということで、あちこちにalertを仕込んでおけば...

実行されないalertの上にエラーがあるというわけですね!
これがなるほど便利でした!とっても!

他にも、文字列と数字とか、変数と変数の計算とか、結果がうまくいってるのかな?というときに、alert表示させて確認する。とかやってました。

エラーが起きても、計算が変でも、なんか…静かなんですよね…。エラー表示がされないというか。そしらぬふりでだま~っている。そんな感じ。ただ「期待通りに動かない」だけ、という感想。




alertに変数をいれてみる

var とつければ、後に続く文字列が変数になるみたい。(正しくはきちんと検索してね!)

今回はvar strとして、strという名前の変数を多用します。

早速そこに文字列を入れます。文字列はダブルクォーテーションで囲みます。

alert(str);

と記述。そしてブラウザに読み込ませます。アラートが表示されました。簡単って素晴らしい。

…では、alert( "str" ); としたら?(ダブルクォーテーションでstrを囲んでみた)


変数strの中身ではなく、文字列strとして扱われました。strと表示されてます。

文字列扱いだと見た目のまんまに表示されるんですね。

まてまて、知ってるぞ知ってるぞ。

シングルクォーテーション(’)で文字列を囲んでいるjavascriptのブログ記事もあることを。

 

・・・どっちでもいいみたい。普通に表示されたし。

すると?

ダブルクォーテーションとシングルクォーテーションのちゃんぽんは?

alertは沈黙しました。

エラーですよね。絶対。だから、動かないんですよね?ね?


変数を足してみる、つなげてみる…引いてみる(!?)
alertだけの話ではない気もしますが。
変数を足してみます、プラス記号で。
文字列の場合は、つながります。
 
しっかりつながりました。

…疑問発生。引けるのかな?文字列。

引けませんでした。
しかし、alertは表示されました(!)

そして表示されたのはNaN。

…NaNって何?

ならば、ついでに文字列の入った変数の掛け算もやってみる。

結果は、NaNでした。
エラーじゃないってことかな…。


NaNのことを調べてみた
詳細は、詳しくビシッと説明してくれる記事を読みましょう!

ふわっと書くと…
・NaNは、Not-a-Number の略である。
・非数という、特殊な値である。仲間にundefinedとかnullとかがいるそうで。
・結果がおかしくなる計算をすると、NaNという値になる。

…えーっと。値が得られている。それなりに正しく処理されてるからエラーではない。
だからalertが動いている…んだよね?

そもそも文字列から文字列を引く、というのが計算としておかしい、ということか?

「りんご」から「り」を引いたら「んご」になる…ってのは、こりゃだめか。



変数の計算とかを思いつく限りやってみる
じゃあ、せめて文字列をいっぱいくっつけてみる。

くっつきました。
alertにも正しく表示されました。


数字が入った変数の計算と表示
変数に数字をいれてみました。(最初にやっときなさい!)

str1に5を。
str2に21を。
str1+str2をalertに表示させれば…。

26 が表示されました。

当然っぽいといえば当然っぽいですが、なるほど便利な感じです。


文字と数字をごちゃまぜにしたら?
変数に数字+文字を入れました。
それを二つ用意して、alert表示しました。

そうしたら、全部見たまんま表示されてます。
どうやら文字が混じると、全部文字として扱われるということかも。


数字と文字が入った変数で、引いてみる
変数 = 文字 + 数字 ならば。
変数 - 文字 = 数字 にならないだろうか?
引いてみよう。

結果はNaNが表示されました。

…文字が混じっちゃえば、引くなどということはできないのでしょうね。(初心者だから)



諦めずに引いてみる
まてまて。
変数 = 文字列 となってるなら。
alert( 変数 ー 文字列 ); とすれば。
結果は、ゼロとかヌルとか、なんかNaNでないものが表示されるのではないだろうか!?

…。
NaNでした。

いやいや、ならばいっそのこと。
変数 = 文字列 だから。
alert( 変数 ー 変数 ); とすれば。
ゼロとかヌルとか、NaNでないものが表示されるのではないでしょうか!?

…NaNでした。



どんな文字でも表示されるだろうか?
alertに表示できる文字とか、表示できない文字はあるのか?
そんな広大な疑問は、解決できませんから(笑)

まず全角の記号を並べてみました。
変数に !”#$%&’()=~|「空 白」 と入れてalertで表示させます。

ちゃんと表示されました。

次に半角の記号。
!"#$%&'()=~|[ku ha ku] と変数に入れてalertで表示させようとしました。
が、結果してアラートが表示されませんでした。(画面写真はないが)

んで、ダブルクォーテーションが半角もじとして表示されるか、試しました。
str=””””; 
としたら、こうなりました。

エラーですね。これは全くもって、エラーなわけです。

これは後でエスケープ文字として解決することになります。


同じ変数を繰り返し使って表示する
変数strに「飛んで」という文字列をいれます。
それをalertで5回足して表示します。

問題なくつながりました。
足すのはイイですね。


小数点以下の表示はどうなんだろう?
シンプルに、10 ÷ 3 の答えを表示します。

小数点以下第16位まで表示されました。
頑張りますね。


大きい数字はどう表示されるんだろう?
とりあえず、適当におっきい数字を変数にいれました。
いくつになるんだ?
・・・無量大数を超えてる?よくわかんないけど、大きいからいいか。
で、alert表示させてみると…。

何か、電卓で見たことがあるような、eがついた数字が表示されました。
よかったよかった(意味が分かってない)


長い文字列を表示させてみる
alertの表示枠って小さいような気もします。
長い文を表示させて、枠をはみださせることはできるのでしょうか。


…枠が広がってますね。
いくらでも表示させる気かな?

もっと文章を長くしてみると?

おっ!
アラート表示枠にスクロールバーが!
ぜーんぶ表示させるみたいです!頑張る頑張る!


エスケープ文字
前述した、文字列にそのままでは使えない半角文字がありました。
ダブルクォーテーションで囲まれたダブルクォーテーションとか。
(シングルクォーテーションで囲めば可能だって?なるほど、そうか!)
そういう文字を、表示させるのがエスケープ文字というようです。
改行もできるみたいです。

\n が改行。バックスラッシュn、ですね。
¥円マークで表示されることもあるんですけど・・・。今はまだ謎です。

検索したブログ記事にあったエスケープ文字をふんだんに使った例がこちら。

…。
うん。
改行は、使い勝手よさそうですね。あとは ” と ’ とか。
フォームフィード文字ってなんだ?タブ文字というのも謎。

特殊な記号ということでいいのかな?そのうち調べてみます。



おわりに

エラーチェックと計算結果の確認に、とても便利な機能だと感じます。
普通にconsoleに何かの表示をさせる記事を見ますが…。
consoleって、どこですか(汗)
という初心者。
alertは探さなくても出てくれるので、ありがたいなあ。と思います。

エラーチェックに使う機能ってだけじゃないんですよね?きっと。
ほんとは何に使うんだろう…。

そんなわけで、今回はここまでです。
ではでは。

参考記事
【JavaScript入門】今さら聞けない!NaNの使い方と判定方法まとめ
とほほのJavaScriptリファレンス 文字列(String)


拍手[0回]

PR

スマホでのwebページ表示崩れ、解決編

こんにちは、ほしなとおるです。

先日、スマホでwebページの表示崩れがありました。

自分がマークアップした自分らのホームページです。

「なおさなきゃ」

ということで、Javascriptに手を出して、直したんですが…。


実は最後まで、直らなかったのです(笑)



スマホのブラウザはChrome。

PCのブラウザもChrome。

デベロッパーツールでスマホ表示も確認して、よし大丈夫!ってとこまで来て…。

FTP。実機確認。

直らず。

何故!

ということで、半分諦め状態だったのですが…。


「他のスマホではどう見えるんだ?」
「他のブラウザではどう見えているんだ?」

と思い、寝床でPSVITA搭載のブラウザで見てみました。

 正しく表示されている。

そして別スマホ(ブラウザはChrome)で見てみる。

 正しく表示されている。


…なんだ?


ためしに問題のスマホで、chromeではないブラウザでみてみる。

 正しく表示されている。


おい。


 おい!

 
  おーい!!

どうも特定スマホの特定ブラウザで読み込んでいるときだけ、表示崩れが起こっていたと推測されるのであった。


とすれば、もうとっくになおっている、という時もあったのではないだろうか。

悲しきかな初心者。

無駄な時間を費やしたというわけか、いや、必要な勉強時間だったのかもしれない。ね、神様。


では、問題のスマホの問題のブラウザ(chromeだが)ではどうやったら正しく表示されるのか?


少し考える。

ブラウザの更新してみよう → 最新版だった。

キャッシュを削除してみよう → 表示がなおった。



 おい。



というわけで、最終的には『ブラウザのキャッシュを削除する』で解決しました。

この部分に関してはjavascriptもプログラムもHTMLも何も関係ないじゃん!

というわけで備忘録になったとさ。


何事も視野狭窄にならずに、常に冷静に、広い視野で行動しなさいってことですね(爆)

拍手[0回]

Chromeのデベロッパーツールは便利で面白い


スマホで表示されたホームページ画面。

位置ズレを起こしてました。

必死でなおしたんですが、そのとき便利だったのが…

そう、これです。




 Chromeデベロッパーツール



初心者の私は、デベロッパーツールなど知りませんでした。

Chromeが起動している状態で【 F12 】か、【 ctrl + shift + I 】でモードが起動します。



何やら、文字がいっぱい、謎の領域がChrome右側に現れました。

これがデベロッパーツールなのですな(?)




 初心者のデベロッパーツール



なにかにつけて初心者の私。

そのデベロッパーツールで何が便利だったか、記します。



1.スマホ画面が疑似的に表示される。



 デベロッパーツールを知らないとき。
  1 HTML、CSS、JSをなおす。
  2 PCのChromeで一応確認。
  3 FTPでアップする。
  4 スマホで表示結果を確認する。
 繰り返し。

 それが、こうなりました。
  1 HTML、CSS、JSをなおす。
  2 Chromeの疑似スマホ画面で確認する。
 繰り返し。

 さらに、こうなりました。
  1 Chromeで修正箇所を実験、確認をする。
  2 確認に基づいてHTML、CSS、JSを修正。
 繰り返し。

 FTPの手間、スマホ実機の確認の手間が大幅に減り、作業時間が短縮されました!
 たすかるわぁ。



2.数字とか、プロパティとか、いろいろいじれる


 
 デベロッパーツール内での話なんだと思いますが。

 「ここの数字を10から30にかえたら、どうなるかな?」
 「ここのスタイルの、このプロパティを外したら、どうだろう?」

 というようなことができました。

 エディタの起動、ブラウザでの確認作業の時間が短縮されたと思います。
 たすかるわぁ。



3.リロードを覚えたら手間が減った


 自分のPCにあるファイルを、自分のPCのブラウザで読み込んでいるわけで。
  
  1 ソースとなるHTML、CSS、JSをいじる。
  2 ブラウザをリロードする。
  3 表示が更新される。

 バカみたいな話ですが、HTML等をいじるたび新たにChromeを呼び出してタグを増やし続け、閉じていた私です。
 
 リロードするだけで更新が反映されるのは、結構な発見でした。


 PC上表示からスマホ表示に切り替えた直後はリロードしないと、正しいスマホ表示確認にならないみたい。

 リロードは【 F5 】で簡単です。
 たすかるわぁ。


…それくらいかな(笑)




 これから試したいデベロッパーツールの機能など



まず、何ができるのか、確認したいですね(笑)

表示された、どのWEBページでも同じようにデベロッパーツールで表示できるみたいなので…。

・いろんなページの中身をのぞいてみよう。
・のぞいたページの中身をいじってみよう。
・なんか楽しくお勉強できそうな気がする。
・学んだことを自分のHPに適用させよう。

使えば使うほど、もっと便利になることでしょう。きっと。




 参考記事




 Chrome デベロッパーツールの使い方まとめ

拍手[0回]

スマホ画面の左端からページがはみだしている


こんにちは。ほしなとおるです。

プログラムというかスクリプト初心者です。

Unityを頑張って勉強しようしていたら、Javascriptを扱う必要が発生しました。

せっかくなのでjavascriptも勉強だ。





 スマホ画面でホームページの左端が切れて表示される



通常、PCのブラウザで作成ページの確認をしてアップロードしてました。

が。

ふとスマホでそのページをみたら・・・

「左端が切れている!スワイプしても出てこないぞ!」

ページのコンテンツはさておいて、見れるべきものが表示されないのはとても気持ちが悪く、気になってしかたありません。

今回は『スマホ画面ではホームページを左詰めで表示させる』という記事です。





 原因はコンテンツを中央に配置したこと



なにも位置の指定をしなければ、普通にブラウザの左端上端からホームページは表示されるでしょう。

原因は、まさに「位置合わせ」でした。


PCのブラウザで閲覧するときに、コンテンツが中央に表示されるようスタイルシートに記述していたのです。

 #main{
  position: absolute;
  left: 50%;
  transform: translate(-50%,0%);
 }
 ※↑とりあえず該当部分抜粋。 

ブラウザ表示画面内の左上を基準にして(position:absolute;)ふたつのプロパティで、コンテナを画面中央に配置しました。
 left:50%;で、表示画面幅全体を100%として、半分(50%)の位置まで要素mainを右側にもってくる。
 そんでその位置から、transform:translate(-50%,0%);で、要素の幅全体を100%とした、半分を左側に戻す(-50%)。
 ※0%部分は、上下の指定なので、動かさないということ。これでmainが真ん中に。


このスタイルシートの記述が…


スマホの画面などの表示画面幅が、要素の幅(今回は<div id="main"></div>)よりも小さいときに、表示画面左端からはみ出すという現象を起こしたようです。




 中央配置は維持したまま、左端が切れないようにする



PCブラウザで閲覧するときのために、中央配置はやめたくない。
でも、スマホとか小さい画面のときは左端配置にしたい。

そこで初心者は感じました。「こういうときにjavascriptを使うのかな?」

HTMLとCSSはちょこちょこいじってみてたのですが、javascriptをいじるのは初めて。
面倒で寝てしまいたかったのですが、頑張ってjavascriptの使い方について検索しました。

二日ほど寝不足した結果、次のようにすればいいのか?と。

 ① ページを表示したとき、コンテンツの左端の位置を調べる。
 ② 表示画面左端からはみ出ていたら、コンテンツ左端を表示画面左端に合わせる。

このふたつが実現できれば、どんな画面でも気持ちよく表示できる気がする。

そのスクリプトがこちら。

いろいろ試行錯誤していたら、leftプロパティを1回だけ決めればいいんだと気づいた。

① 表示画面幅を調べて、左端から中央までの距離を出す。
② 要素の幅を調べて、真ん中までの長さを出す。
③ ①から②を引けば、leftに入れる距離(px)となる。(右にいって左に戻したのと同じ)
④ ③の距離がマイナスの時は表示画面左端からはみ出るということなので、if文を使って、はみ出るときはleftに入れる距離は、ゼロにする。
⑤ 距離に単位pxをくっつける。
⑥ leftに⑤をいれる。
⑦ あと、ブラウザの表示画面を変えたときwindow.onresizeで表示しなおす。



で、ブラウザの表示画面を小さくしてみた。


左端からはみ出ませんでした。うまくいったかな?




 ちゃんと表示されました



スマホ画面では左端がしっかり表示されるようになりました。
よかったよかった。





 参考記事 (お世話になりました)



とほほのJavaScriptリファレンス JavaScript の基本文法

Js-primaer 関数と宣言 

CMAN WEBページ作成リファレンス 「ウインドウサイズを取得」




拍手[0回]

【ゲームつくり帯・その3】ミニゲームをつくるのさ Unityとの対面

初心者(わたし)の、Unityインストール

 わたしは…VisualStudioを先にインストールした。
 そのあとにUnityHubをインストールして、Unityをインストールした。
 なんかVisualStadioのインストールを二回してしまったような…気がする。
 問題なく動いていますが、なんか不安。

こっちのほうがよさそうなんだけど…

 UnityにVisualStudioが同梱されてるみたいなので、Unityをインストールするときにチェックボックスで選択すれば、一緒にインストールしてくれるようです。
 
 Unityのダウンロードページです。
  ↓

 Unity をダウンロード https://unity3d.com/jp/get-unity/download

 
 参考 
  Unity 2017 + Visual Studio Community 2017 のインストール
  Unity 2018 をインストールする

Unityと対面、そして固まる

環境が出来たので、unityを起動します。(UnityEditorというべきなのかも)

そして…

うん。

次はどうすりゃいいのか(汗)

完全に予習不足です。
そこで、役に立つのがチュートリアル。


Unityを起動すると”Learn”というタブが出てくるので、そっからチュートリアルをダウンロード。
チュートリアルは実際に画面をいじりながら進めてくれます。
わかりやすいのでは、ないでしょうか~。

自分の興味のあるチュートリアルをダウンロードしてやってみるだけでも得るものが相当あるのではないでしょうか。順不同という意味で。

ゲーム制作ブログとか

 あと、先人たちの残しているゲーム開発に関するブログとかを読みました。

 「おおざっぱに、なにをどうしてどうすると、形になるんぞなもし」
 という概観をつかむため、とりあえず形になったミニゲームの作り方のブログを読みました。

 
 【Unity2D】Unityで2Dミニゲームを作るチュートリアル(第1回)
  ↑
 かなりお世話になりました。
 解説に使っているプロジェクトがダウンロードできるので、実践しながら流れを追っていけます。
 ※細かいスクリプト的なことはわからなくても流れを追えました。

 【Unity道場スペシャル 2017札幌】最適化をする前に覚えておきたい技術 -札幌編-  
  ↑
 何もわからないまま、みました。「なんかすごそうだなぁ、なんだこれ」って。
 ここでUnityちゃんという存在らしきものを初めて知る。
 その後、数々のブログ記事でうっすらその断片が見え隠れしたりした。楽しい。

 Unity User Manual (2018.2)
  ↑
 Unity公式ページによるユーザーマニュアルで、公式チュートリルと解説なども。
 ただ、英語によるチュートリアルなどが普通にあって引きそうになる。

 そうこうしているうちに、自分で画面にオブジェクトとやらを設置できるようになりました。


でも覚えたことの踏襲をするので精一杯な時期。まだ楽しくないです。

この不自由な感覚は「やーめたっ」となる危険を予感させます。

できるだけ『好き勝手にいじって疲れたら他の楽しいことをする』ほうがいいと思います。
嫌々やってると疲れと焦りなどで、続きません。
でも、着実にできることが増えていると感じましたよ。

こうして、画面をいじる → 関連ブログ記事で調べる → 疲れて休憩する →最初に戻る ということを繰り返すうちに…だんだん楽しくなってきます。

そして。

初心者のつくったゲームが完成したわけなのです!



おめでとう自分!ありがとう自分!
自己満足から始まるゲーム作りなんだから、まずは自分を思い切りほめましょう!
形にするのが第一目標!!

とまあ、そこまでくるのに1か月くらいかかったと。
おっさんの1か月ははやいですね。

***

さて、そんなわけで、企画・設計 → 開発環境構築と各種作業 → 完成 に至りました。
この記事では概観のみで、詳細が一切ありません。

それは、

『詳細を逐一記事にすると、おそらくいつまでたっても終わらない』

からです。

というわけで、次回からは、詳細についてのあれこれを、細かい記事にしていきます。
ゲーム制作の流れからすると順不同になりますが、発生した問題や状況に対する対処などを個別に扱います。
汎用的な記事としてなるべく読みやすく、シンプルにしていきたいと思ってます。

拍手[1回]

プロフィール



HN:
ほしなとおる
性別:
男性
自己紹介:
PCで創作活動してます。
作画ツールはFireAlpaca、GIMP。
最近UNITYをお勉強中。

フリーエリア

P R