期間限定

キャンペーン中

体験授業申込

プログラミング入門にはコレがおすすめ!いろいろあるプログラミング言語

プログラミング入門にはコレがおすすめ!いろいろあるプログラミング言語

いろいろある!プログラミング言語

まったくプログラミングをしない人でも、C言語やjavaは聞いたことがあるのではないでしょうか。
C言語は1970年代に誕生した言語で、今では学校の授業で必須になっていたり、世界的に普及しているのでかなりメジャーです。書き方もプログラミング入門にふさわしい言語といえます。

C言語は派生もあり、オブジェクト指向を取り入れたC++(シープラスプラス、シープラプラ)や、Unityでのゲーム開発も可能なC#などが有名です。

javaもC言語と同様世界的に有名なプログラミング言語です。androidのスマホアプリや、金融系のシステムなど様々なプログラムがjavaで組まれています。
ほかにも日本人が開発したオブジェクト指向のスクリプト言語のRubyや、iOSアプリを開発するためのswift、objective-cや、人工知能の開発などが得意なオランダうまれのインタプリタ言語pythonなどが有名です。pythonはpepper(ペッパー)のアプリ開発にも使います。

プログラミング入門

プログラミング入門におすすめな言語とは

C、C++、C#、java、Ruby、swift、objective-c、python、php、javascript・・・様々なプログラミング言語がありますが、プログラミング入門の際、はじめて学ぶプログラミング言語としては一体どれがいいのでしょうか。
Cやjavaは書籍やネットでの情報も多く、歴史ある言語なので、開発環境さえ整えてしまえば勉強はしやすいでしょう。構文も基礎を固めるプログラミング入門にふさわしいといえるでしょう。
他におすすめな言語はPHPです。様々なWEBサービスがPHPで作られています。サーバーサイドのスクリプト言語で書き方も細かくなく、プログラミングを楽しみながら始めてみたいひとにおすすめです。
加えて見た目の部分を構築する、HTMLやcss、jQueryやjavascriptを学習しながら、自分でホームページやWEBサービスをつくってみるといいです。弊社プログラミングスクールWISHのWEBプログラミングコースでも48時間の学習後16時間を使い、実際にWEBサービスを実装してもらいます。学んだ成果が目に見えるプログラミングって本当に楽しいですよね!

プログラミングスクール

絶賛オープンキャンペーン中!入会料無料&受講料20%オフ!

プログラミングスクール

ウェブサイトの仕組みを知る! html編 其の3

[ウェブサイトの仕組みを知る!]
html編
其の1 : ウェブサイトの仕組みを知る! html編 其の1
其の2 : ウェブサイトの仕組みを知る! html編 其の2

css編
其の1 : ウェブサイトの仕組みを知る! css編 其の1


ページを構成するもの

前回htmlの文法についてお話しさせていただいたように、htmlを記述するためのルールというものが存在します。
web上には無数のホームページ、webサイトが存在しています。
様々なジャンルの、様々な形式のwebサイトがあり、それぞれデザインも機能も目的も異なっていて、一つとして全く同じwebサイトというものはありません。正に千差万別です。

しかし、どんなにジャンルやデザインが違っていても、それぞれのwebサイトを構成している根本的な要素はほぼ同じなんです。
今回はその辺りの、html文書の構造についてお話ししていきたいと思います。

大きく2つにわかれる

まずは例のごとく、いつも見ているページのソースを見てみて下さい。
何ページか見ていると、このタグ毎回見るなー、というものがいくつかあると思います。
デザインによって視覚的に差異はあっても、それらの要素によってそれぞれのページは構成されているのです。

まずはhtml文書は大きく2つに分けることができます。
それはヘッド要素とボディ要素です。

<head><body>というタグは、どこのソースを見ても発見できたと思います。

ヘッド要素内には、そのページの情報や概要が記述されています。
そのページは何について書かれたページなのか、ページのキーワード、ページのタイトルなどです。
これらの情報をメタ情報とも呼びます。

ソースコード上部のヘッド要素のなかに
<meta>
というタグが多く含まれていると思います。

基本的にこれらの情報はページには表示されません。
しかし、Googleやyahooなどの検索エンジンはここの情報から、どのようなwebサイトなのか判断しています。
なので、SEO対策を行う際には、ヘッド要素の情報の編集がカギになってくると言えます。

ボディ要素内はページの内容です。目に見える部分を指定しています。
webサイトの核とも言える部分ですね。

<body>で囲まれている中に、よく探してみると
<h1><h2>
といったタグを確認できると思います。

これらは見出しです。大見出しや中見出しなど、レベルに応じて設定していきます。

より見やすいページを作成するためには、見出しの使い方が大切であると言えるでしょう。

段落や改行なども要素として処理されます。

例えば、改行には<br>というタグを指定します。
このように、ある程度html文書の構造は決まっているのです。

ウェブサイトの仕組みを知る! html編 其の2

[ウェブサイトの仕組みを知る!]
html編 其の1 : ウェブサイトの仕組みを知る! html編 其の1
css編 其の1 : ウェブサイトの仕組みを知る! css編 其の1


htmlとは、以前述べたとおり、webページを記述するためのマークアップ言語と呼ばれるものです。
言語、というだけあって、htmlにも文法が存在します。

文法あってこそです

そもそもhtmlとは、W3C(World Wide Web Consortium)という団体によって作成されたものであり、その文法に関しても同様に、W3Cによって定義されています。

「文法」と聞くと、学生時代に英語の文法を勉強していたのを思い出しますよね。
日本語には日本語の文法、英語には英語の文法、はたまたスペイン語にはスペイン語の文法が存在するわけで、htmlも同様に、定められた文法に則って記述していくわけです。

では全てのwebサイトが正しい文法のhtmlで記述されているのかというと、実はそうでもありません。
無数に存在するwebサイトの中で、W3Cが定める文法をキッチリ守って記述されているページは、実はほとんどありません。割合で言うと、全体の1%以下といったところだそうです。エンカウント率激低です。

逆にいえば、多少の文法的間違いがあっても、webブラウザ上で表示することは可能ということなんです。
少々間違っていても、伝えることはできる。まさに言語そのものですよね。

正しい日本語を使うことが難しいのと同様に、正しいhtmlを使うということも中々難しいようです。

タグ

webサイトのソースコードを見るとのような、<>で囲まれた文字が沢山ありますよね。 これらをタグと呼称します。

htmlでは、このタグを並べて、指定箇所にテキストや画像のurlを挿入して、webサイトを構築していくのです。
タグには、webブラウザ上でテキストや画像をどのように表示させるか指定するという役割があり、種類も様々です。

例えば、文字を強調したいというときは

● <b>文章</b>や、
● <strong>文章</strong>
を使います。

「開始タグ」とスラッシュ(/)が付いた「終了タグ」の間に記載された文字が太くなります。

リンクを設置するには
<a href="リンク先のアドレス" >文章</a>
を使います。

中には終了タグが省略されるタグ等もあります。
例えば画像を表示するタグにはこのようなタグを使います。
<img src="画像のアドレス" />

といった感じで、目的や用途によって使い分ける必要があります。
正しい文法でhtmlを記述するためには、タグの役割を覚える必要があるということですね。

ウェブサイトの仕組みを知る! css編 其の1

ウェブサイトの仕組みを知る! html編 其の1ウェブサイトの仕組みを知る! html編 其の1 の続きです。

cssの役割

htmlとはなにか、をザックリと説明したところで、よりhtmlへの理解を深めていただくために説明しなくてはならないことが何点かあります。
その内の一つがcss です。htmlとセットで語られることが多いので、みなさん聞いたことはあるかと思います。
cssとは、Cascading Style Sheets(カスケーディング スタイル シート) の略称です。なんだかカッコイイですよね。

このcssとは一体何なのか?

webサイトは、html(マークアップ言語)によって構成されているというのは前述の通りですが、実はhtmlだけで作られているわけではないのです。htmlでは、おもにwebサイトの構造的部分を指定しているんです。テキストであるとか、どの画像を表示するかといった部分ですね。

それに対し、視覚的部分を指定するために使われるのが、このcssというわけなのです。視覚的部分とは、webサイトのフォントサイズや、画像をどの用に表示するかといったレイアウトに関することなどです。

以前はそういった領域も、htmlによって指定されていたのですが、本来のhtmlの目的に反するということでcssが登場したというわけです。

今ではhtml+cssでwebサイトを構築するという方法が一般的です。

すなわち!!

webサイトにとってhtmlが「骨」ならば、cssは「肉」、といったところでしょうか。

絶妙な例えが決まったところで、今日はここまでです!

ウェブサイトの仕組みを知る! html編 其の1

HTML講座 第1回目:htmlとは?

htmlは言語

まずはそもそも、htmlとはなんなのか?という基礎の手前の超初歩から始めていきたいと思います。
htmlというのはHyper Text Markup Languageの略称です。
「日本語」や「英語」などのような、言語の名前を表す言葉と考えていただければOKです。
百聞は一見に如かずということで、見ていただきましょう。

わからない人から見れば、ただのアルファベットと記号の羅列にしか見えませんね。
htmlとは、languageというだけに、言語なんです。日本語と同じ言語。

じゃあ日本語で書いてくれと言いたいところですが、日本では日本語、イギリスやアメリカでは英語を話すというのと同様に、web上で話す、伝えるために使う言語がhtmlなのです。マークアップ言語といいます。

ウェブサイトの”真の姿”

上記の画像のような、webサイトを構成する文字列を「ソースコード」とも呼びます。
いつも見ているwebサイトを右クリック(Google Chromeの場合)してみると、「ページのソースを表示」というメニューがありますね。
「ソースの表示」をクリックすると、そのページを構成しているhtmlの情報を見ることができます。
大抵の場合、どんなページのソースコードでも確認することができ、それこそが今見ているページの真の姿なのです。
みなさんが良く使っているであろうGoogleの検索結果も同じく文字のみでできあがっています。

ブラウザが人間に分かりやすくしてくれています

じゃあ何故こんなアルファベットと記号の羅列が、ちゃんとページとして見れるのか?

それはインターネットブラウザを通して閲覧しているからなのです。

子供の頃に3Dメガネってありましたよね、赤と青のセロハンが左右に張り付けてあるメガネ。
アレみたいなものなんですよ。

そう!html(ソースコード)を、インターネットブラウザという3Dメガネを通して見ると、webページになるということです。
どうでしょう?なんだかわかりやすく例えようとして余計わかりずらくなったような気も致しますが、本日はここまで!

ではまた次回!

Scratchでメッセージを使おう

メッセージって何?

メッセージは『メッセージを送る』というブロックを使い同じタイミングで他のことをしたいときに使います。
たとえば下のようなスプライトを作ってみましょう。

 

このように2つのことを同時にすることができます。
Scratchだと、『1秒待つ』、『〇〇と2秒いう』、『おわるまで〇〇のおとをならす』というブロックを使うとスクリプトの動きを止めてしまいます。
しかし、メッセージの機能を使うと2つのことを同時にしてくれるので動きを止めなくても動いてくれます。
Scratchには、他の動きを止めて動作するブロックが何個もあるので、動きを止めたくない時はメッセージを使いましょう。

メッセージを使ったよくある失敗

日頃生徒たちから、『メッセージ』を使ってうまく動かないというケースがあります。
まずは、下のようにスクリプトを作ってみましょう。

 

一回だけスペースキーを押すとちゃんと「にゃー」と鳴きますが、、、
スペースキーを押しっぱなしにしてみましょう。
「にゃにゃにゃにゃにゃ」とちゃんと動作してくれません。
これは、『ずっと』の中に入っているので、押されている間ずっと『メッセージ』を送り続けてしまいます。
『メッセージをうけとったとき』は『ずっと』受け取り続けてしまうのでこのような結果になってしまいます。
この場合は何かしら止める動作が必要です。
『1秒待つ』、『〇〇と2秒いう』などを入れて一旦送るのを止めてしまう方法や、『このスクリプトを止める』などを使って完全に止めてしまうのも方法の1つです。
メッセージの機能はとても便利ですが、使い方を間違えてしまうと、扱いにくくなってしまいます。
『ずっと』の中に『メッセージを送る』を入れる時はそこのところを気をつければうまく使うことができます。
皆さんも、どんどん『メッセージ』を使ってみましょう。

もっと勉強したい方へ

独学で学んでいると、つまずいてしまったときに解決ができなかったり、自分の作りたいものが作れなかったりします。
困ったときには、プログラマーの力が必要となります。
この内容は弊社が運営している、プログラミング教室TETRA UPで授業を受けることができます。
無料体験授業も随時行なっておりますので、ご応募お待ちしております。

ワイヤレス充電を可能にする○○とは

ワイヤレス充電を可能にする○○とは

ワイヤレス充電を可能にする○○とは

IoT機器が普及し始めるにつれて、従来のケーブルを使った充電方式はどんどん不便になるこ。その中、「ケーブルを使わずにすべての機器を充電する」という画期的な技術を実現したのが「Wi-Charge」。

イスラエルの企業である「Wi-Charge」は、赤外線を使い広範囲に安全かつ電力供給を行なうことを可能にした。

ひとつのトランスミッターで複数端末に接続が可能に?
「Wi-Charge」では「トランスミッター」と「レシーバー」の2つのユニットを使用し、トランスミッターは従来のAC・DC電源やUSBに接続することで、赤外線でレシーバーに電力を供給する装置で、部屋の天井などに取り付けると、約14畳の範囲をカバーできる。

レシーバーは充電する機器に取り付ける装置では、Androidスマホに多く使われているMicro-USBや、iPhoneのLightningなどに接続するもの、レシーバー内蔵のスマホケースなどが想定され、レシーバーを装着したデバイスがトランスミッターの範囲内に入ると、トランスミッターは自動的にレシーバーを判別し赤外線を放射する。
レシーバーは赤外線を電力に変換する太陽電池を搭載しており、ケーブルなしで充電が行われるという仕組みだ。

トランスミッターが自動的にレシーバーを見つけて局所的に赤外線を放出するため、電力のロスは発生しないという。機器のバッテリーが満タンになると自動的に給電を停止するため、過充電が起こることもない。
複数の機器を同時に充電することも可能。

また皆が心配する点として、「Wi-Charge」はレシーバーを手で覆うと充電がストップするが、これは人体に安全な国際規格に準拠していることを意味している。「Wi-Charge」によると、赤外線は太陽光の50%を占める自然光の一種であり、高周波の500倍、超音波の3000倍安全だと説明している。

広範囲で使用可能かつ安全なワイヤレス給電装置「Wi-Charge」は、電力供給の次世代の形だ。家に帰って机の上にスマホを置くだけで充電される。これまでの電力供給の常識は、がらりと姿を変えるかもしれない。
(参考:bouncy)

プログラミングは独学じゃだめ?プログラミングスクールで学ぶメリット

プログラミングは独学じゃだめ?プログラミングスクールで学ぶメリット

プログラミング入門にあたり、独学ではいけないのでしょうか?プログラミングスクールに通うメリットとは一体なんでしょうか。

プログラミングスクールで学ぶメリット

・習慣となる
・わからないことがすぐ聞ける
・転職や就職などのアドバイスがもらえる

メリットといえば、なんといっても一番はプログラミンング自体が生活の一部となり、習慣となることが一番大きいのではないでしょうか。
なかには独学でプログラミングを習得している方もいらっしゃいますが、周りにプログラマーの友達がいなかったり、PC自体を普段扱わないような方にとって独学のハードルは少々高いです。実際に実務で使う技術などはやはり直接エンジニアやプログラマーに教えてもらった方が習得の近道となります。

そしてわからないことがすぐに聞けるということのメリットもとても大きいです。プログラミングの入門にあたり、つまづく壁はたくさんあるかと思います。プログラミングをはじめて最初の頃なんて、わからない横文字だらけで混乱気味になる方もいると思います。グーグルで検索しても、さらにわからない横文字で説明されて意味がわからなくなったり・・・。そんな時にすぐに先生が教えてくれたら助かりますよね。

実際にプログラマーが指導しているプログラミングスクールでは、転職や就職のアドバイスをもらえることもあります。これからIT業界に転職を考えていたり、フリーランスを目指す方にとっては、相談できるプロの相手がいることは大きいです。

何を学べばいいのか

iPhoneアプリが作りたい方はswiftを、機械学習を学びたい方はpythonを。というように目的が決まっていれば、検索すればすぐに学ぶべき言語がわかってくるとは思います。
しかし、プログラミング入門にあたり、進みたい分野や、やりたいことが具体的に決まってない方にとっては必ずと言っていいほど悩むポイントかと思います。多くのプログラミングスクールでは、各言語について説明しながらコースを一緒に考えてくれると思います。プログラミング入門にあたり、例えば、Javaをやれば就職先が多い!とかPHPやフロントエンドを学めば、こなせる案件がたくさんある!といったことも勿論大切ですが、やはり最終的にどんなことに携わりたいか、どんなものを開発したいかをしっかり考える必要があると思います。

独学ではだめか

独学で学べる方は、勿論独学でも問題ございません。実際に独学でプログラミングを学習し、とても優秀なプログラマーになっている方もたくさんいらっしゃいます。しかし多くの方にとって、たとえプログラミングスクールに通わなくても、プログラミングに詳しい人が側にいてくれた方が良いということは、もはや言うまでもございません。すぐにわからないことを教えてくれるプログラマーの友達や知り合いがいたら、独学でも習得できるかもしれません。しかしいくら友達といっても、無償でなんでもかんでも質問しまくるというのは、さすがに気が引けますが・・・

兎に角やってみるべし

結論:まずは兎に角やってみるべし!です。プログラミングスクールが近くにあれば、無料見学や初回無料体験教室などを開催しているスクールも多いので、まずは予約して遊びに行くつもりで見にいってみましょう!

見えますか?見えませんか?

「ステレオグラム」というものがあります。
「立体画」や「マジカルアイ」とも呼ばれます。

一見するとただの不規則かつ不気味な画像ですが、とある見方をすると立体的な絵が浮いて見えてくるというものです。
正確に見るには意識して両目を使う必要があるので、目を使う分、視力回復に効果があると言われています。



早速どんなものなのか見てみよう

さて、初めて見た方はそれはもう何がなんだかさっぱりな、ただの模様にしか見えませんね。

ただ単にボケーと見ているだけでは何も見えないのです。
立体的に浮き上がってくる絵を見る為には「見る方法」を取得しなくてはなりません。

一般的には2つの方法があります。

方法1 – 平行方

画像を真っ直ぐに、まどろみの中で画像を捉えていくイメージで。

  1. 視点を定めずボヤァとリラックスした状態で、画像に焦点を合わせないように眺める。画面とは30~40cm程離す。
  2. 画像がボヤけてきたらその調子、更にリラックスして、画像の奥に視線を合わせる。
  3. ぼんやりと見えていた画像を中央に近づける。
  4. 視線を画像に戻すと、画像が立体的に見えはじめる。

方法2 – 交差法

寄り目で画像画像を捉えていくイメージで。
右目で画像の左側を、左目で画像の右側を見るように。

  1. 画像の前に人差し指を立て、指の先端に視線を合わせて寄り目で。
  2. 奥にボヤっと見える画像が複数に見え始めたら、その目のまま画像に視線を移す。
  3. ボヤっと見える画像の中心に目線を写していく。

と、いった感じで。

色々見てみよう

さて、色々と画像や見る為の方法を(ざっくりと)紹介しましたが、
いかがでしたでしょうか。

勿論すぐに見える訳ではありません。
少なからず見方に慣れるまでは辛抱強く続けていくしかありません。

と、偉そうに説明しておりますが!

実はわたくしはさっぱりこれっぽっちも欠片すらなんにも見えません!!
小学校時代にこのステレオグラムを知ってから結構長いこと試してますが、見える兆しすらありません。

実際にどう頑張っても見えない人も少なからずいるそうです。
私もそうですが、両目の視力が大きく違っていたり、乱視が入っているとなかなか簡単には見えないようです。
近しい友人は一瞬で見えていた(らしい)のでもはや適正や才能な気すらしています。。。

あなたには見えますか?

最後に

今回のおもしろ雑学いかがでしたでしょうか?世の中まだまだ不思議なことがいっぱいでワクワクしますよね!

当教室TETRA UPでは、プログラミングの基礎を学べるScratchコース、ものづくりとプログラミングを実際触って学べるロボットコース、そして本格的なプログラミングを習得できるunityコース、そして総ユーザー数約4億人のRobloxコースも展開しております。オンラインでも受け付けておりますので、この機会にコチラより体験してみてください。



 

【Scratch】クローンを使おう

クローンってなに?

Scratchを始めたばかりの人は思うように使えずにゲームが作れなかったりしているかと思います。
しかし、『クローン』をうまく使うことによって、作れるゲームの幅がぐーんと伸びます。
クローンはスプライトをゲーム中にそのまま複製できるというものです。
つまり、スプライト自体の分身を作ってあげるための機能です。

クローンを使って弾を作ろう

最初に『新しいスプライト』から『Boal』というものを入れてみましょう。
こちらが今回の弾になります。

入れたら今度は

と『Boal』にスクリプトを作ってみましょう。
なぜ入れるかの解説は以下の通りです。
『イベント』→『旗がクリックされた時』
スタートの時動かすため。
『制御』→『ずっと』
ずっとを入れないと、押された判定がされないため。よく忘れる人もいるので注意。
『見た目』→『隠す』
弾が最初から出ているとおかしいので隠す
『制御』→『もし〇なら』
『調べる』→『スペースキーが押された時』
スペースキーが押されている時の判定をするため
『制御』→『自分自身のクローンを作る』
スペースキーが押された判定がされたら『Boal』のクローンを作る
『演算』→『〇ではない』
『制御』→『〇まで待つ』
『調べる』→『スペースキーが押された時』
スペースキーを押しっぱなしにするとクローンが出続けてしまうので入れましょう。
入れないと古いパソコンだと重くなったり、最悪フリーズする時があります。
どうしても押しっぱなしで出したい場合は代わりに『1秒待つ』を入れてあげましょう。
これで、弾を出す準備は完了です。
しかし、これだけではまだ弾は動いてくれません。
クローンを作ったら、クローンに動かすためのプログラミングをしてあげないといけません。
では下のようにスクリプトを作ってみましょう。

これで旗のマークをクリックすれば弾がネコから弾が出るようになったかと思います。

『制御』→『クローンされた時』
クローンの命令するために使います。
『見た目』→『表示する』
さっき『隠す』を入れているので出すためには『表示する』を入れないと出てきません。
『動き』→『スプライト1へ行く』
ネコから弾を出したいのでネコのところへ行くようにする。
『制御』→『〇まで繰り返す』
『調べる』→『端に触れた』
端に触れるまで繰り返すため
『動き』→『10歩動かす』
動かすために入れています、『繰り返す』の中に入れることで繰り返されます。数字を変えると速さが変わります。
出したい方向が決まっているなら『x座標を10ずつ変える』でも同じ動きをします。
『制御』→『このクローンを削除する』
クローンを削除するために使います。クローンは残っていると動きが重くなる原因になるので、
役割の終わったクローンは『隠す』ではなく、『削除』してあげましょう。
始めたばかりの人がよくこれで失敗します。
これで弾は完成しました。
どうでしょうか?これだけでも色々なゲームの幅が増えたかと思います。

この内容は弊社が運営している、プログラミング教室TETRA UPでも授業を受けることができます。
無料体験授業も随時行なっておりますので、ご応募お待ちしております。