iPad、iPhone用のJava学習アプリ、Jedona(Compiler for Java)

マニアックな事で困った時には、反射的にネット検索をかけるクセがついてるけど、アプリ検索という手もあった。正直、アプリというものは種類が多過ぎるし、ハズレやバグ(欠陥)ですぐ削除することもよくある。ただ、これは今の所、有難い限り♪ 人気がさっぱりないけど評価が高いのは、言語が英語のみだからだと思う。

  

200118a

  

Jedona(ジェドナ?)。Compiler for Java(コンパイラー・フォー・ジャバ)。自分が入力したジャバのプログラムを、機械が読み取れるように変換(コンパイル)して、表示してくれるアプリ。

   

先日、パソコンで普通にJavaを導入しようとしたら、コンパイルまでは何とかなったのに、最後の表示でつまづいてしまった。コンパイラーと読み取りアプリのバージョンの不適合みたいで、どんどん事態がこじれて行きそうだから、とりあえず断念。

  

ただ、やっぱり気になるからアプリを検索したら、1つ目はほとんど使い物にならなくてすぐ削除したけど、2つ目のこれがヒットだった。広告は出るし、データ保存ができないみたいだけど、課金なしで色々練習できるから、超初心者にとっては十分だ。動きも軽くて、変なエラーもこれまで出てない。私の入力ミスを除けば♪

   

   

     ☆     ☆     ☆

200118d

  

最初は黒い背景で、ちょっとだけややこしい入力例が出て来たけど、とりあえず無視。まずはお約束の「Hello World!」の表示プログラム。画面右上の再生ボタンをタップすると、素早くコンパイルして、表示成功。1行目のクラス名で1回失敗した後♪ ファイル名に合わせないといけないのかな? 一部の文字の色は、自動的に付けてくれてる。

   

200118e

   

ただ、黒い背景だと、Windowsのコマンドプロンプトみたいで難しそうに見えるから、設定の下側(Editor Theme)で白(White)に変更。ついでに入力と出力の文字(Font Size)も大きくした。英語といってもこの程度で、実際、年齢設定も4+(4歳以上?)になってる。

   

200118c

  

続いて、足し算とかけ算。この辺りは、別に覚えてるわけじゃなくて、例の学習アプリ「Progate」の説明に従ってるだけ。一応、数や文字は自分で少し変えたりしてる。

  

200118f

  

5+3と、2×7をやらせると、8と14が2行で表示された。ちなみに、printlnではなく、単にprintと入力すると、同じ1行の中で表示されてしまうから、普通は避けるところだ。   

200118g

  

  

    ☆     ☆     ☆

200118h

  

さらに、文字列の「足し算」。2つの文字列「blogger」「Tenmei」をそれぞれ二重引用符でくくって、足し算すると、2つがつながって表示される。

  

200118i

  

そして、眠いから早くも最後。変数を2種類設定して、それぞれ代入して表示させたら、エラーが二重に出てしまった♪ 下が最初の私の入力。整数を表す int 型の変数「number」を設定して、7を代入して、表示。次に、文字列を表す String 型の変数「name」を設定して、Tenmei を代入して、表示。以下、間違い探しをお試しあれ♪

  

200118k

  

驚いたのは、どこが間違ってるのか指摘してくれたこと。これがAI教師というものか。無料で素早く正確。ちょっと不愛想だけど♪

   

200118l

  

「5行目にエラーがあって、セミコロンを忘れてる。7の右側」といった指摘なのだ。具体的で、いいね♪ ただ、もう1つのミス(Tenmeiの引用符を忘れてた)の指摘はそこまで分かりやすくはなかった。

  

200118m

  

    ☆     ☆     ☆

とにかく2ヶ所直ちに修正して、出力成功。パソコンで本格的に導入するのは大変な作業で結局失敗したけど、タブレットのアプリなら、あっという間だった。もちろん、いずれPCに再挑戦する予定(予定は未定♪)。

  

さあ、今週末は私もセンター試験の「受験」があることだし、そろそろ寝ることにしよう。ではまた。。☆彡

   

        (計 1569字)

| | コメント (0)

プログラミング用Javaのインストール後、実行で失敗、「javaとjavacのバージョンが合わない?」トラブル

「Java(ジャバ)」は公式サイトから簡単にダウンロードできる・・というような話は前からあちこちで読んでたけど、たぶん実際には苦戦するだろうなと思って、今まで先延ばしにして来た。

  

実際に昨夜からチャレンジしてみると、予想以上の大苦戦で、もう4時間も経ってる。寝る時間だから、簡単に報告記事のアップだけしとこう。

      

ネット検索すると、同じようなトラブルがあちこちで報告されてる。ただ、今のところ、私の場合の問題を解決してくれる方法を、初心者用に簡単に説明してくれてるサイトを発見できてない。どこも単語や操作のレベルで敷居が高過ぎる説明だったり、話が省略されてて具体的にどうやるのか分からなかったりするのだ。

    

   

    ☆     ☆     ☆

さて、私は超初心者で、プログラミングというものは高校教科書のBASIC(ベーシック)をちょっと勉強した後、Progate(プロゲート)という学習アプリで少し学んだだけ。プロゲートでJAVAも演習してるけど、そこでは入力するだけで画面左側に結果が表示される。一番最初のプログラムの導入の話が無いのだ。

    

同じプログラミング学習でも、HTMLなら、メモ帳に書いてHTMLファイルとして保存して、ブラウザで開くだけ。以前やったBASICは、あらかじめプログラムをインストールしたけど、こんなに苦労することは無かった。

    

私がやった事を簡単に時系列に従ってまとめてみよう。まず、JAVAのインストール(のつもりだった)。確かに公式サイトの手続きは簡単で、Windows10パソコンにインストールするのも簡単。

   

ところが、これはプログラミングとは関係なかったらしい。「Java SE Development Kit」(システムエンジニア開発ツール?)というものをOracle(オラクル)HPからダウンロードしないといけなかったらしくて、私はトップに載ってたバージョン13をインストールした。「jdk-13.0.1_windows-x64_bin」というファイル名。

   

その後、環境変数というものを設定。やり方はあちこちに書いてるから省略。要するに、スタートメニュー → 設定 → 「環境変数」の検索 と進んで、「ユーザー環境変数」または「システム環境変数」を新規に作成する。ここがトラブルの原因(の1つ)になってるのかも。

   

   

     ☆     ☆     ☆

その後、スタートメニュー → 設定 → Windowsシステムツール → コマンドプロンプトと進んで、黒い画面のコマンドプロンプト(直接的な命令を書きこむ画面)を立ち上げる。

   

で、あちこちに書いてるように、javaのバージョンと、コンパイル用のjavacのバージョンが表示されることを確認。コンパイルとは、コンピューターが読めるようにファイルを変更すること。

  

200110b

  

そして、「Java」フォルダ内に「test」フォルダを作って、そこにメモ帳で作った簡単な java ファイル、「s

ample001.java」を保存(上図)。これはHTMLの時と似たような作業。

    

200110c

   

その後、コマンドプロンプトで「javac sample001.java」と命令すると(上図)、黒い画面では何事も起きなかったように見えるけど、新しいファイル「sample001.class」が出来てる(下図)。

  

200110d

    

ここまで、既に10回くらい躓(つまづ)いてるけど、それはクリアできたことだし、今日は省略。例えば、本当は関係ないのかも知れないけど、Javaの保存フォルダをデフォルト(初期)設定から変更したりした。それより問題は、最後のファイル実行なのだ。上手く行ってれば、「Hello World」という挨拶文が表示されるはず。

   

   

    ☆     ☆     ☆

ところが、「java sample001」と指示を入れると、長い英語のエラー表示が出てしまった。下図はその最初の部分で、全体の3分の1ほど。

  

200110a

   

Error: A JNI error has occurrd, please check your installation and try again ・・・・・・

   

要するに、実行しようとしてる対象のファイル「sample.class」のバージョンが新し過ぎると書いてるのだ。

    

それは新しいプログラム(Java Runtime)でコンパイルされたファイルで、バージョン57。ところが、そのファイルを動かそうとしてる主体の側のプログラム(jre ?)はバージョン52までしか認識できない、とのこと。

   

   

     ☆     ☆     ☆

そこで、JAVA関連を全て削除して再インストールしたけど、また同じエラー表示。「jre-8u231-windows-i586-iftw」というプログラムをまた公式サイトからダウンロードしたけど、何も変わらず。

   

以前の環境変数の設定が残ってしまってるからそれを変更するとかいう話も見かけたけど、普通の画面だと、選択はできても何も操作できなくなってしまってる。それをコマンドプロンプトで直接書き換えるというような話もあったけど、超初心者がそんな事まですると、マイナスのリスクの方が遥かに高い。

  

似た話で、昔作られたファイルやフォルダが変な場所に残ってるから、その名前を書き替えたら上手く行ったという報告もあった。ただ、これも同じ作業を私がやると、そもそも昔のファイルやフォルダは発見できない。もちろん、エクスプローラーで隠しファイルの表示をした上で、手作業と検索と両方で調べてみたけど、怪しいものは見つからないのだ。

   

   

    ☆     ☆     ☆

今、選択肢として残ってる方法は、jdkのヴージョンを古いものに変更することのみ。公式サイトで、少し古いもののダウンロードも出来るようになってる。ただ、名前や勤務先まで細かく登録してオラクル・プロファイルというものを作らないといけないようだし、こんな事までしなければいけないの?・・という疑問の方が大きい。

     

公式サイトから最新のものばかりをほぼ同時に導入して、どうしてバージョンが合わないなんてエラー警告が出てしまうのか? そんなに繊細な拒否反応を示すのなら、そもそも普通に社会で使う時にもトラブルだらけになりそうなもの。

   

というわけで、疲れ果てたから、もう寝よう。やっぱり、特殊な世界だなと改めて思い知らされた。案外、プログラミング用に安いパソコンを買って、一から全てやり直すのがベストかも。時間と労力をムダに使い果たして、深い溜息をついた所で、今日はそろそろこの辺で。。☆彡

   

       (計 2627字)

| | コメント (0)

HTML&CSS初級編4~コンテンツ作りで完成、プログラムとページの全体図

開成中学の生徒がプログラミング言語を創って表彰されてる時に、大人が単なる初級記事を書くのも微妙だけど、小市民は我が道を歩むとしよう♪

  

191220a

   

学習アプリ「Progate」のHTML&CSS初級編がようやく終了。全く消化不良のまま、丁寧な誘導に従って、目標のページが完成した。上がアプリの図。下は私が自分で書き直したプログラムをブラウザ(IE)で開いた様子。微妙に違うのは、ブラウザの種類や設定の問題か。大見出しの活字と送信ボタンのデザインが違う。

   

191228a

   

なお、これまで書いた関連記事3本は、以下の通り。

 

 プログラミング学習アプリ「Progate」~HTML&CSS初級編

 HTML&CSS初級編2

 HTML初級編3~CSS、メモ帳で簡単作成

  

      

    ☆     ☆     ☆

さて、今回最後に作るのはメインの内容で、ページ中央のカラー画像と、すぐ下の入力フォームの箇所だ。作る箇所全体のhtmlファイルはこんな感じになる。

  

191228b

   

時間に追われて急いで入力したら、数ヶ所間違えてて、間違い探しで余計に時間を使うハメになってしまった。タグのカギカッコが1個不足、二重引用符が1個多過ぎ、英単語の綴りの間違い。反省しよう。

  

作る箇所全体のCSSファイル(スタイルシート)は下の通り。

  

191228c

   

   

    ☆     ☆     ☆

まず上半分の画像の箇所、「学べるレッスン」のエリアの入力。同じパターンが4回続くから、始めの2回だけ見る。改行を入れて見やすくした。

  

191228e

   

最初に、「section-title」(セクション・タイトル)で小見出しを入力。次に「contents-item」(コンテンツ・アイテム)として、4つの画像の保存場所を「img src」タグで指定、画像の下の名前はpタグで入力。画像の場所は、プロゲートがアマゾン・ウェブ・サービス(aws)で確保してるものだ。場所の入力が長くて面倒だから、当初は2ヶ所も間違えてた。

   

CSSファイルは次の通り。htmlの各要素には、border(ボーダー:初期状態では表示されない枠線)が取り囲んでて、その内側の余白領域がpadding(パディング:枠と要素の間に挿入する空きスペース)、外側の余白がmargin(マージン)。こうした構成をボックスモデルと呼ぶ。

       

191228f

   

191228g

   

   

    ☆     ☆     ☆

続いて、下半分の入力フォームの箇所、お問い合わせのエリアの入力。下がhtmlファイルの該当箇所。一番下のdivタグは、「main」部分全体の締めくくりで、その下はもう「footer」(末尾)に変わる。

  

191228h

  

imput(入力)とかtextarea(テキスト入力箇所)のタグは非常に簡単だけど、送信ボタンの指示が分かりにくい。classの指定を省いて、単に「input type・・・」と簡略化してもいいようだ。

   

CSSファイルは下の通り。余白や枠の指定が面倒に見えるけど、慣れの問題か。同レベルの操作なら、普段のブログ記事作りや画像処理で普通にやってることではある。

  

191228i

   

    ☆     ☆     ☆

今回作った箇所だけ改めて表示しとこう。こういった話を知ってしまうと、自分のブログ記事の入力をアレンジしたくなるけど、「生兵法はケガのもと」。実力と自信を付けるまでは自重しよう。

   

191228d

     

今後、自分ひとりでこのプログラムを再現できるように復習する予定。ではまた。。☆彡

  

       (計 1344字)

| | コメント (0)

HTML初級編3~CSS(カスケード・スタイル・シート)、メモ帳で簡単作成

遂に、2日連続でプログラミング記事を書くまでになってしまった。正直言うと、単に前日の記事が途中までしか書けなかったということ♪ 時間の制約もあるし、1本の記事が長くなってしまう。

   

191220a_20191221151701

  

今、目指してるのは、上のようなページの作成。学習アプリ「Progate」の課題だ。前日の記事で作ったのは、htmlファイルの途中まで。下は、メモ帳で私が書いたプログラム。

   

191220i_20191221151901

   

長くて複雑に見えるけど、実際に入力してみると意外と早かった。1行あたりの字数が少ないし、型にハマった入力だからか。アルファベットや記号の入力を、PCが学習してくれればもっと速くなるのに、なぜか今のところ学習してくれない。後で調べてみよう。

  

上のメモ帳プログラムをhtmlファイルとして保存して、ブラウザで開くと、日本語だけ文字化けしてしまう。そこで、ブラウザのエンコードで日本語(自動選択)を選ぶと、下のように正しく表示された。この後、色付け、全体のレイアウト、細かい配置などを、cssファイルで味付けしていく。Windows10付属アクセサリー、「メモ帳」アプリを再び使用。

    

191220j2_20191221152101

   

   

     ☆     ☆     ☆

先に、私が作った完成図を掲載しとこう。学習アプリで分割表示されてる画面を、1つにまとめて自分で入力したもの。1行空けを消しても、かなり縦長になる。ただ、htmlファイルと同様、cssファイルの入力も意外と早く終了した。

   

191221b2

      

では、上から順に、超初心者の目線で少しずつ解説して行こう。まず、全体についての指示。

   

191221c

  

font(フォント:活字)で、「Avenir Next」という種類を指定。また、2ヶ所あるリスト部分で、箇条書きの先頭を示す「・」(点)は消す。list-style(リストスタイル)で、「none」(ナン:無し)と指定するだけ。

   

  

     ☆     ☆     ☆

続いて、薄い青緑色のheader(ヘッダー)部分。

  

191221a

 

191221d2

   

各部分の指定は、すべて「.」(ドット、ピリオド)から始まる。「.header」で、background-color(背景色)とcolor(文字の色)とheight(領域の高さ)を指定。

  

「.header-logo」は、ヘッダー冒頭の「Progate」という文字のこと。floatでleft(左寄り)として、文字サイズは36ピクセル。padding(空き間隔の挿入)で「20px 40px」と書いて、上下と左右の間隔を指定。

  

「.header-list」は、箇条書きの3項目をまとめた呼び方で、3つ全体を左寄りに指定。次に「.header-list li」も「fload:left」と指定して、3項目を左から並べていく。これが無いと、項目が縦に並ぶのだ(後で登場)。

   

   

    ☆     ☆     ☆

続いて、main(メイン:中心部)。まだ今回は、4色の画像や入力フォームは扱わない。

  

191221e

    

191221f

  

まず、全体の上下で100ピクセル、左右で80ピクセル、間隔を空ける。次に「.copy-container h1」(大見出し)と、「.copy-container h2」(小見出し)の文字サイズを指定。最後に、大見出しの最後の点だけ、赤い色を指定。あらかじめhtmlファイルで、spanタグで点を挟んでおいて、このcssファイルでは「copy-container span」と書く。

  

ちなみに、container(コンテナー)という英単語は、入れ物という意味。ここでは、「copy-container」で「文字を入れる部分全体」を指してる。入れ物だけじゃなくて、中身の文字データも込みで。

   

   

     ☆     ☆     ☆

191221g

   

191221h

   

そしていよいよ、footer(フッター:末尾)。まず、このエリア全体の背景色、文字の色、高さ、上下左右の空き間隔を決定。「footer-logo」や「footer-list」は、前のheaderの時とほぼ同様。ただし、「float:right」だから、リストの3項目はエリアの右側に配置される。

     

最後に、「.footer-list li」の「padding-bottom」で、箇条書き3項目の下側のスペースを20ピクセルに指定。headerの時とは違って、ここに「float:left」と書いてないから、3項目は縦に並ぶ。

   

191221i

   

これで、上図まで出来たから、残りはあと少し。次回、メインの図と入力フォームを入れて完成させるとしよう。素直にちょっと嬉しいけど、実は図書館でhtml関連の本を探すと、少ししかない。要するに、プログラミングの中でも簡単すぎて、わざわざ解説本を沢山並べるほどのものでもないわけか♪

   

ともあれ、今日の所はこの辺で。。☆彡

   

   

   

cf.プログラミング学習アプリ「Progate」~HTML&CSS初級編

 Progate2~Java初級編

 Java初級編2~Progate3

 HTML&CSS初級編2

   

       (計 1953字)

| | コメント (0)

HTML&CSS初級編2~プログラミング学習アプリ Progate

1年4ヶ月ぶりの挑戦となる、HTML&CSS初級編の学習。要するに、ウチみたいなブログも含めて、サイト表示の元になってる記述を学ぶわけだ。どう書けば、どう見えるか。こう見せるためには、どう書けばいいか・・・etc。例によって、親切丁寧で見やすいアプリ「Progate」が教科書。

    

ちょっと前、JAVA初級編の記事を2本書いてるけど、HTMLやCSSの書き方はほとんど忘れてたから、昨夜は思い出すだけで終了♪ ようやく今夜、締切時間前に執筆し始めたわけ。

   

191220b

   

ちなみに、この記事のここまでの入力がどうなってるのか、管理画面の「通常エディタ」というタブで見てみると、上の通り。p、< >、spanとかの文字・記号が目立ってる。他には、font-size(文字のサイズ)とか、color(色)とか。

   

上図に出てるのは、私の個人的な入力だけ。たまに、上図の画面を直接いじることもある(エラーの修正とか)。これ以外に、ブログのシステムが元々用意してる原型みたいなものもあって、初めてこの記事が表示されるわけだ。

  

なお、過去の関連記事3本は次の通り。

  

 プログラミング学習アプリ「Progate」~HTML&CSS初級編

 Progate2~Java初級編

 Java初級編2~Progate3  

      

   

    ☆     ☆     ☆

191220a

  

さて、前回のHTML(HyperText Markup Language)記事から目指してるのは、上のようなページの作成。見るだけなら何ともないけど、自分で作ろうとすると、大変さを思い知らされる。文字の大きさ・間隔、色、図、全体的なレイアウト(上・中・下段の3分割)など。HTMLとCSSの書き方の答をいきなり全部書くと、結構長いし、分かりにくい。

  

そこでまず、遥かに簡単なページを自分で作ってみよう。下は、Windows10付属の「メモ帳」アプリで私が作った、テキストファイル。

  

191220c

   

わざと、1行空けとか右への文字ズラシとか使わず、単純に書き並べてる。というか、そうした見やすさのための作業は無くてもちゃんと表示されることを、確認したかったわけ。

   

まず一番上の行が、最新版のHTML5を使うという宣言らしい。その下全体は、<html>タグと</html>で挟まれた部分。変なトラブルが怖いから、わざと全角文字を使用。

  

で、その間には、まずhead(ヘッド:ブラウザで開いた時のタブの名前)があって、次に<body>タグと</body>で挟んだ本文がある。h1で大見出し用の文字、h2で小見出し用の文字を指定。その後は、<p>と</p>で挟んで、各段落の文を書くだけ。このpに時々、変なエラーが生じてしまうから、試行錯誤の独学で修正してるのだ。

  

191220d

   

先ほどのテキストファイルを、htmlファイルとして保存し直して、ブラウザ(IE)で開いた様子が上図。タブの名前(タイトル)、大見出し、小見出し、本文2段落、ちゃんと構成できてる。ただ、味気ないから、htmlファイルを複雑にして、css(cascading style sheet)ファイルで色を付けたりして、見栄えを良くして行く。

  

   

     ☆     ☆     ☆

191220e

  

では、Progateに戻って、前のキレイなページを作って行こう。上はhtmlファイルの最初。headの中で、文字コード「utf-8」を指定した後、別にcssファイル(stylesheet)も利用するという宣言がある。そのcssファイルを特定する名前が、stylesheet.css。二重引用符の有無や使い分けは、まだよく分からない。

   

191220f

  

続いて、body(本文)の最初の部分。div classのタグで、ページ上部のheader(ヘッダー:薄い緑の細長いエリア)を作成。さらにその中で、header-logo(ヘッダーロゴ)とheader-list(ヘッダーリスト)を分ける。リストの箇条書きは、<ul>タグと<li>タグの組合せ。「入れ子」状に組み合わさった複雑な構造。   

 

191220g

   

さらに、body(本文)の中央をさらに3分割。copy-container(コピーコンテナー:見出し)の2行と、contents(コンテンツ:後で付ける画像)と、contact-form(コンタクト・フォーム:お問い合わせ)。ちなみに色が変わってる部分は、私がアドバイスの文章を消した箇所。

  

細かい話だけど、HELLO WORLDという大見出しの右側の<span>タグは、文末のピリオド(点)だけ色を変えるための準備だ。文の一部分だけ操作する時に使うタグらしい。まあ、基礎の理論がよく分からないまま、前からたまにいじってた♪

  

191220h

   

そして上が、body(本文)の最後、footer(フッター:文末)。headerと同様、ここでもロゴとリストを分けてる。これだけ見ると、headerとfooterはそっくりだけど、cssファイルでの味付けの仕方が違うのだ。背景色とか、リストの配置とか。

   

   

    ☆     ☆     ☆

さて、ここまでアプリの画面を使って来たから、htmlの全体を自分でメモ帳に書き直してみた。一発で、間違いなしに入力成功(たぶん♪)。1行空けや文字ずらしも入れて、ちょっと見やすくしてみた。

  

191220i

  

で、これをhtmlファイルで保存し直して、ブラウザで開くと、文字化け!(^^ゞ どこも間違えてないけどな・・と思ってよく見ると、日本語の部分だけ表示がおかしい。

  

ブラウザのエンコードは、Unicode(utf-8)で正しそうだけど、試しに「日本語(自動選択)」をクリックすると、表示成功☆

  

191220j2

      

ちなみに、ブラウザのエンコードは、「日本語(シフトJIS)」に変わってた。utf-8を指定したのに、何でかね? まあ、とりあえず、htmlファイルの作成は成功としとこう♪

  

長くなったので、味付けを担当するcssファイルについては、また後ほど。それでは今日はこの辺で。。☆彡

   

      (計 2383字)

| | コメント (0)

Java初級編2~プログラミング学習アプリ・Progate3

何と、前回から僅か3週間で、プログラミング学習アプリの3本目の記事を書くことになった。アクセス数稼ぎにはならないけど、単にブログの毎日更新のネタに困ったから♪ ただ、3週間前の話だとまだ何となく記憶が残ってて、わりと解きやすかった。

    

これが1年以上前のHTML&CSSになると、ほとんど何も思い出せない。順番的にはそちらを先に一通り済ませたいところだけど、思い出すのが面倒だから、前回と同じJavaを選択。といっても、まず前回の復習からスタート。入力が保存されてたから、サラッと見直すだけで済んだ。

      

Progate(プロゲート)、やっぱり良い学習アプリだと思う・・とか書くと、ステマだと誤解されるかも♪ マジメな話、書店で入門書を数冊読んでも、このアプリの方が分かりやすいし楽しかった。Javaを使う環境が最初から準備されてる点も大きい。

  

ちなみに過去の2本の記事は以下の通り。

 プログラミング言語の学習アプリ「Progate」~HTML&CSS初級編の感想

 学習アプリ「Progate」2~Java初級編

    

    

    ☆     ☆     ☆

191121a

  

前回は、レッスン1(上図)の前半、第7課(節)まで終了。続いて第8課は、変数の更新

    

191121b

   

上は、String(文字列)型のnameという変数の中身を書き換える様子。最初の”Sato”を、”Suzuki”へと更新するには、新たに「name = ”Suzuki”」と書けばいい。ちなみに、このブログの入力欄でエラーが生じるのが心配だから、時々わざと全角の文字を混ぜてる。悪しからず。

   

191121c

   

上の演習問題では、int(整数)型のnumberという変数の初期値が11で、String型のtextという変数が”Ruby”と設定されてる所からスタート。文字列の時だけ二重引用符を付けるのが面倒だ。行末のセミコロンの方が多少マシ♪

  

191121d

  

「number=9;」と入力すると変数が9に更新されて、「text=”Java”」と入力すると変数がJavaに更新される。出力はいつも「System.out.println(・・・)」だからカンタン。左側のコンソールと呼ばれるエリアに、9とJavaが出力された。

  

ちなみに「println」という言葉。前半はプリント(印刷)でいいとして、末尾のlnの意味が分かりにくい。検索してもQ&Aみたいなものしか見当たらなかったけど、「line」(行)の省略形でいいのかな。後ろだけ省略した合成語を使うのなら、むしろprlnとかで済ませるか、printlineと全て書く方がいいような気もする。言語開発の歴史が関係してるのかも。

    

   

    ☆     ☆     ☆

続いて、第9課「自己代入」。数学好きのプログラミング素人としては、前から引っかかってた書き方だ♪ 等式の左辺と右辺が明らかに違う式

   

191121e

  

int型のnumberという変数は最初、3と初期化されてる。それに7を足した変数へと書き換えるには、「number=number+7」と入力。3+7で、コンソールへの出力は10。

  

第10課は「自己代入の省略」。例えば「x=x+3」なら、「x+=3」と書けば1文字省ける。さらに、1足すだけなら、「x++」、1引くだけなら「y--」と書ける。ちなみに++という書き方は、有名なペアノの自然数論と形だけ似てるけど、ペアノの場合はプラス2という意味になる。

   

191121f

   

第11課は「変数の役割と注意点」。ちょっとだけ複雑な変数や、変数同士の演算が登場。

  

191121i

   

int型のlength(長さ、幅)という変数が6、height(高さ)という変数が8の時、その2つを掛けて、rectangleArea(長方形の面積)という変数を定める。rectangleとareaの2単語を合成する時は、後ろの頭文字を大文字「A」にする。大文字はたまに活躍。

   

   

    ☆     ☆     ☆

第12課小数を扱おう」では、小数を表す「double型」の変数が登場。ダブルの意味が分からないけど、とりあえずスルー♪ ちなみに小数を表すフツーの英単語は、decimalだ。

   

191121h

  

double型の変数number1が8.5、number2が3.4の時、足し算を「number1+number2」で出力すると、11.9になる。

   

第13課「自動型変換」は、型の変換を自動で行うやり方。String(文字列)型とint(整数)型を足すと、自動でString型へと揃えてくれる。「12」+「"月”」+「31」+「”日”」なら、12月31日という文字列。

  

一方、int(整数)型とdouble型の計算をさせると、自動でdouble型になる。例えば、5.0/2を出力すると、2.5。ちなみにデータ型の変換のことを「キャスト」と呼ぶそうだけど、この変わった名前の理由も保留しとこう。

   

   

    ☆     ☆     ☆

最後の第14課は「強制型変換」。型の変換を強制で行う方法。int(整数)型の7をint型の2で割る計算をする時、そのままだと整数3だけ出力される。ところが、割り算の直前に「(double)」を加えとくと、小数3.5が出力される。

   

191121j

    

ネットで見ると、簡単な小数ならfloat型というのもあるらしい。型の種類が増えると当然、変換の仕方も多様になって来る。とりあえず今回はこれでフツーにレッスン終了。先生の羊が褒めてくれた♪

  

191121k

  

最後は華やかなお祝いの画面が登場。Congratulations!(コングラチュレーション)。次はレッスン2に向かうか、あるいはHTMLの続きにするか。いずれにせよ、まだ続ける予定。

  

191121l

      

プログラミング記事は意外なほど時間を取られるなと苦笑しつつ、ではまた。。☆彡

   

      (計 2278字)

| | コメント (0)

プログラミング言語の学習アプリ「Progate」2~Java初級編

前回から2、3年経ったような気もしてたけど、実はまだ1年3ヶ月弱だった♪ 「Progate」(プロゲート)というアプリは、確かにプログラミングのゲート(入口)として、いいねボタンを押したくなる、楽しい学習アプリだ。

  

ただ、やっぱり特殊な世界だから抵抗があって、つい疎遠になってしまう。そうすると、IDもパスワードも忘れてしまうから、ますます疎遠になる♪ 久々の今日はまず、IDとパスワードの入力で4回ほどエラー表示が出たから、その時点でもう疲れてしまった。

  

191029a

   

もちろん、前回やったHTML&CSSの内容はほとんど覚えてないから、どうせなら違う言語に挑戦したい。そこで、名前だけはよく聞く「Java」(ジャバ)を選択。Java Scriptとは「全くの無関係」との事♪ でも、どうして同じ名前なのか気になるから、後で調べてみよう。

   

とにかくいよいよ、Java初体験スタート。「大規模開発からモバイルアプリまで汎用性の高い言語」。

   

   

     ☆     ☆     ☆

学習コースJava1と2が無料で、3と4が有料。アプリには満足してるから、いずれ課金で真面目にやるかも。まあ、こういった初心者向けの学習だと、また友人が突っ込みを入れて来るかも♪

  

191029b

  

「Main.java というファイルの System.out.println( ) の ( ) の中に、文字を書くと、コンソールという場所に表示される。ここでは、"Hello World"。ダブルクォーテーション(二重引用符)に入れないと、エラー発生でコード(プログラム)が動かなくなるらしい。この記号、日本語だとほとんど使わないから抵抗感がある。まだ、セミコロンの方がマシかも。

       

191029c

  

最初は「Hello Java」の入力。あらかじめ、ほとんど準備されてるから、問題の下側の選択肢からタップで選んで行くだけ。

  

191029d 

  

191029e

   

1回タップして入力する言葉を選択しただけで、画面左側のコンソールという場所に「Hello Java」と表示された。

  

191029f

  

これでレッスン1の第1課が終了。今回は半分、第7課まで。

  

191029g

  

  

     ☆     ☆     ☆

Java入力欄の構造は、下のように分かれてる。一番大きな外枠の「クラス部分」と、二番目の枠の「メソッド部分」は、とりあえず無関係。一番内側の「処理部分」にコードを書く。

  

191029h

  

続いて、「文字列」とは別扱いされる「数値」の入力と計算。数値はダブルクォーテーションを付けない。スラッシュ2本の右側の日本語の説明文は、単に読みやすくするためで、コードの実行には関係ない。

   

191029i

  

カッコ内に、17 と 5 + 3 を入れると、コンソールに 17 と 8 が出力された。読みやすくするための半角スペースも、実行とは関係ない。私は普段のブログ入力でもわりとスペースを使ってるから、ここでも半角スペースを使った。

   

191029j

  

かけ算の記号は、アスタリスク(*)。割り算なら、スラッシュ。割り算の余りだけ出す時は、パーセント(%)。8 % 3 をカッコ内に入れると、コンソールに、2 が表示された。8÷3=2余り2、だから。

  

191029k

  

   

    ☆     ☆     ☆

さらに、「データ型」と「変数」について。文字列は、「String 型」。整数は、「int 型」。

 

191029l

  

int 型で変数名を number と定義する場合。

  

191029m

   

String 型の変数 name を定義して、"Wanko" を代入する場合。

  

191029n

  

変数の定義と同時に、代入することも可能(変数の初期化)。この辺りでちょっと頭がモヤモヤして来た♪ 問題は解けるけど、頭に入らない感じ。まあ、慣れの問題か。

     

191029o

   

   

     ☆     ☆     ☆

最初から変数 number1 が定義されて、3 が代入されてる所に、自分で変数 number2 を定義して、7 を代入する。

  

191029p

   

さらに、number1 と number2 の掛け算、つまり、3×7を出力する。

  

191029q

  

コンソールに表示される答はもちろん、21。

  

191029r

  

初心者的には、もうちょっと褒め言葉が欲しいかも♪ コメントが機械的なのだ。まあ、機械だけど、英単語アプリの mikan なんて、いちいち大絶賛してくれるのだ。

   

191029s

  

ともあれ、1年3ヶ月ぶりのプログラミング学習、全問正解で無事終了。次は来年か♪ ではまた。。☆彡

  

  

cf. プログラミング言語の学習アプリ「Progate」~HTML&CSS初級編の感想

   

      (計 1700字)

 

| | コメント (0)

プログラミング言語の学習アプリ「Progate」~HTML&CSS初級編の感想

子供向けの記事2本を除くと、プログラミングの記事というものは

 

3年半も書いてない。主たる理由は職場関連の変化で、余裕が

 

無くなったからだけど、どうもビミョーに私とは合わない気もしてた。

 

 

 

やっぱり、数学とも国語とも似て非なる独特の世界なのだ。数学と

 

しては色々「緩い」ものを感じるし、国語としてはあまりに「硬い」。

 

おまけに、どうしても下手に扱うと自分の端末自体が壊れそうな

 

気がしてしまう♪ パソコンやiPadが壊れると、仕事もブログも

 

困るのだ。

 

 

 

というわけで、いつの間にかすっかり疎遠になってしまったけど、

 

これだけAI、AIと騒がれる時代になると、せめてプログラミングくらい

 

できないと、人間知性の価値を全否定されそうで怖くなる。

 

 

 

そこで今日は超久々に挑戦してみた。実は台風の雨が止まなくて、

 

ランニング記事を書けなくなったからというのが本音だけど♪

 

 

 

 

 

      ☆       ☆       ☆

 

以前は、高校の数学の古い教科書を使って、BASICの記事を

 

9本書いたけど、今回はアプリ「Progate」(プログラミング

 

への入り口という意味か)を使って、HTML(ハイパーテキスト・

 

マークアップ・ランゲージ)のお勉強。ネットで普通に使われてる

 

言語で、他のページに飛ぶリンクが付いてるのが特徴だ。

 

 

 

このブログの執筆欄にも、「HTMLの編集」というタブが付いてて、

 

たまにトラブルが生じると自分で適当にいじって修正する。トラブル

 

の原因とかキッカケは、iPad入力とか画像挿入、文字の色付け

 

とか。レイアウトが崩れたりエラー表示が出たりするから、正しく

 

表示されてる記事と比較して、何とか直して来た。

 

 

 

180808a

 

 

 

例えばこの記事の改行や一行空け、色付けは上のようなHTML

 

になってる。上図の挿入については、下の通り。念のため、一部

 

はカットしておいた。

 

 

 

基本的にどの行も、<p>(山カッコ p 山カッコ、実際は半角)

 

で始まって、</p>(山括弧 /p 山括弧)で終了するらしい。

 

下の「img・・・src」はイメージのソース(情報源)。

 

source の略語が src だったのか。。

 

 

 

180808b

 

 

 

この執筆ページの「ソース」を見ると、こんな感じで始まってる。

 

 

 

180808l

 

 

 

 

 

     ☆       ☆       ☆

 

話をアプリに戻そう。プロゲートを見つけたキッカケは、朝日新聞

 

の記事。Ruby(ルビー)という日本生まれの言語が活躍してる

 

とか書いてたから、検索してみると、このアプリで勉強するのが

 

いいとのウワサが目に留まった。

 

 

 

180808c

 

 

 

半信半疑のまま iPad Proでダウンロード。いきなり後悔した♪

 

まず、なぜかダウンロード画面が残り4分の1くらいで終了(?)

 

してしまったのだ。やり直してみると、どうもダウンロードは完了

 

してるらしい(多分)。ただ、最初の登録を済ませた後、まったく先

 

に進めない。白い画面のままだから、一旦あきらめた。

 

 

 

ところが数時間後に再びアプリを起動してみると、今度はサクサク

 

動いてくれる。iPad自体は再起動してないから、理由は不明。

 

ひょっとすると、登録したメアドに来たメールで確認作業をしたから

 

かも。あるいは単なるエラーだったのか。

 

 

 

180808d

 

 

 

 

 

      ☆       ☆       ☆

 

もともとRubyを学習しようとしてたんだけど、「学べる言語」の

 

一番手が「HTML&CSS」となってたし、ルビーより馴染み

 

があるからこちらを選択。多分、正解だったと思う。

 

 

 

180808e

 

 

 

初級編は、とりあえず上のようなページを作成するのが目標。

 

私の感覚だと、まず完成した記述の上の方だけでも見せて欲しい

 

所だけど、このアプリは少しずつ知識と技術を増やて行く方式。

 

 

 

180808f

 

 

 

各セクションごとに、まず簡単なスライドの説明を見た後、実際に

 

入力練習する形になってる。無料にしては十分な完成度だけど、

 

どこからアプリ内課金が始まるのか、まだ不明。

 

 

 

180808g

 

 

 

 

 

      ☆       ☆       ☆

 

初心者や初級者にやさしいのは、書く画面で入力する単語や記号

 

のセットが、その都度表示されること。おまけに、入力を間違えても

 

ダメ出しが出ない(今のところは)。正解を入力するまで待ってくれる。

 

 

 

「<h1>・・</ 」とかのタグで囲むと文字が大きくなった。

 

単なる段落(paragraph)というか、普通の改行だと、「<p>・・

 

</ 」とか。ちなみに全角文字や後ろ側の省略は、このブログの

 

表示を守るため♪ この記事の表示に影響が出そうで怖いのだ。

 

 

 

180808h

 

 

 

ありがたいし速く先に進めるけど、勉強の仕方としてはビミョーでは

 

ある。まあ、ゲーム的文化というか、現代の軽・薄・短・小を好む流れ

 

というか。上手く乗っていかないと冷たい反応を浴びてしまう♪

 

 

 

180808i

 

 

 

一つのセクションをクリアする度に褒めてくれて、レベルと点数が

 

アップ。完全にゲームのノリ。次のレベルまで・・・ポイントとか

 

書かれると、そこまでクリアしないと止めにくい。ところがクリア

 

すると、また次に行きたくなる。ゲーム依存症のメカニズム♪

 

 

 

180808j

 

 

 

一応、スラスラ進めたけど、この辺りまで来るともう、あんまし

 

理解しないまま、とりあえず先に行く感じになってしまった。前にも

 

書いた気がするけど、半角スペースがあるのかないのかも分かり

 

にくい。あるように見えても無しで済んだり、無いように見えても

 

必要だったり。基本的に無いことの方が多いのかも。

 

 

 

 

 

      ☆       ☆       ☆

 

180808k

 

 

 

上図はCSSの練習(らしい♪)。大きな箱の中に小さな箱が入って、

 

またその中にもっと小さな箱が入ってるような「入れ子」型の構造が

 

出て来ると、どこからどこまでが同じ箱(枠組み)なのか分かりにくい。

 

慣れの問題とか、目の訓練、あるいは脳トレか。実際は箱の代わり

 

に、インデント(行の頭を右に下げることなど)を使う。

 

 

 

ちなみに css (カスケーディング・スタイルシート)とは、

 

「HTMLの要素に対して色、大きさ、配置などを指定し、ページを

 

デザインするための言語」だと説明されてた。

 

 

 

ただランゲージ(言語)という言葉は入ってないから、HTMLを

 

補足する分離要素とかサブ規格と考える方が妥当だろう。開発の

 

経緯も、そんな感じだったようだ。そう言えばこの執筆欄でも、文字

 

の修飾には、欄の上側のボタンを使ってる。発想は同様だと思う。

 

 

 

 

 

     ☆       ☆       ☆   

 

さて、こうしたプログラミングのお勉強。字が小さめで英語だらけ、

 

アルファベットと記号だらけだから、中学・高校・大学とかの教育

 

には向いてる。特にゲーム感覚のアプリだとウケがいいはず。

 

 

 

逆に、老人ホームの類での作業にはあんまし向かないと思う。数独

 

やクロスワードパズルの方がお勧め。だからこそ逆に、高齢者が

 

スマホアプリを開発したりすると、脚光を浴びることにもなる。

 

 

 

私はとりあえず復習して、消化不良を克服した後、もうしばらく先に

 

進んでみるつもり。スピードが遅過ぎて、AIに対抗するどころか

 

どんどん差が開くだけかも♪

 

 

 

それでは今日はこの辺で。。☆彡

 

 

cf. プログラミング言語の学習アプリ「Progate」2~Java初級編

   

              (計 2716字)

    (追記36字 ; 合計2752字)   

| | コメント (0)

子供向けコーディング言語「LOGO」50周年、プログラミング・ゲーム(Googleホリデーロゴ)

今日(2017年12月5日)のGoogleホリデーロゴは、一部で人気

のようだ。私も途中から本気で考えて、一応最後までクリアしたけど、

まだ完全な正解(別解も含めた最適解と証明)にはたどり着いてない。

小学校からやり直すべきかも♪ パステル系の青緑は好きな色だ。

 

171205a

 

上図が、「子供のコーディング50周年記念」のスタート画面。私の

Windows10パソコンとIE11の組合せだと、プレイボタンが表示

されない。Chromeにするか、iPad Proだと表示された。

 

「コーディング」というのは聞き慣れない言葉だけど、「coding」。

つまり、コード(記号)にすることを指してる。特に、コンピューター

に対する指令だと、普通は「プログラミング」と言う所。

 

 子供向けのコーディング言語「LOGO」が1967年、パパート 

 らによって開発されたから、今年でちょうど50周年

 

こういった情報を加えると、同種のサイトは(ほとんど)見当たらなく

なる♪ ネットでは、問題を解くことと、「最小移動回数」という言葉

の意味に夢中のようだ。最小パネル数とか最小コード数という意味

であって、「移動」の数ではない。

 

私は何とか、「最小移動回数」という誤訳に近い日本語訳の元の

英語を表示させようと頑張ってみたけど、成功してない。クローム

の言語設定を英語にしても、ゲームでは日本語表示になってしまう

のだ。アクセス端末の位置を認識して、言語を切り替えてるのか。

 

 

      ☆        ☆        ☆

171205b

 

とにかく1問目。一番下の指示用アイコン(連結できるパネル)を、

ドラッグで入力欄に移動。ウサギがニンジンを全て食べれるように

プログラミングする。

 

右に進む矢印(→)を2つ並べれば答。「進む、進む」。

 

前に当サイトで記事を書いた「スクラッチ」という子供向け言語

似てると思ったら、その通りだった。今日のDoodle(ホリデー

ロゴ)の開発には、MITのScratch研究者が参加してると英語

の説明に書いてある。

 

171205c 

 

 

      ☆        ☆        ☆

171205d

 

2問目。アイコンに右90度回転が加わっただけで、まだ簡単。

 進む、進む、右回転、進む、進む

合計5つのアイコン、つまり、5回の命令で成功。

 

 

      ☆        ☆        ☆

171205e

 

3問目ループ(繰返し、循環)アイコンが加わったから、上のように

挟みこむ形で使うと、全部で4つのアイコンで済む。ループ・アイコン

の下に書いてる数字は最初から「4」で、左右から挟み込んだ命令

を4回繰返すという意味。

 

  4回繰返し(進む、進む、右回転)

 

つまり、 進・進・右・進・進・右・進・進・右・進・進・右。

最後の「進・右」が余るけど、別に気にしなくていいようだ。

 

 

      ☆        ☆        ☆

171205g

 

4問目。ここから、最小回数の制限が厳しくなる。この問題は7回

となってて、ループを二重に使う必要があるのだ。アイコンを上手く

置く必要もある。

 

二重ループについては3年前、プログラミング記事で書いてる

ループの回数を自分で入力できることが分かったので、「2回」

ループを使用。4回のままでもいいけど、後半2回がムダなので。

  

 2回繰返し(4回繰返し(左回転、進む、進む)左回転、左回転)

 

つまり、 左・進・進・左・進・進・左・進・進・左・進・進・左・左

     左・進・進・左・進・進・左・進・進・左・進・進・左・左

 

他にも答はあるけど、それが何通りあるのか、あるいは最小命令

回数が何回なのかはまだ不明。別解の1つは次の通り。

 

 2回 (4回 (進・進・右) 右、右)

 

 

      ☆        ☆        ☆

171205h

 

5問目。これは図形的に、小さい正方形が4つ合体したものだから、

1つ1つの処理を4回繰返せばいい。ただし、小さい正方形を1つ

処理する度に、左回転。

 

 4回(4回(左・進・進)左)

 

つまり、左・進・進・左・進・進・左・進・進・左・進・進・左

    左・進・進・左・進・進・左・進・進・左・進・進・左

    左・進・進・左・進・進・左・進・進・左・進・進・左

    左・進・進・左・進・進・左・進・進・左・進・進・左

 

指定された回数6回で済んだが、最小かどうかはまだ不明。数学的

証明も面倒だ。

 

 

      ☆        ☆        ☆

171205i

 

そして最終ステージ、6問目。何度も向きを変えることになるので、

指定された最小回数6回を守るのはなかなか難しい。ウサギが前に

進めなくなった時は足踏みして止まってくれるので、多めに移動する

技を利用。

 

 13回 (3回 (進) 右)

 

つまり、

 

  進・進・進・右・進・進・進・右・進・進・進・右・進・進・進・右・

  進・進・進・右・進・進・進・右・進・進・進・右・進・進・進・右・

  進・進・進・右・進・進・進・右・進・進・進・右・進・進・進・右・

  進・進・進・右

 

これが最小回数であるのは、何とか証明できそうだけど、単純

過ぎるし読者がいないだろうから省略♪ 要するに、4回以下の

組合せをしらみつぶしに調べて、比較すればいい。ただ、ループ

の回数の変化を考えるのが厄介か。。

 

 

     ☆        ☆        ☆   

171205k

 

全問、最小回数をクリアすると、メダルが6つ揃う。単なるクリア

だと、明るい色に輝いてくれないのだ。

 

171205j

 

最後はお庭で仲良く、ケーキパーティー♪ 子供向けプログラミング

教材として、出来がいいなと感心した。普通の大人向けとしても適度

で面白い。まあ成人男性向けなら、キャラクターは美少女とかの方が

嬉しいかも。米国は、その種の発想があんまし無いような気もする。

 

というより、日本の文化が特殊なのか♪ ではまた明日。。☆彡

 

               (計 2242字)

| | コメント (2)

米国MITのプログラミング教育ソフト「スクラッチ」、小学生向けの解説

この記事は、パソコンを少し使える小学生

向けに書きます。5、6年生なら読めるで

しょう。スマホで見やすい形にしときます。

説明はちょっと長いけど、カンタンです。

 

「スクラッチ」(Scratch)は、米国

マサチューセッツ工科大(MIT)が

作ったソフトやサイトのこと。朝日新聞

だと17年5月20日に紹介してました。

 

自分がやりたいことのために、必要なこと

をハッキリさせて、少しずつ組み立てること

を学びます。論理(ろんり)的に考えるため

の勉強、練習ということになります。

 

スクラッチという名前は、DJが音や映像

を変化させたりミックスしたりすることを

表す言葉。このソフトでも、色々と新しい

ものを創(つく)り出そうという意味です。

 

 

  ☆    ☆    ☆

170810a2

 

まず、公式サイトに飛んでみましょう。

検索もカンタンです。日本語になって

ますが、もとは英語なので、たまに英語

が入ってます。気にしないように♪

 

トップページの左上、「作る」をクリック

すると、下のような画面が出ます。

「やってみる」をクリックした時は、少し

だけ違いますが、似たようなものです。

 

170810b

 

左側のキャラクターは、「スプライト」

呼ばれてます。妖精(ようせい)とかいう

意味です。他のキャラに変えることも

できますが、ここではそのままやります。

 

170810c

 

画面の右側には、上のようなヒントが

出るでしょう。最初の「Scratch

をはじめよう」をクリックしてみます。

もともと下図が出てることもあります。

 

170810d

 

下の青い部分の「動かしはじめる」

クリックします。

 

170810e

 

ヒントの図は英語になってますが、自分

で操作(そうさ)する所は日本語です。

 

170810f

 

画面の中央の一番上に、「スクリプト」

書かれてます。ここで、「すること」、「やり

たいこと」を選(えら)んで行きます。

 

まず、「10歩動かす」を右側の場所に

ドラッグして、ドロップしました。クリック

すると、キャラが右に動きます。

 

 

    ☆    ☆    ☆

170810g

 

上の絵も英語になってますが、無視(むし)して

いいです♪ 下の「さあ、サウンドを追加しよう」

をクリックします。サウンドとは音のことです。

 

170810h

 

ここでもヒントの図は英語ですが、気に

しないように。画面の中央のスクリプト

で、「音」を選びます。

 

170810i

 

「1のドラムを0.25拍鳴らす」を右側

にドラッグして、さっきの「10歩動かす」

のすぐ下にドロップすると、くっつきます。

 

170810j

 

つづいて、ヒントにしたがって、「ダンスを

 

始めよう」に進みます。ダンスといっても、

ちょっと動かすだけです。

 

170810k_2

 

上の図はまた英語ですが、パソコン画面の

中央は日本語。スクリプトで「動き」を選んで、

前と同じ「10歩動かす」をドラッグ。くっつけた

後、「10」を「-10」に変えます。キーボード

の「0」の右のキーが「-」(マイナス)でしょう。

 

170810l

 

キャラが右に動いた後、音が鳴って、左に

動くことになります。さらに、前と同じやり方

で、音(ドラム)をくっつけます。スクリプト

で「音」を選んで、ドラッグ&ドロップです。

 

170810m

 

 

    ☆    ☆    ☆   

ヒントにしたがって、ドラムの種類を変えて

みましょう。黒い三角マークをクリックして、

(4)を選ぶと、シンバルの音になります。

 

170810m2

 

今度はスクリプトで「制御」(せいぎょ)を

選びます。全体的な動きを「コントロール」

するということです。

 

170810n

 

「10回繰(く)り返す」を右側にドラッグ。

今までの4段重ねをはさむようにして、

くっつけます。てきとうにやれば、自動で

形が変わるから、だいじょうぶです。

 

170810o

 

黄色の部分をクリックすると、たしかに

10回くりかえします。

 

170810p

 

「なにか言わせる」に進みますが、音では

なく、左側のキャラの図にセリフが出るの

です。

 

170810q

 

スクリプトで「見た目」を選んで、

「Hello!(ヘロー)と2秒言う」

を右側の一番上にドラッグします。

ここでは、セリフを日本語の「ダンス」

変えましたが、変えなくてもいいです。

 

170810r

 

クリックすると、キャラから「ダンス」という

セリフが出るでしょう。

 

170810s

 

 

    ☆    ☆    ☆ 

ヒントはまだ続きますが、長くなったので、

この記事はここで終わりにします。

 

今回はヒントにしたがってやりましたが、

もちろん自分で自由に作れるので、色々

とためしてみましょう。たとえば、キャラ

(スプライト)を日本人の「Maya

まや)ちゃんに変えることもできます。

 

170810t

 

ゲームみたいに遊んでるうちに、すぐコツ

や攻略法がつかめるでしょう。わからない

時は、学校や塾の先生に聞けば大丈夫

(たぶん♪)。

 

それでは今日はこの辺で。。☆彡

 

        (計 1957字)

| | コメント (0)