スポンサー

【子供プログラミング教育】個性を伸ばす！

子供プログラミング教育を始めて２年９カ月が過ぎようとしていますが、

昨日は、四国に住む小学校４年生のｋちゃん。

Scratchプログラミングを教え始めて９カ月になります。

絵を描くのがとっても好きで、コードを書く前に必ずデザインに凝ります。
１ドット単位で細かい作業も全く苦ではないようです。
好きな事をとことん追求する時間を大切にしています。

見た目が完成したのちに、プログラミングに取り掛かります。

最初はおっかなびっくりといった感じのプログラミングも、最近は自分のやりたい事を形にする事が出来るようになってきています。

こんな機能を追加したい！と思いついたら、まずデザインをきちんと用意してからプログラミングに入ります。

もう少しトレーニングをつんだら、コンテスト挑戦を勧めてみたいと思います。

今後のさらなる成長がとっても楽しみです！！

広告

このブログの人気の投稿

【CSS】アニメーション等動作がカクカクする時の対処法

始めに 参考にさせていただいた元記事 カクカクするのはブラウザごとに異なる アニメーション時のチラつきの原因はほとんどが「アニメーション」として処理されていないということです。 一般的なブラウザ(Chrome,Firefox,Safari,Opera)の最新バージョンであればあまり気にする必要もないのですが、一部のデバイス内のアプリ等(cordova等)では古いバージョンのブラウザを使用している場合や、古いデバイスであると古いブラウザになってしまうでしょう。 (IEでもチラつきが目立つ。また、Edgeの場合もIEとほぼ変わらずチラつきがみられる。) 今回は一般的な3つの対処法を見ていきます。 対処法 1 サイトによっては ○○{ transform: translate3d(0,0,0); } などというものもありますが、これはブラウザに無駄な処理を与えてしまっているため良い対処法ではない他、直らない場合もあるのでこれは軽く頭に入れておく程度でいいでしょう。 2 次の対処法は、will-changeです。 初めて聞く方もいると思いますが、will-changeを使用することで、要素にどのような変更を加えるかを先にブラウザに伝えることができます。 変形処理を伝えるときはこのようにします。 ○○{ will-change: transform; } また、アニメーションは次のようにします。 ○○{ will-change: animation; } さらに、複数の処理を同時に行うときはカンマ( , )で区切ることでまとめて記述することができます。 ○○{ will-change: transform,animation,position; } このようにすることで、translate3dのように不要な処理なく効率的に処理することができます。 3 また、この方法でも直る場合があります。 ○○{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } この要素について詳しくはこちらを見ていただくといいと思います。 backface-visibility 最後に 一番最適な対処法は2番目の...
続きを読む

【JavaScript】日付表示を最適化する(SNS、チャット等向け)

SNS等の日付表示を最適化 SNS等では、日付表示で少し工夫がされていますよね。 昨日の投稿に「昨日」や、今日の投稿は日付表示がなかったりと、見やすくなっていますよね。 なので、今回の記事では、JavaScriptで簡単に表示を最適化するプログラムを作ってみましょう！ 日付を取得 最初は日付取得から始まります。 年、月、日、時間、秒を一つ一つ取得していきましょう。 var today = new Date(); そして一つ一つ取得していきます。 //今日の年 var year = today.getFullYear(); //今日の月(1月が0なので+1) var month = today.getMonth()+1; //今日の日 var data = today.getDate(); //今の時間 var hours = today.getMinutes(); //今の分 var minutes = today.getMinutes(); //今の秒 var seconds = today.getSeconds(); 月だけ+1してあります。これはよくやってしまうミスで、あれ？と思うと大体1足していないのが原因です。 変換したい日付を用意 どのようなデータになっているかはその時次第ですが今回は日付の取得時と同様に一つ一つ変数に格納しておきます(時刻データが一つの文字列等になっている場合正規表現等でうまく抜き出してください。正規表現に関連する記事はこの辺で探してください: 正規表現 - Qiita ) 簡単に適当な日付を入れていきます。 今回は、昨日の日付を入れましょう。ソースコードは次のようになります。 読み込み中... ※このソースコードはJavaScriptで最新の日付になるよう更新しているため表示されない場合があるほか、一日などは前の日付が0日と表示される可能性があります。 全ての要素に「_2」を付けわけました。 ここから最適化するコードを書いていきましょう。 最適化するコードの記述 コードを書いていきますが、今まで記述したコードとは変数名等異なりますので注意してください。 まずはざっくり作ってみました。 var json={year:○○,month...
続きを読む

超軽量DOM操作ライブラリdom_sen.js var1

始めに 説明は こちら をご覧ください。 使い方 まず、もちろんですが読み込み方です。ライブラリを使用するソースコードより早い位置にこのソースコードを記述します。 <script src="https://tamralworld.com/library/dom_sen_v1.js"></script> そして使用可能な関数一覧(使い方はのち) qsa() qs() qsa_html() qsa_text() qsa_display() d_html() d_text() d_CSS各指定()* *後程詳しく 関数の使い方 qsa( CSSセレクタ ) document.querySelectorAll() の省略です。 qs( CSSセレクタ ) document.querySelector() の省略です。 qsa_html( CSSセレクタ , HTML) Jqueryの $(CSSセレクタ).html(HTML); と同様です。 qsa_text( CSSセレクタ , テキスト) Jqueryの $(CSSセレクタ).text(テキスト); と同様です。 qsa_display( CSSセレクタ , CSS[display]の値 ); CSSセレクタで選択した要素のスタイルのdisplayを変更します。 d_html( 属性ネーム , 属性ネームの値 , HTML ) 属性ネームは要素の属性に「d_属性ネーム="属性ネームの値"」のように指定されている属性のHTMLを変更します。 例: <span d_html="script1">変更前</span> <script> d_html("html","script1","変更後"); //属性d_htmlがscript1の要素のHTMLを「変更後」に変更 </script> d_text( 属性ネーム , 属性ネームの値 , テキスト ) 属性ネームは要素の属性に「d_...
続きを読む