[ウェブサイトの仕組みを知る!]
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を記述するためには、タグの役割を覚える必要があるということですね。

ウェブサイトの仕組みを知る! 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とは？

htmlは言語

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

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

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

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

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

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

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

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

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

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

ではまた次回！

メッセージって何？

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

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

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

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

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

もっと勉強したい方へ

独学で学んでいると、つまずいてしまったときに解決ができなかったり、自分の作りたいものが作れなかったりします。
困ったときには、プログラマーの力が必要となります。
この内容は弊社が運営している、プログラミング教室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やフロントエンドを学めば、こなせる案件がたくさんある！といったことも勿論大切ですが、やはり最終的にどんなことに携わりたいか、どんなものを開発したいかをしっかり考える必要があると思います。

独学ではだめか

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

兎に角やってみるべし

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

クローンってなに？

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

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

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

入れたら今度は

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

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

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

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

少し前ですが、Apple社の開発者向けイベント「WWDC2017」にてiMac系統の最強機種であるiMac Proが発表されました。

公式によると今年12月の発売予定だそうで、お値段なんと最低価格4,999ドル～・・・
日本円にしてなんと50万以上という、お値段もかなりの強者のようです！

Apple公式サイトでは自分好みにオプションを追加しての購入もできるのですが、オプションを付けまくってiMac Proの最上位モデルを購入しようとなると、なんと200万円近くになる見積もりだとか。。。

現行のiMac10台くらい買えるやん

しかしさすが最強を謳うだけあって、性能もお値段以上のとんでもないことになるようです。

ディスプレイ

●現行のiMacと同じ 27インチ (5120 x 2880ピクセル)
●今までのiMacと比較して43%明るさが向上
●10億色も映し出すことが可能

CPU

●標準 8コア
●オプションで最大18コアまで増量可能

処理速度を司る部分です。
18コアだと、小学生の宿題の算数ドリルを18人の数学博士が分担するような感じですかね。
そりゃもうあっという間に宿題が終わるでしょう。

メモリ

●標準 32GB
●オプション最大 128GB

どれだけ同時に処理をできるかです。
現行のiMacですと標準で8GBのメモリが搭載されています。

メール、ブラウザ、動画編集アプリなど色々なアプリを同時に起動する度にメモリは消費されていきます。

8GBだと8メートル×8メートルの机で色々な図面や物を置いて作業しているようなもの。
様々なアプリを同時に起動すればそれだけ机の上が散らかって作業がしにくくなりますよね。
つまりメモリ128MBということは、128メートル×128メートル(！)もの机を手に入れるということ。

これならばどれだけアプリを同時起動してもごちゃつく事はそうそうなくなりますね。

ストレージ

●標準 1TB
●オプション最大 4TB

物を保管する場所の広さ。
1TBと4TBでは押入れとウォークインクローゼット位の広さの違いがあります。
以前は1TBの半分である500GBでも「スゲー！！」と感じていたものです。

などなど….
グラフィック(GPU)やオーディオに関しても強化が成されているようで、至れり尽くせりですねー。

なんといっても！

そしてなんといっても一番の変更点は、製品自体が今までのアルミ色ではなく、
スペースグレイに統一される事！

初の黒系統iMacです！Apple好きとしては性能よりこちらの方が重要だったりなかったり！

付属で付いてくるキーボードやマウスもスペースグレイにカラーチェンジしている様子。
しかもこれら2つは市販の予定は無いそうで、「コレが使いたいならiMacPro買えよｵﾗｧ！」ということになります！

冷静に考えると一個人で所有するにはオーバースペック且つ高価すぎる気もしていますが、いつかは手に入れたい！

その為にお仕事を頑張る次第です！！

Unityとは

UnityとはiOSやandroid、さらにプレステ4、WiiUさらにVR/ARなどのあらゆるプラットフォームに対応しているゲーム開発エンジンです。これまでとても複雑だった物理演算などの計算をこなし、AssetStoreでは豊富な拡張が可能となっている、とても強力なエンジンです。読み方はユニティです。

Unityのプログラミング教室はコチラ

Unityができるようになると・・・

Unity作品一覧

上記一覧ページにあるような、様々な作品を開発することができるようになるかもしれません。

Unityでつくられている有名アプリ

ポケモンGO

リリース後爆発的大ブームでしたね、ついでに携帯バッテリーもかなり売れました。AR(拡張現実)と位置情報をゲームとして取り入れたアイディアも面白いアプリですよね！

スーパーマリオラン

ついにマリオもスマホへ。マリオが片手で遊べるスーパーマリオランも、Unityでつくられています。

白猫プロジェクト

コロプラの大ヒットアプリ。独自のコントローラー「ぷにコン」は操作性もよく、白猫はファンも多いですよね。

ドラゴンクエストVIII 空と海と大地と呪われし姫君

大ヒット作品をiOS、android用にリメイクしたこの作品。価格も従来のコンシューマー価格より安いのでお得な気分です。

あなたは大丈夫？知らないと恥ずかしいビジネスマナー

僭越ながら弊社クイズアプリです。Unityというと3Dを連想しがちですが、こうした2Dのカジュアルゲームも作れるのです。しかもマルチプラットフォーム対応でiOS、androidどちらも対応しているのでとても便利です。

Unityスクールなら

そんなUnityですが、弊社教室でも講座をおこなっております。C#を習得しながらUnityを学習していくもよし、Unityを楽しみながらC#を身につけてしまってもよし。Unityを習得すると一気に強力な武器が手に入ります。スマホの性能もどんどん今後あがっていき、ますます需要は高まっていくことと思います。
まずはお気軽に体験教室におこしください。
新しい世界がきっと待っています。
Unityのプログラミング教室はコチラ

子供のプログラミング入門

最近では小学生や中学生にとってプログラミングは当たり前の存在。東京新宿区の四ツ谷(四谷)でプログラミング教室を開講しております弊社Knocknote(ノックノート)でもたくさんの子供たちがプログラミングを学びにきます。その背景には2020年の小学校でのプログラミング教育の必修化はもちろん、将来のIT人材不足があります。そうした中で、習い事としてのプログラミングの重要性は今後ますます高まっていくでしょう。今回の記事では、子供のプログラミング入門にあたり効果的な3つのポイントをまとめます。

1.プログラミングの楽しさを教える

子供のプログラミング入門にあたり、プログラミングそのものを教えるというよりは、まずはプログラミングができるととても楽しいんだと言うことを教えることです。人間の世界では不可能なことでもつくれてしまうことや、少し数値をいじれば全く違った挙動を見せたりなど、プログラミングができるようになった後のイメージを覚えてもらうといいです。子供が大好きなゲームも、これも誰かがつくったプログラミングでできている、というところから興味が湧いてきます。ゲームで遊ぶだけではなく、自分でゲームをつくってみたい！そう思ってもらえたら、まずは成功です笑

2.作りたいものをはっきりさせる

子供はプログラミングを作っている最中にも、あれもやってみたい、これもやってみたいといろいろな方向にいきます。そうではなく最初に最終目標をきちんとたて、そのために何が必要かを決め、プログラミングをしていくのです。たとえばサッカーゲームがつくりたい！といったら、ボールやゴールも必要ですし、プレーヤーやボールにどんなプログラミングが必要か考えることが不可欠です。大きな目標を達成するには小さな目標を細かく達成していけば、ちゃんと到達するということをプログラミングを通して学んでいきます。

3.自分で考えさせる

自分でなんでだろう、どうしてだろうと子供が頭を捻らせているとき、子供は成長しています。プログラミングはトライアンドエラー、試行錯誤を繰り返す挑戦のステージとしては最高の舞台です。何度でも間違えて何度でも挑戦していいのです。その中でこうゆうときは、こうすればいいんだ！という子供の中で成長体験が重なってきて、どんどん自分がつくりたいものをつくれるようになっていきます。

Knocknote(ノックノート)では

弊社のプログラミング教室では、時間がかかっても、子供に自分で考えてもらうということを重要視しています。やーめた！と考えることから逃げるのが楽と考えさせず、考え抜くってとても楽しいことなんだ！と子供に覚えてもらえる様にカリキュラムを組んでいます。1年間でとんでもなく成長していく子供たちの姿をみていると、本当に子供たちの将来が楽しみで仕方ありません。少しでも興味がある方は是非一度体験教室まで起こしください。子供から大人まで各コース開催しております。
Knocknote Education