元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

2023-01-01から1年間の記事一覧

ブログ開設3年目の振り返り

今年の9月でブログ開設3年になります。少し遅くなりましたが振り返ります。こんなブログもあるのだと思って見ていただけたら幸いです。 ブログを数値で振り返る 課題・後回しにしていること 今後について ブログを数値で振り返る 簡単にではありますが、当ブ…

WordPress:サイトが表示されなくなったときの対応

以前、あるサイトを制作しました。そのサイトが表示されなくなったとの連絡を受けました。そのときに対応したことを書きます。サイトは、WordPressで制作しました。 結論 対応したこと 参考 結論 ドメインの契約更新忘れ。 ドメインの契約を更新しなかったこ…

競技プログラミング初参加の成績と反省

競技プログラミングを始めました。AtCoderに挑戦しています。言語はC++です。 9月23日に開催されたAtCoder Beginner Contest 321が、競技プログラミング初参加になります。結果は、惨敗でした。そこで反省と今後の取り組みを書きます。 結果 反省 今後の取り…

C++コンパイラの導入

競技プログラミングを始めました。AtCoderに挑戦しています。言語はC++です。自分の端末で実行できるよう、C++のコンパイラをインストールしました。この記事は、その際のメモです。 C++コンパイラのインストール コンパイル・実行 コンパイル 実行 動作確認…

jQueryのプラグインのテンプレート作成

jQueryのプラグインのテンプレートを作成しました。あくまで自分用に作成しました。jQueryは、新しい技術とは言えないかもしれません。しかし、学ぶことがありました。 何となくVue.jsの書き方に通ずるところがあります。個人的にVue.jsの理解の助けになりま…

JavaScript:モジュールのawait

MDNのドキュメントからモジュールについて勉強しました。awaitはモジュール内で利用できる機能だそうです。詳しくは分かりませんが、モジュールが非同期関数として動作できるようになるそうです。 ファイル構造 ファイルの役割 モジュールのサンプルコード …

JavaScript:モジュールを動的に読み込む

MDNのドキュメントからモジュールについて勉強しました。ボタンをクリックしたときにモジュールがインポートされるようにします。モジュールをインポートする側でその処理を記述します。 ファイル構造 ファイルの役割 モジュールのサンプルコード 実行結果 …

JavaScript:モジュールの集約

MDNのドキュメントからモジュールについて勉強しました。モジュールファイルが複数になったとき、それらをまとめておくファイルを作れます。今回は、square.jsとcircle.jsをshapes.jsにまとめて、エクスポートします。インポートする側では、shapes.jsだけを…

JavaScript:クラスをインポートする

MDNのドキュメントからモジュールについて勉強しました。モジュールをクラス構文で定義して、エクスポートします。インポートした側では、Javaのように書けるので個人的には馴染みがあります。 ファイル構造 ファイルの役割 モジュールのサンプルコード 実行…

JavaScript:モジュール全体をオブジェクトとしてインポートする

MDNのドキュメントからモジュールについて勉強しました。モジュール全体をオブジェクトとしてインポートするとインポート文が短くなります。その方がモジュールを扱いやすくなります。 ファイル構造 ファイルの役割 モジュールのサンプルコード 実行結果 参…

JavaScript:インポート時の名前の変更(衝突回避)

MDNのドキュメントからモジュールについて勉強しました。複数のモジュールで同じ変数名、関数名を使っていても問題ありません。インポート時に名前を変更できるので、変数名、関数名の衝突を回避できます。 ファイル構造 ファイルの役割 モジュールのサンプ…

JavaScript:モジュールの基本

MDNのドキュメントからモジュールについて勉強しました。参考サイトの内容で充分に理解できましたが、この記事では簡易的なコードに置き換えて残します。まずは、ファイル構成やファイルの役割、モジュールの書き方について書きます。 ファイル構造 ファイル…

Processing:衝突イベントを別クラスに切り分ける

「The Nature of Code」から衝突イベントを別クラスに切り分けることについて取り上げます。今までは、実行用のクラスに衝突イベントの処理を書いていました。ここでは、衝突イベントを別クラスに切り分けていきます。Processingでプログラムを書いて、動作…

Processing:衝突イベントとヒットしたオブジェクトの判別

「The Nature of Code」から衝突イベントとヒットしたオブジェクトの判別について取り上げます。物体が衝突したあとに、その物体がどのようなオブジェクトなのか判別します。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがPro…

Processing:衝突イベントと物体の削除

「The Nature of Code」から衝突イベントと物体の削除について取り上げます。物体が衝突したらその物体を消します。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 衝突イベントと物体の削除 …

Processing:衝突イベントの基礎

「The Nature of Code」から衝突イベントの基礎について取り上げます。物体が衝突したときの処理の基本的な書き方を見ていきます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 衝突イベント…

Processing:引き寄せる力

「The Nature of Code」から引き寄せる力ついて取り上げます。ある物体に複数の物体を引き寄せます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 引き寄せる力 まとめ 参考書籍 引き寄せる…

Processing:風で引き寄せられる力

「The Nature of Code」から風で引き寄せられる力について取り上げます。物体に風の力を適用します。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 風で引き寄せられる力 まとめ 参考書籍 風…

Processing:マウスに引き寄せられる力

「The Nature of Code」からマウスに引き寄せられる力ついて取り上げます。マウスでクリックした場所に物体を引き寄せます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 マウスに引き寄せら…

Processing:キネマティックボディで物体を引っ張る

「The Nature of Code」からキネマティックボディについて取り上げます。ボディのタイプをキネマティックにして、物体を引っ張ってみます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 キネ…

Processing:マウスジョイントで物体を引っ張る

「The Nature of Code」からマウスジョイントについて取り上げます。マウスジョイントを利用して物体を引っ張ってみます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 マウスジョイント ま…

Processing:車を走らせる

「The Nature of Code」からBox2Dの復習として車を走らせてみます。車を走らせるには、回転ジョイント、チェインを使います。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 車を走らせる まと…

Processing:回転ジョイント

「The Nature of Code」から回転ジョイントについて取り上げます。回転ジョイントを設定すると物体を回転させられます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 回転ジョイントの作成手…

Processing:オブジェクトを連結して橋を作る

「The Nature of Code」からオブジェクトを連結して橋を作ります。複数のパーティクルを連結して橋と見立てます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 オブジェクトを連結して橋を作…

Processing:Box2Dにおけるオブジェクトの連結

「The Nature of Code」からオブジェクトの連結について取り上げます。2つのオブジェクトを連結します。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 オブジェクト連結の手順 参考例 まとめ …

Processing:オブジェクトの複合

「The Nature of Code」からオブジェクトの複合について取り上げます。2つのオブジェクトを複合して1つの物体として生成します。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 オブジェクトの…

Processing:複雑な形状の面をポリゴンで作る

「The Nature of Code」からポリゴンについて取り上げます。複雑な形状の面を頂点座標を用いて作ります。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 ポリゴン 注意点 まとめ 参考書籍 ポリ…

Processing:様々な境界

「The Nature of Code」から様々な境界について取り上げます。境界といっても直線ばかりではありません。ここでは、パーリンノイズと正弦波で境界を作ります。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽し…

Processing:境界(床面)を作る

「The Nature of Code」から境界について取り上げます。境界を作るにはChainShapeクラスを利用します。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 境界(床面)を作る vertex まとめ 参考書…

Processing:Box2Dの固定オブジェクト

「The Nature of Code」からBox2Dの固定オブジェクトについて取り上げます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。 固定オブジェクト 固定オブジェクトの例 まとめ 参考書籍 固定オブ…

» HTML入門のまとめはこちらです。