有楽町MULLION(マリオン)〜銀座のクリスマスイルミネーション(コロナ前2018年11月の写真スライド)

お疲れ様です。

有楽町MULLIONマリオン〜銀座までのクリスマスイルミネーションを散策して、ショートムービーにしました。

※ 音量注意!! ※

今日も見て下さってありがとうございました。

息抜きに、写真で癒し(=^x^=)に戻る
自己紹介

ストレス解消グッズ
心がラクになる本
発達障害と健康の本
何の本を読んだら良いのか分からない時に読む本

インスタ再開しました。

写真スライドショーが作れる動画編集ソフトを使って、YouTubeにUPしてます。

写真の投稿を始めました。
(写真AC)のプロフィールページです。

写真のアンケートを実施しております。
宜しかったらご回答頂けますと、大変励みになります(=^x^=)

いたばし花火大会(2019年8月)

お疲れ様です。
東京都内でもサイズが大きくて迫力のある、いたばし花火大会のショートムービーを作りました。

※ 音量注意!! ※

今日も見て下さってありがとうございました。

息抜きに、写真で癒し(=^x^=)に戻る
自己紹介

ストレス解消グッズ
心がラクになる本
発達障害と健康の本
何の本を読んだら良いのか分からない時に読む本

インスタ再開しました。

写真スライドショーが作れる動画編集ソフトを使って、YouTubeにUPしてます。

写真の投稿を始めました。
(写真AC)のプロフィールページです。

写真のアンケートを実施しております。
宜しかったらご回答頂けますと、大変励みになります(=^x^=)

Web開発【基礎編】(HTML/CSS/Bootstrap/JavaScript/jQuery)プログラミングロードマップ ドットインストールのレッスン紹介

この記事では、Web開発が出来る様になるために、プログラミング学習コンテンツの、ドットインストールのレッスンの中でも、HTMLやCSS、JavaScriptやGoogleが提供しているツール、jQueryなどのレッスンをロードマップ形式で感想や紹介をして行きます。

レッスンをブログに掲載するにあたって、ヘルプを確認しました。
個人利用であり、非商用で、出典を明示してリンクしていて、このブログは非公式のものです。

ポートフォリオを作成しました。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

あなたのプログラミングの勉強方法について、学習中の方も、クラウドソーシングなどで既に結果を出されている方も、教えて頂けたら嬉しいです。

ここからは、ドットインストールの周ごとのレッスンの感想と、ロードマップとして、各レッスンのリンクと感想を掲載していきます。

■ 1周目の感想 ■
学習期間:2022年6月27日〜2022年9月8日 学習に要した日数 73日間

HTML/CSS/Bootstrapについては、動画を聴いて、その通りにエディタにコードを書いて動かして、ブラウザで結果を確認して、講義についていくだけでもう、一杯一杯って感じでした。
大量の情報が押し寄せた感じで、ワケワカメ、意味フミコ状態です。まだまだ私は、HTML/CSS/Bootstrapの楽しさも良く分からないですし、私は本当にWeb開発系が向いているのかどうなのか、少々不安ではありますが、もう少し勉強を続けてみないと、はっきりと向いていないとも言い切れないのかな・・・・と思いました。
JavaScriptに関しては、過去にJava/C言語/アセンブラ/GAS(Google Apps Script)/Pythonの経験があった為、基本的な内容はスラスラと進みました。
jQueryもJavaScriptの基礎文法が何となくですが理解できてはいたので、HTML/CSS/Bootstrapよりかは理解しやすかったです。

では、ここからは、各レッスンごとの感想をロードマップ形式で掲載していきます。

はじめてのWeb制作 全11回 無料
HTMLやCSSが全くの初めての人が、「山田太郎」のプロフィール紹介サイトを作りながら体験していくレッスンです。
また、このレッスンで作った制作物は、はじめてのJavaScript 全8回 無料でも使いますので、消さないようにして、残しておくと良いでしょう。

● もっと詳しくHTMLCSSを学んでみよう ●

Web制作の準備をしよう macOS編 全10回 無料
Windows編」もあります。
今後のHTMLやCSSの学習に備えて、VS Codeを使えるように設定の仕方を紹介しているレッスンです。

詳解HTML 基本タグ編 全27回 有料
imgタグ、strongタグ、backquoteタグ、hrタグ、brタグ、リスト、tableタグ、リンクを貼る、articleタグ、timeタグ、divタグ、spanタグなどの基本的なタグやMDNについて学べます。

詳解HTML フォームタグ編 全13回 有料
入力用部品、ドロップダウンリスト、チェックボックス、ラジオボタン、ボタンを作成します。

詳解CSS 基礎文法編 全33回 有料
色や枠線、中央揃え、RGBA、HSLA、ボーダーの角を丸める、padding、margin、marginの相殺、position、fixed、絶対配置、z-indexで重なり順、box-sizing、calc、要素に影を付ける、背景のスタイリング、float

詳解CSS セレクター編 全12回 有料
要素型セレクター、classセレクター、idセレクター、属性セレクター、全称セレクター、:hover擬似クラス、:nth-of-type、:empty、:not、詳細度、優先されるスタイル

詳解CSS フレックスボックス編 全16回 有料
要素を並び、揃え、反転、要素の伸ばし、カラムレイアウト、横並び、画像とテキストの配置

詳解CSS アニメーション編 全20回 有料
ボックスをホバーすると角が丸くなるアニメーション、図形の移動、回転、時間の制御、アニメーションの速度に緩急をつける、デベロッパーツールで細かい調整、一括指定プロパティ、繰り返し回数、ポップアップアニメーション

詳解CSS レスポンシブウェブデザイン編 全8回 有料
ブラウザ幅に合わせて、レイアウトを変えていくテクニックを学んでいく。
メディアクエリー、モバイルファーストな開発、要素の表示/非表示

詳解CSS グリッドレイアウト編 全16回 有料
格子状のレイアウトについて学んでいく。
ボックスの複製や配置、直感的な配置指定、要素を揃える

詳解CSS 変数編 全7回 有料
色を変えるなど、一つ一つ指定して変更すると時間がかかるので、変数を使うと便利。
変数の継承、テーマーカラーの管理と変更

● ウェブサイトをゼロから制作してみよう ●

実践!ポートフォリオサイトを作ろう 全17回 有料
山田太郎のポートフォリオサイトを作って行きます。
山田太郎の作った3つのゲームをWORKSに配置します。

実践!アプリ紹介ページを作ろう 全24回 有料
架空のお散歩アプリ、「Dotinstall Walking」の紹介サイトを作っていきます。

実践!ECサイトをマークアップしよう 全27回 有料
架空の家具販売店のサイトを作ります。

● Webサイトを公開してみよう ●

GitHub Pagesでウェブサイトを公開しよう 全11回 有料
GitHubにアカウントを登録し、リポジトリを作成、サイトを公開。
サイトを更新、プロジェクトサイトの作成と公開、リポジトリの削除

● その他のレッスン ●

Bootstrap 5入門 全21回 有料
レスポンシブに対応したサイトを素早く作れるBootstrapについて学習します。
カラムレイアウトやグリッドシステム、ユーティリティ的なクラス、paddingやmargin、実践的なレイアウトなど。

はじめてのJavaScript 全8回 無料
このレッスンでは、以前にはじめてのWeb制作 全11回 無料で使った、
山田太郎のプロフィールサイトに動きを付けて行きます。

● エディタを使いこなそう ●

Visual Studio Code入門 全13回 無料
マイクロソフト社が開発している、無料エディタのVS Codeについて、開発効率が上がるショートカットキーや、Emmet(エメット)などを学びます。

● Googleが提供するツールを使おう ●

情報が古くて調べても良くわからなかった所や、ATOMエディタ推奨で、VS Codeでは出来なかったところ、私の環境で行って上手くいかなかったレッスンは飛ばして、下記のレッスンのみを行いました。

マテリアルアイコン入門 全6回 無料
マテリアルアイコンは種類は少ないですが、無料で使えてGoogleが提供しているという安心感があります。

Google Charts入門 全9回 有料
JavaScriptで簡単にグラフが書けるツールを勉強します。
円グラフ、3D、切り出し、棒グラフ、積み上げ棒グラフ、折れ線グラフを作って行きました。

Chrome Developer Tools入門 全10回 有料
Chrome内に内蔵されているデバッグツールについて、各パネルの使い方を勉強しました。

Google Apps Script入門 全20回 有料
主にスプレッドシートを操作します。情報が古いので、GASエディタの表示の仕方が、2022年8月時点では、拡張機能→Apps Scriptになります。これはまた変わるかも知れません。トリガーで時間指定して実行させることや、GoogleフォームやG-mail、HTMLについても学びました。
個人的には、GAS全く初めての方向けというよりも、普段本でGASの勉強をしていて、補助教材として使う様なレッスンだと思いました。私が使っているGASの本について掲載します。

スプレッドシート自体初めてという方が、気軽にGASを体験出来る本です。
プログラミングやパソコンに自信が無いと不安な方におすすめです。

この教材「詳解! Google Apps Script完全入門 [第3版]」を使ってGASの勉強をしている方は本当に多いですし、基礎文法からGoogleの各サービスまで詳しく学びるので、どの本にしようか迷っている方に1番おすすめしたい本です。

では、ドットインストールのレッスンに戻ります。

Google Fonts入門 全5回 有料
Googleが提供しているウェブフォントを使います。講義ではATOMエディタでしたが、VS Codeでも無事に動作しました。

● もっと詳しくJavaScriptを学んでみよう ●

詳解JavaScript 基礎文法編 全26回 有料
console.logを使って、プログラミングでは定番の「Hello world」という文字を表示させたり、定数と変数の違い、変数を用いた簡単な計算を行いました。また、if文、switch文、for、whileループと特定の値をスキップするcontinueや処理を中断するbreak、関数、ブロックとスコープについて学習しました。この辺りは、Java、C言語、Python、GASの経験があったので、比較的スラスラ進みました。
GASでJavaScriptの基礎文法を勉強していた時、「アロー関数」がどうしても分からなかったのですが、このレッスンで、やっとアロー関数が理解出来るようになりました。


詳解JavaScript オブジェクト編 全35回 有料
基礎文法編と同じファイルをそのまま使ってレッスンを受けられます。
配列の基礎、配列の要素にアクセス、配列とループの組み合わせ、push()で配列に要素を追加までは、他の言語の経験もあってスラスラ進めました。
unshift()、shift()、pop()が、良く考えると分かるのですが、一瞬では出てこない状態になりました。splice()で要素の削除や追加は、少し混乱しました。スプレッド構文と分割代入は、名前だけは聞いたことがあったのですが、このレッスンでようやくハッキリ理解出来ました。分割代入の値の交換は便利そうです!
レスト構文は初めて知りました。変数に代入したい値と、配列として使いたい値を指定できるのは便利だと思いました。
forEachとアロー関数の組み合わせは、少し難しかったです。
mapとアロー関数で別の配列を作る処理、filterで条件に合う要素のみ別の配列を作る処理は、アロー関数の省略が難しかったですが、別の配列が新たに出来た時は面白かったです。
オブジェクトについては、簡単なオブジェクトを作って表示させて、用語の説明がありました。オブジェクトの値の変更や、追加、削除は直感的に理解出来ました。
オブジェクトもスプレッド構文や分割代入、レスト構文が使え、その挙動を確かめました。オブジェクトの全ての要素の列挙や配列の中に複数のオブジェクトが入った複雑な構造で、特定の要素を取得しました。
単純なデータ型と、複雑なデータ型の配列で、代入した時の出力の違いを確認しました。配列での代入に関して、なぜその様な挙動になるのかは、基本情報技術者試験を勉強していた時に、選択言語でアセンブラを勉強していた時に、アドレスについてかなり深く学んだことが、理解を助けてくれました。
文字列の操作では、文字列の個々の文字にアクセスしたり、部分文字列を取得しました。
文字列の操作では、結合や分割、分割代入をして、文字列と配列を扱いました。この辺りは比較的分かりやすかったです。
配列の数値の合計・平均・小数点の扱い、乱数の辺りは、多少経験があるので、スラスラ進めました。乱数を指定の整数の範囲で表示させる方法の公式で、だいぶ乱数の理解が進みました。
日時の取り扱いは、JavaScriptでは、「月」に注意しないといけないと思いました。
alertやconfirmでメッセージを表示させると、いよいよWeb開発っぽくなってきた感じがしました。
タイマーを作ったり、IF関数を使って、タイマーを止めたりする処理が面白かったです。setTimeoutとsetIntervalの違いで、システムの負荷の例でやっと理解できました。
例外処理に関することは、今まで勉強して来た言語では、めんどくさそうだし、どうせ使わなそう・・・なんて思って避けて来ましたが、ドットインストールの解説は、非常にシンプルで分かりやすかったです。
クラスの実装については、図を用いた解説の後、次のレッスンで実際にコーディングしました。説明自体は分かりやすかったものの、エラーが起き、ソースコードで自分のコードと比較ボタンを押して、どこが違っているのかを調べて、3箇所違っていたので、直したところ、ブラウザで無事に実行出来ました。多分、私はクラスについて殆ど理解していないと思います。
カプセル化とは何なのかについては、ぼんやりと掴めた感じです。
static 静的メソッドなど、他の言語を別のサービスで学習していた時は混乱していましたが、こちらのレッスンで、頭の中の絡まった糸が、だいぶほぐれて来ました。
クラスの継承は、まだ理解不足な感じがしました。もう少しこの辺りを頑張ります!


詳解JavaScript DOM編 全21回 有料
オブジェクト編と同じファイルをそのまま使ってレッスンを受けられます。
h1タグとpタグぐらいの簡素なHTMLを作って、h1やpタグを書き換えました。
オブジェクト編で学んだ配列や、forEach、setTimeoutの復習にもなりました。
要素の取得方法が、色々出てきてごっちゃになりましたが、Nodeについては、基本情報技術者試験で随分勉強したので、雰囲気だけは掴めた感じです。
ボタンを押したらメッセージが書き変わる処理を学んで、やっとWebサイト制作らしくなって来たな、とこれからのレッスンが楽しみになりました。
また、HTMLやCSSの復習も出来ました。
ボタンを押したらクラスが追加される命令のシンプルな書き方を視聴しました。
DOMツリーに新たな要素を追加する時にリストアイテムを追加する例で、流れをなんとか掴めて感じです。
inputボックスに入力した文字列やセレクトボックスで選択した文字列、ラジオボタンやチェックボックスの選択した値を、ボタンを押すとリストに追加してブラウザに表示される処理が面白かったです。
webアプリ作成に近づいた感じです !!
それまで長ったらしいメソッドなどが続いて、少し混乱してしまいましたが、実際にブラウザに好きな文字列を表示させられるという動きを付けらえると、今まで頑張って勉強した甲斐がありました。
マウスのある位置の座標を表示させるイベントや、リアルタイムに入力した文字数を表示するイベントも面白かったです。
blurというイベントがあることを初めて知りました。
formを使うメリットも知ることが出来ました。
最後のレッスンの伝播というのがよく分かりませんでしたが、お手本の通り、トグルで実行出来ました。


詳解JavaScript Intersection Observer API編 全13回 有料
このレッスンの開発環境は、デスクトップに新たにフォルダを作って、素材をダウンロードして用意しました。画像がどれくらい交差しているのか割合を調べるのに、まずはデフォルトの場合を確認しました。その後、画像が20%、80%交差する所の挙動を見ていきました。画像をふわっと表示させるアニメーションの設定を色々と変えて行きました。consoleでログ表示をすると、ブラウザに負荷を掛けてしまうことを知りました。

● よく見るUIを作ってみよう ●

JavaScriptでモーダルウィンドウを作ろう 全8回 有料
デスクトップに新たにフォルダを作って学習環境を用意しました。
HTMLでボタンなどの必要な要素を配置し、ボタンにidを指定して、スタイルを付けて行きました。
色の設定で透明度を指定するので、rgbaを使いました。
lesson5まではHTMLとCSSだけですが、lesson6からJavaScriptを書いて行きます。
ボタンをクリックすると、表示/非表示を切り替え得られるようにしました。
最後に、CSSでz-indexを使って順番を操作しました。

● JavaScriptでミニアプリを作ってみよう ●

JavaScriptでおみくじを作ろう 全9回 無料
デスクトップに作業用フォルダを作って開発環境の構築をしました。
まずは、HTMLでボタンにidを付けて、CSSでスタイルを付けていきました。
JavaScriptでは、クリックイベントの動作確認で、文字が表示されるようにして、ボタンにマウスをホバーした時の設定をしました。
ボタンを立体的にするのに、text-shadowを使って影を付けました。
ランダムな数値の生成の仕方の公式の復習をしました。
おみくじの結果を、swich文や配列を使って表示させました。
最後に、IF文で確率を操作しました。

JavaScriptで三択クイズを作ろう 全20回 有料
デスクトップに新たにフォルダを作って学習環境を用意しました。
HTMLでクイズの問題文と3択の回答の選択肢と、ボタンの表示文をマークアップしました。
クイズを表示するエリアや問題文のスタイルを付けました。
選択肢のスタイルを付け、余白などで調整し、マウスホバーした時のスタイルも付けました。
JavaScriptでid取得やダミーの問題を用意しました。
選択肢をシャッフルするアルゴリズムを学び実装しました。
正誤判定にIF文を使いました。
正解の場合、不正解の場合のクラスをJavaScriptで付けて、CSSでそのクラスのスタイルを付けていきました。
一度回答したら、選べないようにJavaScriptでIF文とフラグを使って管理をしました。
正答数を計算する変数を用意して、結果を表示させました。

●もっとJavaScriptに触れてみよう ●

jQuery入門 全13回 有料
最初に、jQueryとはどういうものなのか説明があって、次からデスクトップにフォルダーを作って、開発環境を整えました。
jQueryの公式サイトから、コードをコピーして、HTMLに貼り付けました。
jQueryの基本的な文法をJavaScriptと対比しながら学びました。
実際にクリックイベントのコードを書いて、JavaScriptよりもかなり短く書けることにビックリしました!!
ボタンをクリックしたらスタイルを付ける処理を、pタグ、リストで行い、リストでは指定の番号にスタイルを付ける処理を書きました。
ボタンをクリックしたら、リストの末尾に新しいリストを追加する処理と、フォームの入力で、次の入力の為にフォームを消してフォーカスを当てる処理を書きました。
変更しやすいように定数で管理しました。jQueryの慣習的な定数名の付け方などを学びました。
追加したリストを削除する処理を行うため、まずはHTML内のstyleタグ内でリストとリストのアフター擬似要素にスタイルを付けました。
リストを削除する処理で、論理演算子のまたはに当たる「||」を使いました。
最後に、ふわっと消えるメソッドを使いました。

ポートフォリオを作成しました。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

■ 関連記事 ■
挫折経験者が語る!!これからプログラミングを始められる方へ
基本情報技術者試験トップページ
自己紹介

表参道ヒルズから原宿までの若者の街を散策(コロナ前2019年7月の写真スライド)

お疲れ様です。

若者の街、表参道ヒルズから原宿までの散策を動画にしました。
写真に合う素敵な楽曲をBGMにしたので、かなりの自信作です!!

※ 音量注意!! ※

この電球が、インパクトあります。

こういうおしゃれな感じ、若者のセンスに刺激されました。

このデザインも画期的な感じがします。

こういう落書きっぽいのもアートな感じで新鮮です。

今日も見て下さってありがとうございました。

息抜きに、写真で癒し(=^x^=)に戻る
自己紹介

ストレス解消グッズ
心がラクになる本
発達障害と健康の本
何の本を読んだら良いのか分からない時に読む本

インスタ再開しました。

写真スライドショーが作れる動画編集ソフトを使って、YouTubeにUPしてます。

写真の投稿を始めました。
(写真AC)のプロフィールページです。

写真のアンケートを実施しております。
宜しかったらご回答頂けますと、大変励みになります(=^x^=)

羽田空港第一ターミナル飛行機と空港夜景(コロナ前2019年7月の写真スライド)

お疲れ様です。

羽田空港第一ターミナルで、飛行機と空港夜景の撮影をしてきました。

※ 音量注意!! ※

空港ならではの、珍しい写真も。

ミッキーマウスの飛行機

飛行機の模型

こういうの、マニアにはたまらないですね。
飛行機のダイアです。こういうの見ているだけで興奮してきます。

空港って、本当に興奮する場所ですね。

コロナ前に行っておいて良かったです。

第7派到来しているので、過去の写真を整理しながら大人しく家で編集作業しています。

今日も見て下さってありがとうございました。

息抜きに、写真で癒し(=^x^=)に戻る
自己紹介

ストレス解消グッズ
心がラクになる本
発達障害と健康の本
何の本を読んだら良いのか分からない時に読む本

インスタ再開しました。

写真スライドショーが作れる動画編集ソフトを使って、YouTubeにUPしてます。

写真の投稿を始めました。
(写真AC)のプロフィールページです。

写真のアンケートを実施しております。
宜しかったらご回答頂けますと、大変励みになります(=^x^=)

等々力渓谷 東急大井線世田谷区の自然(2019年7月コロナ前の写真スライド)

お疲れ様です。

等々力渓谷は、東京都世田谷区にあるのですが、とても東京23区内とは思えないほどの静けさと水辺の涼しさと自然が味わえました。

※ 音量注意!! ※

動画の中から写真を紹介します。

渓谷の石碑。

小道を歩いていくと

涼しげな滝に、

木々に囲まれ、自然を満喫出来ました。

駅に到着して、気になるポスターを発見!!

人をぶっちゃダメなんだよ。暴力は犯罪です。

このポスターも動画に入れました。

息抜きに、写真で癒し(=^x^=)に戻る
自己紹介

ストレス解消グッズ
心がラクになる本
発達障害と健康の本
何の本を読んだら良いのか分からない時に読む本

インスタ再開しました。

写真スライドショーが作れる動画編集ソフトを使って、YouTubeにUPしてます。

写真の投稿を始めました。
(写真AC)のプロフィールページです。

写真のアンケートを実施しております。
宜しかったらご回答頂けますと、大変励みになります(=^x^=)

湘南片瀬海岸 江の島の写真(2017年コロナ前)

お疲れ様です。
コロナ前の2017に、JR小田急線を乗り継いで、片瀬江ノ島に行った時の写真を整理して動画にしました。

※ 音量注意!! ※

駅から徒歩10分で片瀬海岸へ。

そこから船で江ノ島の岩場へ行きました。

ダイナミックな波が味わえました。

ただ、足元が危ないので、撮影される方はお気を付けて。

片瀬海岸

江ノ島岩場

息抜きに、写真で癒し(=^x^=)に戻る
自己紹介

ストレス解消グッズ
心がラクになる本
発達障害と健康の本
何の本を読んだら良いのか分からない時に読む本

インスタ再開しました。

写真スライドショーが作れる動画編集ソフトを使って、YouTubeにUPしてます。

写真の投稿を始めました。
(写真AC)のプロフィールページです。

写真のアンケートを実施しております。
宜しかったらご回答頂けますと、大変励みになります(=^x^=)

立川市のひまわり(国営昭和記念公園)

青梅線に乗って、立川市の西立川駅にある、昭和記念公園でひまわりの中でも、さんフィニティという品種の花を撮影しました。

※ 音量注意!! ※

秋葉原方面から出かけたので、移動距離はかなりあり、新宿を越え、中央線で立川まで行き、青梅線に乗り換えて西立川で下車

動画の中から写真を抜粋します。

西立川駅の空

園内に入り、

もみじ橋を渡って少しで到着!

小ぶりながら強くしなやかに、優しく咲いているひまわりに癒された日帰り旅行でした。

この日の歩数計です。

気分転換になりました。

息抜きに、写真で癒し(=^x^=)に戻る
自己紹介

ストレス解消グッズ
心がラクになる本
発達障害と健康の本
何の本を読んだら良いのか分からない時に読む本

インスタ再開しました。

写真スライドショーが作れる動画編集ソフトを使って、YouTubeにUPしてます。

写真の投稿を始めました。
(写真AC)のプロフィールページです。

写真のアンケートを実施しております。
宜しかったらご回答頂けますと、大変励みになります(=^x^=)

プログラミングの疲れ目対策と視力維持に向けて

この記事では、プログラミングで長時間PCと睨めっこして目が疲れてしまった方向けの疲れ目対策と、これ以上視力が下がらないようにするための方法をまとめました。
目のストレッチと疲れ目に効く手のツボを紹介します。

トップページに戻る
はじめてのWeb制作(HTML/CSSドットインストール無料レッスンノート)
プログラミング学習で関わってはいけない人達と逃げるべき環境
プログラミングと資格について
自己紹介ページ

こちらのサイトから、私がよく行っている目のストレッチを引用してまとめました。
マイケアさんのサイトです。

ギュッぱ体操 〜目の渇きや視力低下防止に〜
・目をギュッと閉じてパッと開ける
・頭を動かさないように、黒目を右→左→上→下→に動かす 4〜5回繰り返す。
・30分に一度ぐらいやる

パチパチ体操 〜PC、スマホによる疲れ目に効果的〜
・1分ほど目を開いたり閉じたりする。
・終わったらまぶたを閉じてしばらく休ませる。
・一日に数回行うと良い

ピント合わせ体操 〜 目の機能をリフレッシュ 〜
・近くのものを10秒から20秒見つめる
・視線をなるべく遠くに移し、5分ほど眺める
・1日に4回から5回ほど

次にこちらのサイトのトレーニングを紹介します。先進会眼科さんのサイトです。
自宅で視力回復?眼のためにできるトレーニング5つのやり方|注意点も解説

眼球ぐるぐる
・目の動きをなめらかにして、ものを見やすくするのに役立つ。
・一点ばかり集中していると、目の筋肉が固くなり、運動不足になる。目の末梢神経が悪くなり、酸素や栄養が行かなくなるので優しくほぐす運動。

やり方:
・両方の目をゆっくり大きく回転させる。
・1周10秒ぐらいかける。右回り2〜3周、左回り2〜3周、寄り目にして5秒キープ。

最後に手のツボです。
Medicalook(メディカルック)さんのサイトです。
眼精疲労「手のツボ」を3つご紹介!疲れ目・かすみ目を解消したい方へ

こちらのサイトでは、

・親指と人差し指の間
・親指
・小指

のツボを紹介しています。
手のツボなのでメガネをしたままでも押せますね。
また、目の周りや眉毛にも疲れ目に効くツボが集中しているので、
もっとじっくり目の疲れを取りたい方はメガネを外して目の周りや眉毛の辺りをゆっくり押して、目を労ってください。

追加で、目の周りのツボの紹介です。赤岩治療院さんの図解が分かりやすかったので、ここで紹介します。

トップページに戻る
はじめてのWeb制作(HTML/CSSドットインストール無料レッスンノート)
プログラミング学習で関わってはいけない人達と逃げるべき環境
プログラミングと資格について
自己紹介ページ

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

paiza レベルアップ問題集 「STEP: 3 1 行目で与えられる N 個の文字列の入力」をPythonとGASで解いてみた

この記事を読むことで、Pythonで標準入力とsplitメソッドを用いて、文字列の数と全ての文字列をループの中で出力することが可能になります。GASではスプレッドシートで値を取得して、二次元配列にして出力しています。

このコーナーでは、学習コンテンツpaizaラーニングレベルアップ問題集をPythonとGASの両方で解いて全コードの解説をしています。
PythonとGASの両方のコードを用いて、全コード及び部分的にも可能な限り詳細に記載いたしました。

GASはスプレッドシートを使っています。
GASはGoogle Apps Scriptと言って、JavaScriptの文法をベースにしているので、JavaScriptの学習中の方にもお役立て出来るかも知れません。

サイトマップはこちらから

paizaレベルアップ問題集でPythonとGASを解いて見たに戻る
メインメニューに戻る
Python自作サンプル
GASサンプル
基本情報技術者試験

paizaでの解答はPythonで行いましたが、この記事ではPythonのコードと共に、同じ問題を現在学習中のGASだったらどう解くのか、スプレッドシートでバインドして作ってみました。

1 行目で与えられる N 個の文字列の入力 (paizaランク D 相当)

問題:
1 行目で、整数 N と、続けて N 個の文字列 s_1, … , s_N が半角スペース区切りで与えられます。
s_1, … , s_N を改行区切りで出力してください。

ではまず、Pythonで解いてみます。

今回は、paiza.ioを使って解きます。paiza.ioの使い方はこちらから。

■ Pythonでの解き方 ■

手順として、

1:1行目の文字列の個数Nと文字列を標準入力でリストarrayに取得する
2:文字列の個数NをN=int(array[0])で取得する
3:リストarray[1]〜array[N]までをループで出力

の3ステップで行います。

今回は入出力例1を用います。

入力例1
5 paiza 813 paiza813 Hello World!

まず、準備として、paiza.ioにこのように入力します。
(入力例1 をコピペしたのみ)

下記のコードで入力と出力を行います。

#1行目の文字列の個数Nと文字列を標準入力でリストarrayに取得する
array=list(map(str,input().split(' ')))

#文字列の個数NをN=int(array[0])で取得する
N=int(array[0])

#リストarray[1]〜array[N]までをループで出力
for i in range(1,N+1):
    print(array[i])

このコードの実行(出力)結果です。

Pythonは以上です。

次は、GASで解いて行きます。

■ GASでの解き方 ■

今度は、同じ問題をGASで解いてみます。
まず、スプレッドシートにこの様に配置しました。

灰色の所には、文字列の個数N個と、N個の文字列を入力しています。この灰色の所を配列arrayで取得し、N=array[0]として、array[1]〜array[N]までを黄色いセルの所に出力します。その際、array[1]〜array[N]までの部分の文字列が二次元配列になるよう、ループで新たな配列array2に追加して、その配列array2を出力します。

※スプレッドシートに表示する場合は、二次元配列としての配列に追加をして作成します※

手順はこのようになります。

1:SpreadSheetAppから階層を辿って現在のシートにアクセスする
2:灰色のセルをsplitメソッドを用いてarrayに取得する
3:配列arrayをログ出力
4:文字列の数NをN=array[0]として取得する
5:array[1]〜array[N]までループを使ってarray2に二次元配列として追加する
6:配列array2をログ出力
7:スプレッドシートの黄色い所に格納する

手順1: SpreadSheetAppから階層を辿って現在のシートにアクセスする

const ss = SpreadsheetApp.getActiveSheet();

ここで定数ssにSpreadsheetAppから階層を辿ってアクティブシートにアクセスしています。

手順2:灰色のセルをsplitメソッドを用いてarrayに取得する

const array=ss.getRange(1,1).getValue().split(‘ ‘);

手順3:配列arrayをログ出力

console.log(array);

手順4:文字列の数NをN=array[0]として取得する

const N=array[0];

手順5:array[1]〜array[N]までループを使ってarray2に二次元配列として追加する

//array[1]〜array[N]までループを使ってarray2に二次元配列として追加する
  let array2=[];
  for(let i=1;i<=N;i++){
    array2.push([array[i]]);
  }

手順6:配列array2をログ出力

console.log(array2);

スプレッドシートに格納する準備として、配列array2にループを使ってarrayを二次元配列array2に格納する

手順7:配列array2をログ出力

console.log(array2);

<ログarray2>

手順8:スプレッドシートの黄色い所に格納する

ss.getRange(1,3,N).setValues(array2);

実行後のスプレッドシートです。

GASでの全コードはこちらになります。

function standardInput31(){

  //SpreadSheetAppから階層を辿って現在のシートにアクセスする
  const ss=SpreadsheetApp.getActiveSheet();

  //灰色のセルをsplitメソッドを用いてarrayに取得する
  const array=ss.getRange(1,1).getValue().split(' ');

  //配列arrayをログ出力
  console.log(array);

  //文字列の数NをN=array[0]として取得する
  const N=array[0];

  //array[1]〜array[N]までループを使ってarray2に二次元配列として追加する
  let array2=[];
  for(let i=1;i<=N;i++){
    array2.push([array[i]]);
  }

  //配列array2をログ出力
  console.log(array2);

  //スプレッドシートの黄色い所に格納する
  ss.getRange(1,3,N).setValues(array2);

}

宜しかったらコピペしてアレンジして見て下さい。
お疲れ様でした、ブレイクタイムフォトはこちらになります。

2019年いたばし花火大会

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

←前の問題へ          次の問題へ(準備中)→

モバイルバージョンを終了