LEGOブロックと光のマジック

ご覧頂きまして、誠にありがとうございます。
写真スライドショーが作れる動画編集ソフトを使って、YouTubeTikTokThreadsにUPしてます。

今日は、レゴブロックで、バイク、怪獣、家、海の生き物、救急救命隊、宝箱を作りました。また、光を当てるのに、知育玩具のピタゴラスを使いました。

バイクの小道具では、タイヤを止めるのにスライムを、宝箱の小道具には、ビー玉を使っています。

※ 音量注意 ※

●YouTube

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

バイクです。

家です

怪獣です。

海の生き物と救命ボートに乗った、救急隊員です。

宝箱です。

今日も見て下さって、ありがとうございました (=^x^=)

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

TikTok始めました。
始めた理由は、TikTokの仕組みに興味を持ったからです。若い方限定のSNSなので、自分には無理だと思っていたのですが、他のSNSが時間に影響を受ける仕組みに対してTikTokは時間に影響を受けないループ型なので、良い動画であれば過去の動画も見て頂けるという仕組みに興味を持って始めました。TikTokは、Twitterが使える方なら多分すぐ慣れると思いますし、動画編集に至っては、YouTubeの100倍以上楽です。

インスタ再開しました。

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

■ 関連記事 ■

自己紹介


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

初めてのPhotoshop

恋するイタリア 東京ドームシティ クリスマスイルミネーション(コロナ前2016年11月の写真スライド)

ご覧頂きまして、誠にありがとうございます。
写真スライドショーが作れる動画編集ソフトを使って、YouTubeTikTokThreadsにUPしてます。

JR水道橋駅から徒歩数分で行ける、東京ドームシティで、2016年、「恋するイタリア」というクリスマスイルミネーションのイベントが開催されて、それを動画に編集しました。

1分半程度の動画なのに、編集に2時間かかってしまったので、自分的には力作の部類に入ります。

※ 音量注意 ※

●YouTube

● TikTok

動画の中から特に気に入っている写真をピックアップします。

ピサの斜塔

天井のイルミネーション

クリスマスツリー

動画のサムネにも使った、恋するイタリア

今日も見て下さって、ありがとうございました (=^x^=)

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

TikTok始めました。
始めた理由は、TikTokの仕組みに興味を持ったからです。若い方限定のSNSなので、自分には無理だと思っていたのですが、他のSNSが時間に影響を受ける仕組みに対してTikTokは時間に影響を受けないループ型なので、良い動画であれば過去の動画も見て頂けるという仕組みに興味を持って始めました。TikTokは、Twitterが使える方なら多分すぐ慣れると思いますし、動画編集に至っては、YouTubeの100倍以上楽です。

インスタ再開しました。

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

■ 関連記事 ■

自己紹介


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

初めてのPhotoshop

落書き風!お笑い系芸能人の似顔絵

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

資格試験の勉強のノートに、主にお笑いの芸能人、有名人の似顔絵を落書きっぽく描いていました。

基本情報技術者試験アルゴリズムの勉強で使っていたノートに書いていたので、数字や記号が少し混じっています。

※ 音量注意 ※

●YouTube

志村けんさん(変なおじさん、バカ殿)、マツコデラックスさん、笑福亭鶴瓶師匠、豊田真由子様!!、石塚英彦さん(石ちゃん)、イモトアヤコさん、オードリーの春日さん、ハライチ澤部さんの似顔絵落書きを動画にまとめました。

私は絵心がないのですが、その中でも、まぁまぁ良く描けたと思う方の似顔絵です。

これ、だ〜〜〜〜れだ!?

オードリーの春日さんです。

オーバーオールで巨漢といえば、石ちゃん

1番自信作が、マツコデラックスさんです。

今日も見て下さって、ありがとうございました (=^x^=)

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

TikTok始めました。
始めた理由は、TikTokの仕組みに興味を持ったからです。若い方限定のSNSなので、自分には無理だと思っていたのですが、他のSNSが時間に影響を受ける仕組みに対してTikTokは時間に影響を受けないループ型なので、良い動画であれば過去の動画も見て頂けるという仕組みに興味を持って始めました。TikTokは、Twitterが使える方なら多分すぐ慣れると思いますし、動画編集に至っては、YouTubeの100倍以上楽です。

インスタ再開しました。

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

■ 関連記事 ■

自己紹介


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

初めてのPhotoshop

写ルンです復刻版 しまなみ海道 今治〜大島〜伯方島の旅 2002-2003年

ご覧頂きまして、誠にありがとうございます。
写真スライドショーが作れる動画編集ソフトを使って、YouTubeTikTokThreadsにUPしてます。

今から20年以上も前に、四国の瀬戸内しまなみ海道に行って、サイクリングをして、今治〜大島〜伯方島までの海の風景を写真に収めました。

当時はフイルムカメラの写ルンですを使っていて、それをデジカメで撮影して、復刻して動画にしました。
スキャナは自宅にないので、アナログな感じで復刻しました(=^x^=)

※ 音量注意 ※

●YouTube

追加の写真も動画にしました。

● TikTok

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

とにかく、海の色が関東の海と違うんです。

とても綺麗な海と島の風景

船も風情あって

海面がキラキラ

夕焼けの美しさ

四国の海と自然と橋

初めての道なのに、なんだか懐かしい感じがしたんですよね。

今日も見て下さって、ありがとうございました (=^x^=)

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

TikTok始めました。
始めた理由は、TikTokの仕組みに興味を持ったからです。若い方限定のSNSなので、自分には無理だと思っていたのですが、他のSNSが時間に影響を受ける仕組みに対してTikTokは時間に影響を受けないループ型なので、良い動画であれば過去の動画も見て頂けるという仕組みに興味を持って始めました。TikTokは、Twitterが使える方なら多分すぐ慣れると思いますし、動画編集に至っては、YouTubeの100倍以上楽です。

インスタ再開しました。

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

■ 関連記事 ■

自己紹介


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

初めてのPhotoshop

東池袋、サンシャイン60展望台のハロウィン(コロナ前2019年10月の写真スライド)

ご覧頂きまして、誠にありがとうございます。
写真スライドショーが作れる動画編集ソフトを使って、YouTubeTikTokThreadsにUPしてます。

東池袋駅のいけふくろうと、ハロウィンのお化けかぼちゃ、サンシャイン60展望台の写真をショートムービーにしました。

※ 音量注意 ※

●YouTube

● TikTok

東池袋駅を歩いて・・・。

サンシャイン60はこんな感じ

今日も見て下さって、ありがとうございました (=^x^=)

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

TikTok始めました。
始めた理由は、TikTokの仕組みに興味を持ったからです。若い方限定のSNSなので、自分には無理だと思っていたのですが、他のSNSが時間に影響を受ける仕組みに対してTikTokは時間に影響を受けないループ型なので、良い動画であれば過去の動画も見て頂けるという仕組みに興味を持って始めました。TikTokは、Twitterが使える方なら多分すぐ慣れると思いますし、動画編集に至っては、YouTubeの100倍以上楽です。

インスタ再開しました。

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

■ 関連記事 ■

自己紹介


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

初めてのPhotoshop

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

ご覧頂きまして、誠にありがとうございます。
写真スライドショーが作れる動画編集ソフトを使って、YouTubeTikTokThreadsにUPしてます。

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

※ 音量注意 ※

●YouTube

● TikTok

今日も見て下さって、ありがとうございました (=^x^=)

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

TikTok始めました。
始めた理由は、TikTokの仕組みに興味を持ったからです。若い方限定のSNSなので、自分には無理だと思っていたのですが、他のSNSが時間に影響を受ける仕組みに対してTikTokは時間に影響を受けないループ型なので、良い動画であれば過去の動画も見て頂けるという仕組みに興味を持って始めました。TikTokは、Twitterが使える方なら多分すぐ慣れると思いますし、動画編集に至っては、YouTubeの100倍以上楽です。

インスタ再開しました。

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

■ 関連記事 ■

自己紹介


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

初めてのPhotoshop

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

ご覧頂きまして、誠にありがとうございます。
写真スライドショーが作れる動画編集ソフトを使って、YouTubeTikTokThreadsにUPしてます。


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

※ 音量注意 ※

●YouTube

今日も見て下さって、ありがとうございました (=^x^=)

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

TikTok始めました。
始めた理由は、TikTokの仕組みに興味を持ったからです。若い方限定のSNSなので、自分には無理だと思っていたのですが、他のSNSが時間に影響を受ける仕組みに対してTikTokは時間に影響を受けないループ型なので、良い動画であれば過去の動画も見て頂けるという仕組みに興味を持って始めました。TikTokは、Twitterが使える方なら多分すぐ慣れると思いますし、動画編集に至っては、YouTubeの100倍以上楽です。

インスタ再開しました。

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

■ 関連記事 ■

自己紹介


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

初めてのPhotoshop

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よりかは理解しやすかったです。

■ 2周目の感想 ■
学習期間:2022年11月23日(水)〜202X年XX月X日() 学習に要した日数 XX日間

1週目を終えた後にレッスンが新しい内容に更新してありましたので、一旦レッスンをノート代わりにまとめているGoogleドキュメントを全て消してから受講しました。1周目の時は、セレクタ、プロパティ、プロパティの値という初歩的なCSSに躓いていたましたが、それらの混乱は、動画を止めて確認しながらコーディングしていくことで、かなり解れてきました。ただ、CSSも応用スタイリングになると、まだまだ難しく、レッスンを終了しても中々全ては理解出来ていない様です。

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

はじめてのWeb制作 全11回 無料
HTMLやCSSが全くの初めての人が、「山田太郎」のプロフィール紹介サイトを作りながら体験していくレッスンです。
すぐに学べて試せるように、実行環境も用意されています。
HTMLはh1タグとpタグで簡単な紹介文を書きました。
CSSは、画像の角を丸めて、bodyの中身を枠線で囲みました。
また、このレッスンで作った制作物は、はじめてのJavaScript 全8回 無料でも使いますので、消さないようにして、残しておくと良いでしょう。

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

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

詳解HTML 基本タグ編 全27回 有料
h1タグやpタグ、imgタグ、aタグといった、使用頻度の高いタグから、記事のようなコンテンツarticleタグ、日時を表すtimeタグといったやや高度なタグ、spanタグ、divタグで簡易的にスタイルをつけました。また、HTMLについて最も信頼できるMDNの使い方の説明もありました。

詳解HTML フォームタグ編 全13回 有料
入力用部品、ドロップダウンリスト、チェックボックス、ラジオボタン、ボタンを作成しました。また、placeholderで予め入力名を表示させる方法も学びました。作成した部品をグループ化する方法でlegendも覚えました。
テキストだけでなく、パスワードや数量、日付の入力に特化したtype属性の指定方法も学べました。

詳解CSS 基礎スタイリング編 全27回 有料
ボックスモデルやmargin、widthとheightを習得。
これ以上広げたく無いという場合はmax-widthを指定し、逆にこれ以上縮んで欲しくないという場合には、min-widthを使う。境界線の指定の仕方、一括指定プロパティの注意点。paddingの4方向の指定の仕方。marginの相殺、box-sizing、overflowプトパティでテキストが溢れた時の処理、Line-heightの設定、font-family

詳解CSS 応用スタイリング編 全27回 有料
インライン要素、ブロック要素について。インライン要素のmargin auto。display inline-block、blockとinlineとinline-blockの違いのまとめ、position、z-indexで重なり順の調整、object-fit:cover、透明度のopacity、float、display:flow-root;、line-heightで高さを均等に割り振る、背景画像の幅と高さを指定background-size、contain、cover、background-position、backgroundの一括指定プロパティ、inheritで色を継承、tableのスタイル、リストのスタイル、calcの使い方、em、rem、Chromeに搭載されているカラーピッカーの使い方、変数を使って色を一括で変更

詳解CSS セレクター編 全21回 有料
セレクターの種類のまとめと整理、要素セレクター、全称セレクター、クラスセレクター、idセレクター、属性セレクター、複合セレクター、セレクターリスト、結合子、擬似クラス、nth-child() で奇数番目、偶数番目、最初と最後にスタイルを付けた、ボタンに対してマウスホバーした時のスタイル、インプットに対してフォーカスした時のスタイル、ボタンを押し込んだ時のスタイル、否定の擬似クラスnot、::before、::afterの擬似要素、詳細度(優先度)、詳細度を上げて優先順位を変える修正方法、更に優先度を上げる方法。!importantは詳細度を無視する上に Googleでも非推奨、セレクターのまとめ

詳解CSS フレックスボックス編 全22回 有料
display: flex;を使って、親divをフレックスコンテイナーとして設定する方法、flex-direction で、主軸の向きを変える方法、justify-contentによる主軸を基準とした要素の揃え方の制御、align-itemsで交差軸の制御、flex-wrap:wrap;で溢れた分の折り返し、gapで隙間を設定、align-selfで箱を一つだけ位置を設定し、autoキーワードも併せて使うことを学習、orderで順番制御。初期値0、小さい順。マイナスも指定出来る、
flexで幅の比率を指定、具体的な実装例(2カラム、3カラム、)、画像と記事のレイアウト、ロゴ画像でフレックスボックスの中に更にフレックスボックスを使うレイアウト。

詳解CSS メディアクエリー編 全14回 有料
メディアクエリや、レスポンシブデザイン、ビューポート、ブレイクポイントなどの用語説明、min-widthは最低でも幅が何px以上という意味、max-widthは何px以下、display-noneは「ページから存在を消してね」という意味、

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

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

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

実践!ポートフォリオサイトを作ろう 全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月の写真スライド)

ご覧頂きまして、誠にありがとうございます。
写真スライドショーが作れる動画編集ソフトを使って、YouTubeTikTokThreadsにUPしてます。

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

※ 音量注意 ※

●YouTube

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

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

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

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

今日も見て下さって、ありがとうございました (=^x^=)

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

TikTok始めました。
始めた理由は、TikTokの仕組みに興味を持ったからです。若い方限定のSNSなので、自分には無理だと思っていたのですが、他のSNSが時間に影響を受ける仕組みに対してTikTokは時間に影響を受けないループ型なので、良い動画であれば過去の動画も見て頂けるという仕組みに興味を持って始めました。TikTokは、Twitterが使える方なら多分すぐ慣れると思いますし、動画編集に至っては、YouTubeの100倍以上楽です。

インスタ再開しました。

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

■ 関連記事 ■

自己紹介


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

初めてのPhotoshop

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

ご覧頂きまして、誠にありがとうございます。
写真スライドショーが作れる動画編集ソフトを使って、YouTubeTikTokThreadsにUPしてます。

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

※ 音量注意 ※

●YouTube

● TikTok

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

ミッキーマウスの飛行機

飛行機の模型

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

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

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

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

今日も見て下さって、ありがとうございました (=^x^=)

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

TikTok始めました。
始めた理由は、TikTokの仕組みに興味を持ったからです。若い方限定のSNSなので、自分には無理だと思っていたのですが、他のSNSが時間に影響を受ける仕組みに対してTikTokは時間に影響を受けないループ型なので、良い動画であれば過去の動画も見て頂けるという仕組みに興味を持って始めました。TikTokは、Twitterが使える方なら多分すぐ慣れると思いますし、動画編集に至っては、YouTubeの100倍以上楽です。

インスタ再開しました。

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

■ 関連記事 ■

自己紹介


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

初めてのPhotoshop

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