すべてのカテゴリ

来週に初のサービスを出品する予定です。たぶんです。(笑)サービスは、「マルチメディア デザイン ブック」です。サービスのタイトルは未定です。ブックのサンプルを制作中ですが、今回は、ブックの概要的な説明です。＼ページめくり／本物の本のようなページめくりができるため、本物の本のような読書体験を閲覧者に提供できます。＼マルチメディア／文章、画像、写真、フォトギャラリー、動画、YouTube、Viemo、アニメーション、音声、ナレーションなどをページに展開できます。＼リンクと埋め込み／配置した要素をインタラクティブにできます。 要素へのマウス操作で詳細情報をポップアップウィンドウに表示したり、関連Webサイトに移動できます。ブックのページから離れることなく、シームレスな情報提供ができます。 リンクと埋め込みでインタラクティブなブックにできます。＼アニメーション効果／配置した要素を回転、ズームイン/アウト、バウンスなどアニメーション効果を表現できます。 ページをより魅力的に表現でき、読者をブックに集中させることができます。＼IDとパスワード／閲覧、ダウンロード、コピー防止としてIDとパスワードを設定可能。 ＼ブック配信／パソコン、タブレット、スマートフォンでの閲覧に対応。 オンライン、オフラインで閲覧できます。＼Googleアナリティクス／ブックにトラッキングIDを設定することにより、ブックの各ページが追跡できます。 訪問閲覧者のトラフィック、ページビュー、継続時間、直帰率などのイベントが測定され、マーケティングでの指標を分析、管理できます。 また、検索エンジンにブックのタイトル、キーワ

サービスを予定しています「マイ・トラベリング・ブック」についてブックのページめくりのサンプルです。「マイ・トラベリング・ブック」は、そのページに表現するコンテンツはなんでも可能です。サービスとしては、ブックのコンテンツを旅行ということにしています。今回は、ブックのページめくりの状況を動画にしましたのでご覧下さい。ページの内容は旅行ではありませんが、ページめくりのサンプルとなります。／ページめくり／PC／インフォグラフィックス素材のブック／※PCではマウスでの操作になります。／ページめくり／スマホ／GIFアニメーションのブック／※スマホ、タブレットでは指での操作になります。※横に回転すると見開きで表示されます。※「マイ・トラベリング・ブック」はHTML5、CSS、JavaScriptにて構築。「マイ・トラベリング・ブック」のサンプルができるまで、このようなサンプルを時々に投稿したいと思っています。宜しくお願いします。／名前のない空を見上げて／MISIA／hima.cover／／夏をあきらめて／サザンオールスターズ／hima.cover／こちらもご覧下さい。（以前投稿した動画）　

Three.jsを使って太陽系の3Dモデリングを作成しました。メタバースやVRなど3Dモデリングの盛り上がりが最近ありますが、なかなか敷居が高そうと私自身感じています。しかし比較的容易に、とく追加のソフトウェアも買う必要なく、標準的なブラウザで3Dモデルを作る・動かすことができます。しかもJavaScriptで。Three.jsというライブラリを使えば、上記のようにブラウザ上で動かせるものが簡単に作成できてしまいます！（ココナラのブログでは動画はyoutubeのものしか貼れないため、一旦撮影したものを載せています。。。）ご興味のある方、一度ご相談いたしませんか？

Dartって？こんにちは。ackey_mです。いきなりですがDartというプログラミング言語をご存じでしょうか？2011年にGoogleで作られたプログラミング言語で、JavaScriptの替わりという位置づけで作られた言語なのだそうです。残念ながらその時にはあまり普及せず、今ではTypeScriptのほうが広く知られているかと思います。しかし、すでに廃れてしまったというわけではまったくありません！Dartはこれから盛り上がる？Flutterというモバイルアプリケーションフレームワークがあり、それに採用されている言語がDartなのです。また、Googleが開発中である新OSの「Fuchsia」はDartで作られていて、そのUIやアプリケーションはflutterで作られているのだとか。Googleが開発した主流のOSといえばAndroidですが、もしそのFuchsia（なんて読むんだ）が取って替わったときにはDartやflutterがものすごく流行するかもしれませんね！コスパの良さは抜群！FlutterFlutterはアプリの開発効率が非常に良いことで知られています。・iOS、Androidなどのネイティブアプリのほか、webアプリやデスクトップアプリの作成も可能なクロスプラットフォーム・豊富なウィジェットがそろったUI・アプリを再起動しなくても修正が反映される、ホットリロードなど、特に個人開発など小規模な開発ではすばらしいパフォーマンスを発揮してくれそうです！洗練されたウィジェットたち私がとても感動したのが、Flutterに用意された超強力なウィジェットの数々です。おしゃれなデ

Chromeの拡張機能って知っていますか？Chromeで行う様々な操作をカスタマイズすることができる機能です。Chromeウェブストアで公開されていて、色々と便利な拡張機能が簡単にインストールできます。そんなChromeの拡張機能ですが、自分で作ることができます。私は趣味で10点程作成しました。その内、1つはChromeウェブストアで公開しています。その経験から拡張機能を作る良さについて語りたいと思います。良さを語る前に真逆なことを言います。正直Chromeの拡張機能はブームが過ぎ去ったと思います。一時期は様々な拡張機能が作成され、便利なchrome拡張機能を紹介する記事が溢れていました。しかし、拡張機能でユーザーの情報を不当に収集したり、ウィルスをダウンロードするものが作られ、Chromeの拡張機能は危険であると言われるようになりました。そこでユーザーが離れていきましたが、致命的だったのが2020年9月21日にChromeウェブストアで有料の拡張機能の新規公開を中止したことだと思います。これで多くの開発者が離れていきました。それでブームは去ってしまったと考えています。現在でも様々な無料の拡張機能がウェブストアで公開されていますが、以前のような活気はないように感じます。また、パソコンを使うユーザーが減りスマートフォンへ移行したことも要因の一つとして考えられるでしょう。そんな斜陽なChrome拡張機能ですが、私はこれの作成にハマっています。良さについて語ります。斜陽とは言いましたが、WebブラウザとしてはChromeはまだまだ現役です。Webブラウザシェアランキング(2021年6

更新が長らく出来ていませんでした。今日は久しぶりの更新です！この頃、いろいろとお問い合わせがあり対応に追われておりましたので、ついつい、明日、明日と思っていたら。。。。なんと、ずーっと更新しない日が20日以上も経ってしまいました。フォローをしていただいている皆さんにごめんなさい。WIXフォームならファイルアップロードを作ることが簡単出来る！一般的にファイルのアップロードは一見簡単そうに見えますが、サーバーにファイル情報をアップロードするには、多数の設定を必要とします。まずは、・ファイルのアップロードを許可する権限・許可されたファイルをどのディレクトリに保存するか？・アップロードされたファイル名が他の物と重なって消えないように名前変更・アップロードできるサイズと転送速度の設定でエラーを回避・アップロードしたファイルが壊れないように、ファイル形式の設定これらをWIXなら簡単に項目を追加するだけで出来てしまいます。使いたいと思っても、有料オプションを追加しない利用できないWIXでファイルアップロードは有料版のAsend BY WIXを使わないと、この機能は使えません。毎月有料版の支払いをしていれば利用できます。オリジナルプログラムなら毎月の費用がなくてアップロードが可能実際にアップロードを自動で行って、ファイル名を変換して、メールにリンク先ファイルを作成して送信することができます。興味がある方は、ご連絡をください。

WIXで作成していると、フォームを利用してオーダーをしてほしい時に、値段の組み合わせやメニュー選択によって費用が変わるようなサービスをされている業種などでは、お客様に利用してほしいと思っても費用感を伝えることが自動で出来ないので、オーダーを頂いてから後ほど返信するか？もしくは、予め簡単な費用感を出しておいて、後は直接お問い合わせしてもらうしか無いですよね？でも、このハードルが結構高いです。実際にアクセス解析を見ていくと、問い合わせを見ても離脱する方が多いのが事実です。切羽詰った方以外はどんな業種でも、オーダーは勿論、お問い合わせすら腰が重いのです。ある程度の費用感を伝えることが出来るとお客様も安心そこで、お客様自身で費用や価格を動的に計算して料金や費用のイメージしてもらうことで、お客様は気を使わずにシュミレーションが出来るので安心感を与えることが出来ます。WIXでお客様に対して費用がいくらぐらいになるのかを伝えたい時に、ネットショップや販売プランなどを使えば、全て用意されているのでデータを入れるだけで簡単に価格や決済もできます。しかし、エアコンの修理や車検の費用など、お客様の希望に合わせて、費用が加えていくサービスを提供する企業の皆さんには、メニュー構成をお客様に伝えながら選択して頂いて価格や費用を出すようなサイトを簡単に作ることができません。事業のチャンスを掴むのか？捨てるのか？実際にWIXでサイトを作った方や作りかけてる方は、WIXで作ってきた時に出来ることと、出来ないことの壁にぶつかる時がきます。でも、WIXでどこまで出来るのかを予め知っていれば、今できなくても将来、あな

入力フォームについて、いろいろとWIXの標準でできることもありますが、ここをこんな風に制御が出来たらなって、いう一例をアップしてみました。実際にJasonを理解されている方には、簡単なことをやっていると思いますが、多くのWIXユーザーが思っている。痒いところに手が届かない部分の一例をご紹介させていただき、WIXでもここまで出来るってことを知っていただけたら良いなと思います。「よみがな」に「ひらがな」以外を入れない制御会員情報の登録フォームやお問い合わせフォームの項目で意図としない入力が無いようにしたいけど、なんとか入力の制御が出来ないかなぁと思うことがありませんか？そこで、一例ですが、「よみがな」に、漢字やカタカナなどを入れると入力エラーを表示して、入力した文字を削除するプログラム制御をご紹介します。郵便番号検索もこんな風に自動入力ができます入力する郵便番号から住所を呼び出してきて、住所に入れるプログラムと同時に、郵便番号にハイフンを入れないように、ハイフンを削除します。また入力文字が７文字でない場合は、入力エラーが表示されます。これで、会員情報やお問い合わせされた方の情報を統一して管理することができます。サイト設計からWeb制作に多数の事業に関わってきた経験談ですWIXの公認パートナーの中でも、多分、私が一番WIXに問題点を指摘していると思います。それは、WIXを本気で使いこなそうと思ったからこそ、徹底的機能を分析しています。だからこそ、WIXを利用するに当たって機能に妥協するのではなく、WIXを便利なツールとして利用して頂くためにも、私は些細な問題点まで、毎日のようにWIX

超初心者向け、プログラミング講座もう少し簡単なプログラミングの話をと言うリクエストに答えて、初めてプログラミングを学習する型向けの連載を始める事にしました。講座のゴールは、簡単な Web プログラミングができるようにと言うのがゴールです。Web プログラミングなので、使用するプログラミング言語は Javascript（Node.js）を利用します。第一回は、まずは、プログラミングをするための準備です。プログラミングをするための準備最初に行うのは、コンピュータの準備です。スマホではできません！ コンピュータも色々ありますが、今回の連載では、Windows の PC を利用するのを前提でお届けします。 Mac をご利用の方でも、ほぼ同じような事が可能なのですが、今回は「超初心者」向けで、本当に初めてプログラミングをやってみようと言う方を対象にしていますので、混乱を防ぐ意味で、Windows10（もしくは Windows11）を使って進めていく事にします。最新の PC は、2022 年現在だと、Windows11 を搭載した物が殆どだと思いますが、少し古い PC だと Windows10 の場合もあると思いますが、どちらも似ているので取り敢えずこの二つを利用するのを前提で進めて行きます。プログラミングをするのに必要な物は、今回は二つのアプリです。インターネットにアクセスするための Web ブラウザは、PC にすでに入っていると思いますので、まずは以下の二つを用意します。＊　Microsoft Visual Stadio Code (VSCODE)＊　Node JSです。どちらもインタ

Vue 公式チュートリアル　〜　部品からデータを渡すVue 公式チュートリアルのステップ 13 は、「部品」の方から呼び出し元（親）にデータを渡す方法を学習します。前回までのポイントは？ステップ１０までは、基本的に、 「Vue の部品」の基本的な記述の仕方を中心に学習しました。 ステップ１１からは、メインのページから別に作成した「部品」を呼び出す方法を学習しています。記述の仕方は基本的に同じですが、ポイントは、「部品」を呼び出す側（親）と呼び出される側（子）の間でのデータのやり取りです。前回のステップ１２では、呼び出し側から「部品」にデータを渡すやり方を学習しました。呼び出し側と、呼び出される方の両方に記述が必要でした。今回学ぶのは？ステップ１３では、前回とは反対に、呼び出される側（子）から、呼び出し側（親）にデータを渡す方法を学習します。まずは、変更前のコードです。(App.vue)<script>import ChildComp from "./ChildComp.vue";export default {  components: {    ChildComp,  },  data() {    return {      childMsg: "No child msg yet",    };  },};</script><template>  <ChildComp />  <p>{{ childMsg }}</p></template>これが、呼び出し元（親）のコードです。特に新しい点は

　こんにちは、今回から少しずつLaravelでの学校や塾向け業務効率化Webアプリ開発の過程をここに残していきたいと思います。　Laravelを学び始めた人や、プログラミングに興味がある初心者の方にわかりやすい内容を発信できればと思います　　　　　　（僕は全て独学です！誰でもできます！！！）。　兎にも角にも今回はこのアプリケーションで何ができるのかを紹介していきたいと思います。　top画像の左にあるのが用意しているメニューです。⬇︎こちら（きっかけはいつも日本の学校の先生って仕事量の多さが異常に多いなと思っていて、それを解決できるアプリ作ったら面白そうだなと思ったからです。ちなみに文部科学省の『教員が担うべき業務』を読んで内容を考えました。）それぞれの大まかな内容として•トップページ 　--  今日の天気、予定、行事などが閲覧できるページ•クラスページ　--　先生が担当のクラスに関する情報が閲覧できる•成績管理　　　--   クラスの成績管理閲覧ページ•学校行事　　　--   学校行事の詳細を閲覧できるページ•カレンダー　　--  予定一覧がカレンダーで確認できるページ•メッセージ　　--  メールのような機能をつけたい（まだ開発していません）•職員フォロー　--  教員同士の掲示板のようなページ•指導要領　　--授業で必要なプリントなどを選べる（まだ開発していません）•情報登録画面　--  各情報の登録ページトップページクラスページ成績管理学校行事職員フォロー情報登録画面　こんな感じの見た目で開発しており、使いさすさシンプルさ、直感的な操作性を意識して見た目を整えています。　

▼月を小文字のアルファベット3文字で表示したいとき。const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']▼曜日を日本語で表示したいとき。const daysJa = ['日', '月', '火', '水', '木', '金', '土']▼曜日を小文字のアルファベット3文字で表示したいとき。const daysEn = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']▼使ってみよう！const today = new Date()console.log(today)const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']const daysEn = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']const daysJa = ['日', '月', '火', '水', '木', '金', '土']console.log(`今日は${today.getMonth() + 1}月${today.getDate()}日(${daysJa[today.getDay()]})。英語で月省略形は、${months[today.getMonth()]}。曜日省略形は、${daysEn[today.getDay()]

こんにちは。最近はThree.jsを使ったポートフォリオサイトやインタラクティブなWebサイトを制作しています。その中でよく使う技術の一つが「シェーダー（Shader）」です。今回は初心者向けにシェーダーについて簡単に解説したいと思います。■ シェーダーとは？簡単に言うと、GPUを使ってリアルタイムに映像を描画するプログラムです。通常のHTMLやCSSでは難しい、・水の揺らぎ・炎の表現・発光エフェクト・宇宙空間・波紋演出などを実現できます。■ なぜシェーダーを使うのか？例えば背景画像を用意するだけなら通常のWeb制作でも可能です。しかしシェーダーを使うと、「常に動いている背景」を作ることができます。私が制作した宇宙ポートフォリオでは、シェーダーを利用して宇宙の星雲や発光表現をリアルタイムで描画しています。また、水族館ポートフォリオでは水面の揺らぎや波紋表現にもシェーダーを活用しています。■ シェーダーでできること・海や水中表現・宇宙空間・オーロラ・炎やエネルギー・ホログラム・発光演出・パーティクル演出・未来的なUIWebサイトに動きや没入感を加えたい場合に非常に相性の良い技術です。■ 最初は難しく感じる私も最初はコードを見ても意味が分かりませんでした。ですが、「色を変える」↓「時間で動かす」↓「波を作る」という順番で学ぶことで少しずつ理解できるようになりました。特にThree.jsと組み合わせることで、シェーダーの面白さを実感しやすいと思います。■ 今後作ってみたい作品現在は、・水族館型ポートフォリオ・宇宙旅行型ポートフォリオなどを制作しています。今後は海底遺跡や神秘的な世界観

GASのウェブアプリでも外部のJavaScriptのライブラリを使うことができます。今回はQRコードを個別に生成するケースでJavaScriptライブラリqrcode.min.jsを使った場合のGASでの処理例です。基本的にはJavaScriptライブラリを読み込んだhtmlファイルをGASのdoGet関数で表示させます。//GAS function doGet() {   return HtmlService.createTemplateFromFile("index")   .evaluate()   .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)   .addMetaTag('viewport', 'width=device-width, initial-scale=1'); }html(index)ファイルのhead内でJavaScriptライブラリを読み込みます。ダウンロードしたライブラリを使う場合の例1.ソースをまるごとコピーしてhtmlファイルとして保存しておきます。2.index.htmlのheadタグ間でライブラリのファイルを読み込みます。<script><?!= HtmlService.createHtmlOutputFromFile('qrcodeminjs').getContent(); ?></script>CDNが使える場合の例直接読み込むので上記のようなライブラリファイルの作成は必要ありません。  <script src="ｈｔｔｐ

本日もJavaScriptの学習を進めました✨今回は、「スクロール量に応じてボタンの表示・非表示を切り替える処理」に挑戦しています！具体的には、画面をスクロールしたときにイベントを発火させて、スクロール量をpx（ピクセル）単位で取得し、一定の位置を超えたらボタンを表示する、という流れです。まだ途中ではありますが、・windowに対してイベントをつける・スクロール量を取得する（document.scrollingElement.scrollTop）・条件分岐で表示・非表示を切り替えるといった処理の流れが少しずつ理解できてきました。特に、「windowは画面全体を指している」という点が印象的で、これまでのHTML要素への操作との違いも少し見えてきた気がします。途中でカッコの閉じ忘れなどのエラーにもハマりましたが😂こういうミスも含めて理解が深まっているなと感じています。完成までもう少しなので、引き続き頑張っていきたいと思います✨

1. サイトイメージ画像2. 制作概要制作時期：2024年2月 制作時間：25時間程度作業内容：コーディング、クロスブラウザテスト、サーバーアップロード 使用ツール：VScode、Figma 使用言語：HTML、CSS、SCSS、JavaScript、jQuery 3. 工夫したポイント サイトを開いた際には、ローディングアニメーションを表示させる設計にしています。 商品一覧のスライドショーでは、Swiperプラグインを使用することで、複雑なコードを避けつつ機能性を確保しました。 また、問い合わせフォームでは、必須項目をすべて入力しないと送信ボタンが押せない仕組みにすることで、利用者が迷わずに操作できるよう配慮しています。そのほか、ハンバーガーメニューやスムーススクロール、FAQページにおけるアコーディオン機能の実装も行い、ユーザーにとって快適で分かりやすい構成を目指しました。 コンタクトフォームはPHP工房をカスタマイズして実装しました。CSS設計ではBEMを使用し、可読性の高いコーディングを行いました。最後に、パソコンだけでなくスマートフォン（iPhone・Androidの両方）での表示確認を行い、デバイスに応じたレイアウトの崩れがないことを確認しました。

はじめまして。nikoniko 21と申します。私の記事をご覧くださってありがとうございます。現在私はココナラに２つほどサービスを出品しております。Webサイト制作とHTML・CSSコーディングです。副業を始めるためにココナラで出品しようと考えました。私は昔から細かい作業や物作りが好きで、そういうことに熱中できる性格です。そのため、Webサイト制作やHTML・CSSコーディングも最初は勉強しなければいけないことがたくさんあって難しそうと思いましたが、勉強をしながらコーディングをして少しずつWebサイトを作っていく作業をしてみたら夢中になれました。HTML・CSSや、Javascriptや、PHPや、Java等のプログラミング言語を勉強しながらコードを書いていって、少しずつ自分の理想のWebサイトができていくのがとても面白くて作業の手が止まりません。また、その途中でコードを書くのに使っているVScodeが思うように動かなくなったり、自作のWebサイトをブラウザでうまく公開できなくなったりといったトラブルもありましたが解決策をネットで調べたり、なぜうまくいかなくなったのかを自分で考えて解決策を見つけ出したりして何とか自力で解決してきました。そうして私はWebプログラミングの技術を身に着けて、Webプログラミングの作業に対する集中力とトラブルを絶対に解決するという自分の粘り強さを強化させました。ホームページをHTML・CSS等を使ってコーディングしたり、ホームページのデザインをしたり、お問い合わせ画面等の入力フォームを作成したり...。そういった技術をWebプログラミングの副業に活用

こんにちは、webサイト（ホームぺージ）に使われるHTML 、CSSなどのプログラミング言語を使って、WEBサイトなどを作ります。では早速説明したいと思います。プログラミング言語についてですか、HTML,CSS, javascriputなどあります。他にもrubyやjava、phpなどたくさんあります。webサイト作成で使う主な、プログラミング言語は、HTML,CSS,JavaScriputです。ではHTMLなんですが、HTMLを簡単に言うと骨組みといったところでしょうか、あと文字などもHTMLで書きます。CSSは、柄ですね。JavaScriptは、動きですね。ざっとこんな感じです。それで、HTMLCSSで、出来たのがこちらの写真です。こんな感じで、出来ます。大体動きをつけなくてもオシャレなサイトは作れます。まあ、これは１０分程で作った代物なので少しオシャレさには、かけます。この上のtopとかのボタン押しても普通に反応します。じゃあなんで、JavaScriptつけるの？っていう話ですよね。それは、JavaScriptを付けるとさっき言ったように、動きを付けることができます。動画をご覧ください。このようにクリックすると、開いたり閉じたりできるやつを付ける事ができます。いかがでしたでしょうか。お分かりいただけましたか。このように、HTML,CSSである程度で、できます。なのでJavaScriptは、付けたら便利ですが、絶対付けなくてもいいという感じです。ご覧いただきありがとうございます。これが私が出品しているサービスです。ご覧ください！！さっき言ったホームページ制作もやっています。

Google Apps Script、通称GASについての話題は、Webを使う多くの人にとってちょっとした関心事かもしれません。特に、「GASって結局JavaScriptなの？」という疑問を持つ方も少なくないでしょう。そこで、この記事ではGASとJavaScriptの関係を、専門用語を控えめにして、できるだけわかりやすく解説してみます。GAS(Google Apps Script)とはGASとは、Googleが提供するプログラミング言語のことで、Googleの様々なWebサービス（Googleドキュメントやスプレッドシート、フォームなど）を自動化したり、カスタマイズするために使われます。たとえば、スプレッドシートに情報を自動で整理したり、フォームの回答に基づいてメールを自動送信するといった作業をプログラムで行えるようにするのがGASの役割です。GASとJavaScriptの共通点GASは、その根底にJavaScriptを持っています。ですから、もしあなたがJavaScriptに少しでも触れたことがあるなら、GASを学ぶのは意外とスムーズかもしれません。変数の使い方、ループ（繰り返し処理）、条件分岐といった基本的なプログラミングのコンセプトが、GASでも全く同じように使われます。GASとJavaScriptの違いしかし、GASがJavaScriptと完全に一緒かというと、そうではありません。GASはGoogleのWebサービスと密接に結びついており、そのための特別な機能やコマンドが用意されています。この点が、通常のWebページ作成などに使われるJavaScriptとは異なる大きな

はじめにWebアプリケーションやAPIのバックエンドシステムを開発する際、データベースとのコネクション管理は重要な要素の一つです。効率的なコネクション管理は、アプリケーションのパフォーマンスとスケーラビリティに大きく影響します。このブログ記事では、コネクションプールの概念について解説し、Node.jsのMySQLライブラリを使った具体的な実装方法を紹介します。コネクションプールとは？コネクションプールは、データベースへの接続をプール（予め準備された接続の集まり）として管理する技術です。アプリケーションがデータベースとの通信を必要とする際、新たにコネクションを確立するのではなく、プールから利用可能なコネクションを取得します。使用が終わったコネクションは、再利用のためにプールに戻されます。この方法の利点は、コネクション確立のオーバーヘッドを削減し、リソースを効率的に使用できる点にあります。結果として、アプリケーションの応答性が向上し、大量の同時接続をより効果的に処理できます。Node.jsでのコネクションプールの実装Node.jsでMySQLデータベースとのコネクションプールを実装するには、mysqlライブラリを使用します。以下は、Node.jsでコネクションプールを設定し、使用するための基本的なステップです。ステップ 1: 必要なパッケージをインストールするまず、mysqlパッケージをプロジェクトにインストールします。npm install mysqlステップ 2: コネクションプールを作成するmysqlライブラリを使用して、コネクションプールを作成します。以下のコードスニペット

期限を設定してバナーを表示・非表示できたら、日時を気にして自分でいちいち外さなくていいし、楽天市場のキャンペーンみたいに夜中に終了しようと、時間になったらサッと非表示にできます！コピペで出来るので、興味がある方はぜひやってみて下さい⭐️Swiperスライダーを用意する先日の記事のSwiperスライダーを使っていきます。index.htmlに時間指定で表示非表示のJavaScriptを追加する下記を</style>と<script>の間についきします。<!-- time limit --><script type="text/javascript">let myClass = document.getElementsByClassName("js-time_limited");for (let i = 0; i < myClass.length; i++) {let appearTime = myClass[i].getAttribute("data-appear_time");let disappearTime = myClass[i].getAttribute("data-disappear_time");let threshould_start = Date.parse(appearTime);let threshould_end = Date.parse(disappearTime);const current = new Date(Date.now() + ((new Date().getTimezoneOffset

はじめに 最近、Javascriptメインの統計に関する案件依頼があり、その際に使用した必要最低限の統計解析セットを紹介します。なお、分散及び標準偏差に関しましては、公式も含めこちらでの解説は割愛します。あくまでもJavascriptのコードの紹介となります。また、分散と標準偏差以外はワンライナーの関数式となり、それぞれ独立で利用可能です。前提として、共通の引数として使用する一次元配列は以下とします。const array = [10,15,20,5,35,25,30];■最大値コードレビューした際、よくfor文やforEachで順次確認するロジックを見かけます。降順にソートしたものの先頭が最大値になります。const max = arr => arr.sort((a,b) => b-a)[0];console.log(max(array));// 35■最小値 最大値と逆の考え方です。昇順にソートしたものの先頭が最小値となります。const min = arr => arr.sort((a,b) => a-b)[0];console.log(min(array));// 5■合計array.reduceは配列のそれぞれの要素に対して、順次ユーザー定義のコールバック関数を実行し、その処理によって配列の各値を一つの値にまとめます。この説明では分かりづらいですが、配列要素の合計を求めるのはこのメソッドの基本形です。const sum = arr => arr.reduce((a,b) => a+b);console.log(sum(array))

今回はクラスページのクラス予定に関するページについて紹介したいと思います。ここのページではクラスの予定のみが閲覧できるようになっています。それでは見ていきましょう。まずは基本のビジュアルから⬇︎月毎に閲覧できるようになっており、今月の予定が初期表示されるような仕様になっています。予定名、予定日のみが表示されるようにし、選択すると詳細が表示されます。こんな感じです⬇︎こちらの詳細ページで詳しく内容が確認できます。右側の⚙マークを押すと...⬇︎編集ページになっています。こちらですぐに内容変更ができるようになっておりアクセスしやすくしました。では登録画面を見ていきましょう⬇︎バリデーション(バリデーションは未入力のチェックや数字の半角指定などを判定する機能のことです！！)付きの情報入力画面です。確認ページ⬇︎(＊全画面に戻った時のセッションについてはコード解説の時に解説します)登録ページ⬇︎情報が反映されました⬇︎　予定をクラスごと、試験ごとなど分けていますがここに関して全て統一した予定でもいいのではないかとも思いましたが、例えば朝礼、夕礼での先生の話さなければならないことをすぐに確認できるのは便利だなと思い予定を細かく分けました。先生がいかに一つの仕事に集中できるかここが大事なのかなと思います。　こういうどうしたら先生の多すぎる業務を効率化できるか？と言う問に対してシチュエーションを想定しながらアプリの仕様を考えると、具体的な仕様が見えてきます(月毎表示の方がいいのではないか、すぐに内容修正をかけられた方がいいのではないか等)。次回は授業スケジュールのビジュアル紹介です。ありがと

最近のホームページは、パソコン・スマホ・タブレットなど、画面サイズに合わせてレイアウトが変わります。これを「レスポンシブデザイン」と呼びます。レスポンシブ（responsive）は直訳すると、「反応が良い」「敏感に反応する」という意味になります。ですので「レスポンシブサイト」は、「画面サイズに応じて柔軟にレイアウトが変化するサイト」ということですね。昔は、「PC用サイト」「スマホ用サイト」と分けて作られることが多かった（場合によっては「iモードサイト」もｗ）ですが、現在は１つのサイトで、画面幅に合わせてHTMLのレイアウトが切り替わる方法が主流です。ちょっと時系列でどのような変遷があったのか、ご紹介いたします。■黎明期：２～３つの専用サイトを作る。先ほども述べたように、「PC用サイト」「iモード用サイト」「スマホ用サイト」を作っていた時代があります。これ、更新がすごく大変で・・・(^^;)1つのテキストを修正するだけで、3か所（3倍）の修正が必要でした。・・・端末って、たくさんの種類作られると、制作の人間はたまったもんじゃないです(笑)それぞれの専用サイトが作られ、ちょっと技術のあるところだと、PHPで判別させてリダイレクトかけるとかやってました。（そうでないところは、そのまま放置(笑)　Googleも「モバイル」と「PC」で検索結果を分けておりました）■JavaScript で表示を切り替える手法（このあたりからレスポンシブっぽい）JavaScript は、Window幅を取得できるので、window.onresize = function(){    if (window.

今日はJavaScriptを使って、スクロール時のフェードインアニメーションを実装しました！HTML・CSS・JavaScriptはそれぞれ役割が違います。今回は3つがどのように連携して動いているのかを整理しながら学習しました。① HTMLで「目印（タグ）」を付けるまずHTMLでは、JavaScriptが操作できるようにclass名を付けます。例えば、スクロール時に表示させたいセクションにはのようにを追加します。このfade-upが「あとでJavaScriptから動かしますよ！」という目印になります。② CSSで「どんな動きをするか」を決める次にCSSでは、「表示前はどんな状態にするか」「表示されたらどう変化するか」を設定します。例えばこれは最初は透明（opacity:0）少し下に配置する0.8秒かけて変化するという意味です。そしてになると不透明になる本来の位置へ戻るつまり下からふわっと浮き上がるアニメーションになります。③ JavaScriptで「いつ動くか」を決める最後にJavaScriptです。JavaScriptでは「どんなタイミングでイベントを起こすか」を決めます。今回はでHTMLのが付いた要素をすべて取得します。その後を使って画面をスクロールしたとき要素が表示されたかどうかを監視します。設定しているは要素が20％見えたらという意味になります。表示された瞬間にが実行されます。するとCSSのが適用されふわっと表示される仕組みです。今日学んだことHTML・CSS・JavaScriptは、それぞれ役割が違います。HTML：動かしたい要素に目印（class）を付けるCSS：表

今日はポートフォリオ制作を進めながら、CSSとJavaScriptを使ってサイトの見た目や使いやすさを改善しました。「デザインカンプをそのまま再現するにはどうすればいいのか？」を考えながら、一つひとつ調整を行いました。NEWSセクションのレイアウト調整まず取り組んだのは、お知らせ一覧のデザイン調整です。デザインカンプでは、各ニュースの区切り線が左右の枠線に少し余白を残したデザインになっていました。最初は border-top を使っていましたが、線が横いっぱいに表示されてしまうため、CSSの擬似要素（::before）を使って長さを調整しました。これにより、デザインカンプに近い上品な仕上がりになりました。枠線を二重にする方法を学習ABOUTセクションでは、外側の金色の枠だけでは少しシンプルに感じたため、内側にも細い金色のラインを追加しました。この時に使用したのがCSSの擬似要素です。position: relative; と position: absolute; を組み合わせることで、HTMLを書き換えずに内側の線を追加できることを学びました。CSSだけでデザインの幅が大きく広がることを実感しました。Googleマップのレスポンシブ対応ACCESSセクションでは、画面幅を小さくするとGoogleマップの高さまで小さくなってしまう問題がありました。原因を調べながら、heightaspect-ratiomin-heightなどの違いについて理解を深めました。レスポンシブデザインでは、幅だけでなく高さの指定も重要であることを学ぶ良い機会になりました。ファーストビューをスマホ向けに最

こんにちは。今回は、Three.jsを使ってブラウザで遊べる宇宙シューティングゲームを制作しました。## 制作した内容今回のゲームでは、宇宙空間を舞台にしたシンプルなシューティングゲームをテーマに制作しています。主な機能は以下の通りです。・3D宇宙船の操作・マウス操作による移動・クリックで弾を発射・3D隕石のランダム生成・当たり判定・爆発エフェクト・スコア表示・HPシステム・ゲームオーバー演出宇宙船や隕石は3Dモデルを使用し、ブラウザだけで動作するゲームとして構築しています。## Three.jsだからできる表現Three.jsを使うことで、通常のWebサイトだけではなく、・3Dゲーム・インタラクティブなWebサイト・商品紹介コンテンツ・イベントサイト・体験型ランディングページなど、動きのあるコンテンツを制作できます。近年は「見るだけ」のWebサイトだけではなく、ユーザーが操作して楽しめるコンテンツの需要も増えています。## 現在も新しい作品を制作中です現在は、・宇宙ポートフォリオ・水族館ポートフォリオ・シェーダーを活用したインタラクティブサイトなども制作しており、Three.jsならではの世界観づくりにも取り組んでいます。## Web制作・3Dコンテンツ制作も対応していますHTML・CSS・JavaScriptをはじめ、Three.jsを活用した3D表現やインタラクティブコンテンツの制作にも対応しております。「少し動きのあるサイトを作りたい」「他とは違う印象的なWebページを作りたい」そんなご要望がありましたら、お気軽にご相談ください。これからも制作した作品や学習内容をブログ

本日は「JavaScriptでヘッダーに影をつける実装」に挑戦しました✨スクロールするとヘッダーにふわっと影がつく、よく見るあの動きです😌最初は「CSSだけでいけるのかな？」と思っていたのですが、実際はJavaScriptでスクロール量を取得して、クラスを付け外しすることで実現できると知りました！▼今回やったこと・スクロール位置を取得（scrollY）・一定以上スクロールしたらクラスを追加・CSSでbox-shadowを適用・transitionでふんわりした動きに最初はエラーも出て苦戦しましたが、「DOMが読み込まれる前にJSが動いていた」という原因に気づけたのは大きな収穫でした✨少しずつですが、「見た目（CSS）」と「動き（JavaScript）」の役割の違いが理解できてきた気がします😊今後はスクロールでふわっと表示されるアニメーションにも挑戦したいです！引き続きコツコツ頑張ります🌿少し影が濃い気もするのでまた調整してみようと思います！

ポートフォリオサイトを更新していたときの出来事です。もともとポートフォリオサイトのスマホメニュー（ハンバーガーメニュー）は問題なく動いていました。今回、ポートフォリオから Elementorで作成したサイトのURLに飛べるように公開したのですが、そのあとからスマホでメニューを操作すると不具合が発生するようになりました。ハンバーガーメニューを押すとフルスクリーンメニューは表示されるのですが、閉じることができなくなってしまったのです。最初はJavaScriptの問題かと思い、検証ツールで確認してみました。するとクリック時にhamburger activeというクラスはちゃんと付いていました。つまり JavaScriptは正常に動いている状態 でした。では何が原因なのか調べていくと、原因は CSSの z-index（要素の重なり順） にありました。フルスクリーンメニューのレイヤーがハンバーガーボタンより上に表示されてしまい、ボタンが見えていてもクリックがメニューに遮られてしまっていたのです。そこでレイヤーの順番を整理してhamburger（ボタン）header（ヘッダー）fullscreen-menu（メニュー）という順番になるように z-index を調整しました。その結果、スマホメニューも無事に開閉できるようになりました。Web制作では、機能を追加したときに思わぬところで影響が出ることもあるので、改めて レイヤー構造（z-index）の大切さ を実感しました。また今回特に厄介だと感じたのが、PCの検証ツール（スマホ表示）では正常に動作していたのですが、実際のスマートフォンで確認し

基本は下記のsampleクラスをいれることで右回転のアニメーションが実装されます、ローディング画面など世話になるので覚えて損はないですtransform-originで回転基準を変更したりtransfoemにxyzを指定してそれを基準に回転するなど結構勝手が効きますtransというcssのコードを調べればいろいろでてくるの興味があればどうぞ※アットマークがブログにのっけれないので【ここにアットマーク】にしてます。.sample{  animation:3s  kaiten; }【ここにアットマーク】keyframes kaiten{   0%{ transform:rotate(0);}   100%{ transform:rotate(360deg); } }

こんにちは！冬の深まる季節、寒いですね。。私の家の外でも雪が降っています。今回は、あなたのWebサイトにも少し冬の魔法をかけてみませんか？JavaScriptを使って、訪問者に雪の降る体験を提供する方法を紹介します。エンジニアではないサイト運営者の方々でも簡単に実装できるよう、技術的な言葉を避けて説明します。なぜ雪の演出を加えるのか？Webサイトに動的な要素を加えることで、訪問者の注目を引き、記憶に残りやすくします。雪が降るアニメーションは、特に冬のプロモーションやイベントにぴったりで、サイトに季節感を加えることができます。それでは、どのようにしてこの魔法を実現するのでしょうか？JavaScriptで雪を降らせるJavaScriptは、ウェブページに動きを加えるためのプログラミング言語です。この言語を使って、雪の粒を画面上に描き、ゆっくりと下に落ちるアニメーションを作ることができます。基本的な考え方は、雪の粒を表す小さな要素をたくさん作り、それらがランダムに、そして自然に画面を横切るように動かすことです。実装のステップ1. 準備: まず、あなたのWebサイトに追加するHTMLファイルとJavaScriptファイルを用意します。3. 雪の粒を作る: HTMLの中で、雪の粒を表す要素を作ります。これは、CSSを使って白い丸や星の形にすることができます。4. 動きを加える: JavaScriptを使って、これらの雪の粒に動きを加えます。雪の粒それぞれに対して、画面の上から下へとゆっくり移動するように指示します。また、ランダムに左右に揺れる動きも加えることで、より自然な雪の降り方を演出

Webサイトを運営する上で、JavaScriptは欠かせない技術の一つです。しかし、JavaScriptを「フロントエンド」と「バックエンド」でどのように使い分けるかは、エンジニアではないサイト運営者にとってはややこしい話かもしれません。この記事では、技術的な難しい言葉を避けて、フロントエンドとバックエンドの違いを簡単に説明します。JavaScriptがサイト運営にどのように役立つのか、その理解を深めていただければ幸いです。フロントエンドとはフロントエンドは、ざっくり言うと、訪問者がブラウザを通して直接見て、触れることができるウェブサイトの部分です。ここでのJavaScriptの役割は、ウェブサイトをもっと使いやすく、また魅力的にすることです。例えば、スライドショーを表示したり、ボタンをクリックした時に何かがポップアップするような動きを加えたりします。このような動的な機能をウェブサイトに追加することで、訪問者にとって快適で楽しい体験を提供できます。バックエンドとはバックエンドは、フロントエンドの裏側で動いている部分で、訪問者には直接見えません。ここでは、ウェブサイトのデータの保存や管理、ウェブサイトがどのように動作するかという「ロジック」が実行されます。JavaScriptがバックエンドで使われる場合、サーバー上での処理に関わります。例えば、ユーザーがフォームに入力した情報をデータベースに保存したり、ユーザーのリクエストに基づいて特定の情報をウェブページに表示したりします。フロントエンドとバックエンドの違い簡単に言えば、フロントエンドは「見た目」と「ユーザーの体験」を、バックエ

## 04.テトロミノ移動(残像なし) ### 今回のゴール テトロミノを移動した際の残像が消えて綺麗に移動しているように見える ### 描画内容のリセット 残像=前に描画した図形が描画されたままになっている状態であるため、 新しい図形を描画する前に、一度キャンバスをクリアしてしまえば残像は残らなくなる。 キャンバスのクリアは↓で実施可能 これをミノの描画(drawMino)の前に実施すれば良いため、一連の処理を関数化して、drawMinoをコールしていた箇所を呼び替える↓も忘れずにこれで#04はゴール。お疲れ様でした。 今回はほぼ発想だけの話だったので内容としては短め。 綺麗に動くようになったことで一気にそれっぽい見た目にはなって来たはず。 そして、綺麗になったことで気づきやすくなった不備も見えてくるので次回以降でそこに対応します。 ただ、次回は機能の関わる修正ではなく、内部的な修正だけになります。

## 2. テトロミノ表示 次はゲームに使用するポリオミノの表示。 今回は、ポリオミノの中で一番種類数等のバランスが良いテトロ(4)ミノで実施。 ※後々の回転を考えたときの、それぞれのポリオミノの種類は モノ(1)ミノ:1種,ド(2)ミノ:1種,トリオ(3)ミノ:2種,テトロ(4)ミノ:7種,ペントミノ(5):18種 トリオ(3)までだと少なすぎ、ペント(5)だと一気に多くなる ### 今回のゴール テトロミノを表示できるようになる### 表示するミノを定義 ### ミノを表示配列に対するループはforEachとfor(aa of xx)も存在する ざっくりの特徴としては + for：break,continueが可能。配列の要素参照に限らず、好きな単位でループできる+ forEach：配列専用。CB関数を登録して使用する形のため、慣れるまで取っつきにくい 　CB関数で処理する都合上、breakはできない。ただ同じ処理内容を別のループにも使いまわせる + for..of：indexが取れない。要素のコピーにアクセスする形になるにため、ほぼ参照専用 基本は普通のfor文で十分・ ただJavaScriptは自由過ぎるので配列を連続で定義しなくても良いらしく そういう場合はfor文では綺麗に回せないためforEach/for..ofを使用した方が楽 今回はindexが欲しい + for..ofの方はindexが取れないので、仮にforEachで書き直すと↓みたいな感じ これで#02はゴール。お疲れ様でした。 余裕がある人はforEachへの置き換えや、minoInfoの中身を書き換え

見やすく管理しやすいコーディングのコツプログラムが小さい場合はあまり問題になりませんが、プログラムが複雑になって大きくなってくると、コーディングのやり方によっては、管理が大変になる場合が多くなります。この記事では、「見やすく」「管理しやすい」コーディングのコツを紹介します。誰がプログラムを読むか？最初にプログラムを書いた人以外が、プログラムを見る（読む）ことは、現実的にかなりあります。 一人で開発を行っていても、依頼されてプログラムの開発を行う場合、納品後の管理は依頼者側で行う場合が多くなります。また、会社などでは、最初にプログラムを書いた人が退職したり、別の仕事に就いたりして、その後の管理は別の人が行う場合もたくさんあります。また、プログラムを書いた本人でも、時間が経つと細かい部分は忘れてしまう場合が多く、開発してしばらくして何かの問題が出て、プログラムのコードを見直す場合には意外に時間がかかってしまうものです。こうした事態に備えるため、業務でプログラムを開発する場合はドキュメント（設計仕様書）を作成するのが普通です。 しかし、ドキュメントがあっても、プログラムのソースコードはいずれにしても読む必要があります。 つまり、ソースコードが見やすく、管理しやすいよう書いてあるかどうかで、そうした管理のために費やす時間は大きく変わってきます。ハードコーディングの問題管理が面倒なプログラムに「ハードコーディング」が多いプログラムがあります。 「ハードコーディング」とは、プログラムの中に「具体的な値」を直接書く書き方です。例えば、最近の投稿で紹介している、Vue と Firebase に

Pythonは簡単？最近はいろいろな用途で Python が利用できるケースが多く、たくさんのアプリが Python で書かれています。果たして Python は簡単なプログラミング言語なのでしょうか？よく利用されるプログラミング言語最近のソフトウエア開発では、Python や Javascript は良く利用されるプログラミング言語です。 特に、OS などに依存しない言語で、どの PC でも利用できるのは大きな魅力です。少し前は同じような理由で Java が広く使われた時もありました。日本では、Ruby なども良く利用されていますが、この辺りのプログラミング言語は、初心者の学習でも最初に選ばれる事も多く、これらのプログラミング言語を利用した仕事も多くなっています。実際に、Python や Javascript でプログラムを書くと比較的短時間で大抵のプログラムを開発できます。そう考えると、Python や Javascript は簡単な言語と言えそうです。比較の対象は、C 言語や C++これに対してよく比較される言語が、C 言語や C++になります。 いろいろな人に話を聞くと、C 言語や C++は「難しい」「難しそう」というイメージを持っている人が多いようです。 Java はこれらの中間に位置する感じになります。しかし、実際のコードを見てみると、基本的な書き方はほとんど同じです。 プログラムの基本は、「繰り返し処理（ループ）」「条件分岐」です。あとは、変数の型と演算です。 一番古い部類に入る C 言語の書き方と、見た目上は大きな違いはありません。新しい、プログラミング言語の場

昨日は「もりけん塾」でフロントエンドエンジニアを目指す方への勉強会でした過去最多の参加希望応募で盛り上がりました。定期的にやっていきたいと思います。ぜひ、自分のサービスをご購入くださいませ。一緒に頑張りましょう

今日からココナラを始めたRyu。ですこんにちは :)仕事・相談を探すのページで提案をしてたんですが・・・・同じ事、繰り返し書くの面倒くさっ∑(ﾟ◇ﾟ；) と早くもなってしまいました。どうやら、アプリでは定型文として挿入できる機能があるようで・・・いや、PC版はないんかい！挨拶や実績などは毎回同じ感じの事を入れないといけないわけで。毎回、毎回打ってられません :(と言う事でブックマークレット!javascript:(()=>{document.getElementsByTagName('textarea')[0].value="ここにテンプレートにしたい文字を入れる。改行は\nで!"})();使い方は（クロームの場合)ブックマークバーで右クリック > ページを追加 >　URL部分を上のスクリプトに変えるだけ!これで提案ページでそのブックマークを押すと定型文が挿入されるようになります :)もしかして自分が分かってないだけで最初から出来たりするのかな・・・？

Javascript の変数の話Javascript に限らず、プログラミング言語には変数という概念があります。プログラムで扱うデータを入れる場所です。最新の Javascript では３種類の変数を利用する事ができます。＊　const＊　let＊　var　です。constとletは後から導入された物ですが、基本的にはこの２つを利用することが推奨されています。理由は、なるべくバグを出さないようにするためというのが大きいと思います。どうして、constやletを使うとバグを生み出し易いのかご存知ですか？この記事では Javascript での変数について書いてみました。varだけでプログラムは書けます！当たり前ですが、varだけでもプログラムは書けます。慎重にコードを書けば別にvarを使う事自体は問題ないのですが、少し大きなプログラム、特に後から手直ししたりする場合にバグの原因になるのでconstやletを使うことが推奨されています。幾つか理由がありますが、var の問題は大きいものが２点です同じ名前の変数を複数宣言できる変数の宣言前の参照も許されている（値はundefined）ESLint などプログラムをチェックするプログラムを使えば、「危ない」コードは見つけてくれます。そうした仕組みを上手く利用する場合は、大きな問題ではないのですが、こうした、仕組みを利用しない場合バグの原因になり易いので、letやconstが導入されました。それでも、verが残されているのは、互換性のためなので、新しくプログラムを書く際には基本的には「var」は使わないのがいちばんです！バグの少ないプログ

Web 開発はフリーランスや転職に向いた分野です。実際に、Web 開発を学習してフリーランスや転職を目指す方も多いと思いますが、それにはちゃんと理由があります。この記事ではその理由に迫ってみました。現在、Web 技術を学習中の方は参考にして頂ければ幸いです。たくさんあるソフトウエアの仕事実は、プログラミング技術というかソフトウエアを生かせる仕事は Web 開発意外にもたくさんあります。その中で、フリーランスや転職を目指す方が多いのには実はきちんとした理由があります。Web 技術は「体験」できるプログラミング技術一番の理由は、Web 技術は簡単に「体験」できるプログラミング技術だからです。 どういう事かと言うと、PC １台あれば、作ったものを誰でも「目で見られる形にできる」からです。しかも、殆どの場合、それほど高性能の PC も必要ありません。この「体験」できると言うのがとても大きな意味を持っています。実際に、フリーランスになったり、転職を成功させるためには、プログラミング技術を身につける必要があるのは当然ですよね？そのために必要なことは、学習を続けてプログラミング技術を確実に自分のものにする必要があります。Web 開発の場合、勉強を開始して覚えた簡単な事でも、「形」として見ることができます。実際に作った物が「形」になると「できた」という実感が得られる物です。出来ることが多くなると学習も楽しくなってきます。そうしたことが、学習を続けるモチベーションになっていって続けやすくなります。たくさんの情報がある二番目の理由は、たくさんの情報がある事です。よく、Web 学習で行われる「模写」

子どもがバスケットボールをやっているのですが、練習や試合を見ている中で、自分がマークする相手を見失ってしまうことが少し気になっていました。バスケではボールを見ることも大切ですが、ディフェンスでは「自分が誰をマークしているのか」を意識することも大切です。そこで、指定された色と番号の選手をすばやく探す練習ができる、簡単なブラウザゲームを作ってみました。画面上に青と白のユニフォームが表示され、その中から、「青の4番」のように指定された選手を探してクリックします。人数を変えたり、選手が動くモードにしたり、先にボールをクリックしてからマークマンを探すモードも入れました。このゲームで練習してほしかったのは、単に番号を探すことではありません。・ボールだけを見ないこと・自分が見るべき相手を確認すること・短い時間で相手を見つけることこのあたりを、ゲーム感覚で少しずつ意識できたらいいなと思っています。【小さなWebツール・練習用ツールも作れます】今回のように、子どもの練習用や仕事の確認作業など、ちょっとした目的に合わせたツールを作ることができます。ブラウザで動くHTML形式のほか、内容によっては Pythonファイルでの納品 や、パソコンで起動しやすい exeファイルでの納品 も可能です。「こういうものがあったら便利かも」「子どもの練習用に簡単なものを作りたい」「仕事で使うチェックツールを作りたい」といった内容でも形にできる場合があります。小さなWebツールや、練習用・業務用の簡易ツールを作ってみたい方は、ココナラ内のメッセージからお気軽にご相談ください。

えー3回にわたって「SEO」の記事を書いてきまして、たぶん記事を読まれた方は「おもしろSEO対策おっちゃん」という印象を持たれたんではないかと思います(^^;)・・・すみません、私の本業は「フロントエンドエンジニア（Web制作）＆Webデザイナー」だったりします(笑)「HTML＆CSS」は当然として、必要とあらば「JavaScript」や「PHP」も書きますし、Photoshopを使いこなして画像も作成したりします。現在は、WordPressの構築・運用・メンテナンス・保守が主になってきておりますが、基本的には、フルスクラッチのサイト制作からWordPress運用まで対応できる、「Webの何でも屋さん」だと思っていただければと思います。ただ、フロントエンドエンジニアでSEOも長年経験してきた人って、実はあまりいないんじゃないかなあと思います。SEO分析自体は、必ずしもサイト制作の経験がなくてもできる分野ですからね(^^;)フロントエンドとSEO、両方のスキルを持っていることが、私の強みなんではないかと思っております。で、Web制作に長く携わっていると、以前はとても苦労していたことがすごく簡単にできるようになったりします。ここらへん、ちょっと深堀りしたいと思います。■なぜ私はJavaScriptを書かずに済むなら書かないのか答えは単純。「軽いから」「エラーが出にくいから」「簡単だから」です。なんかファストフードの「うまい」「はやい」「安い」みたいですよね(^^;)まあ、「簡単だから」は逆にCSSだけで書くとJavaScriptよりもめんどくさい場合もありますが(笑)（ここらへん、

今日は、JavaScriptで外部のデータを取得して画面に表示する仕組みについて学習しました💻✨最初は正直、かなり混乱しました…💦特に、・data[0]ってどこのデータ？？・どこに「今日・明日」の情報があるの？という状態で、完全に迷子に…。でも、実際にコンソールでデータの中身を確認しながらひとつずつ見ていくことで、「データの中にさらにデータが入っている」という構造が少しずつ理解できてきました✨例えば今回の場合、data[0].timeSeries[0].areas[0].weathersという形で、👉 必要な情報まで“順番にたどっていく”ことで👉 天気データを取り出せるという仕組みでした！💡今回の気づき・いきなりコードを書こうとしない・まずはデータの中身を見るのが大事・コンソールは最強の味方まだまだ理解は途中ですが、「なんとなく読めるかも！」という感覚が出てきたのが大きな一歩でした✨少しずつですが、できることが増えていくのが楽しいです☺️引き続きコツコツ頑張ります🌿

今日はJavaScriptでAjax（データの取得）について学習しました。ボタンをクリックすると、外部サイト（気象庁）から天気データを取得する処理を作成しました。fetchを使ってデータを取得し、その後.thenでデータを受け取る流れになっているのですが、正直最初は「何をしているのか分かりづらい…」と感じました。特に難しかったのが、data[0].timeSeries[0].areas[0].weathers[1]この部分です。配列やオブジェクトが何重にも重なっていて、「どこからどこを取り出しているのか」がパッと見では理解しづらかったです。ただ、解説を見ながら一つずつたどっていくと、「大きなデータの中から必要な部分だけ取り出している」ということが分かってきました。また、fetchで取得したデータはそのままでは使えず、response.json()でJavaScriptで扱える形に変換している点も学びになりました。まだ完全に理解できたとは言えませんが、「外部からデータを取得して使う」という流れを体験できたのは大きな一歩だと感じています。少しずつですが、できることが増えてきて嬉しいです✨

本日はJavaScriptの学習で、エラーハンドリングについて理解を深めました。これまでエラーが出ると、原因を探して修正することばかりに意識が向いていましたが、今回の学習を通して、「エラーを前提に設計する」という考え方があることを知りました。try と catch を使うことで、処理の中でエラーが発生した場合でも、プログラム全体を止めずにコントロールすることができます。また、throw によって意図的にエラーを発生させることで、想定外の値や不正な処理に対して、明確に「これはエラーである」と定義できる点も印象的でした。最初は処理の流れが掴めず戸惑いましたが、・どこでエラーが発生するのか・どこでそれを受け取るのかという構造を意識することで、少しずつ理解が整理されてきました。エラーは単なる「不具合」ではなく、適切に扱うことで安全な処理を実現するための重要な仕組み。今後はエラーを避けるだけでなく、「どう扱うか」まで意識して実装していきたいと思います。divide関数内でyが0の場合にthrow文を使用してエラーを投げています。その後、try〜catch文でエラーをキャッチしてメッセージを表示します。

今日はJavaScriptの学習を進めました✨昨日に引き続き、「HTMLをJavaScriptで操作する流れ」について理解を深めています。具体的には、・HTML要素を取得する（getElementById）・クリックイベントをつける（addEventListener）・要素を新しく作る（createElement）・テキストを入れる（textContent）・親要素に追加する（appendChild）といった一連の流れを学習しました。最初は「何がどこに繋がっているのか」が分からず混乱しましたが、「JavaScriptでHTMLを取得してから操作する」という流れが見えてきて、少しずつ理解できるようになってきました✨また、フォームに入力された値を取得する方法も学び、実際に動きのある処理ができるようになってきたのが楽しかったです！まだまだ理解が浅い部分もありますが、一つずつ積み重ねていきたいと思います☺️

本日は「DOM操作」について学習しました💻✨これまでHTMLやCSSで見た目を作ってきましたが、JavaScriptを使うことで「要素を取得して動かす」ということができるようになり、一気にできることが広がった感覚があります☺️特に印象的だったのが、「document」はHTML全体を表しているという考え方です。JavaScriptは直接HTMLを触るのではなく、この「document」を通して操作するという仕組みを知ることができました。また、複数の要素を取得した際に「length」を使って繰り返し処理を行うことで、1つずつ順番に扱えることも学びました。最初は少し混乱しましたが、「配列のような箱から順番に取り出している」と考えることで少しずつ理解できてきました✨まだまだ基礎段階ですが、少しずつ「動き」のあるサイトが作れるように頑張ります🌿

1. サイトイメージ画像2. 制作概要 制作時期：2024年3月 制作時間：60時間作業内容：コーディング、クロスブラウザテスト、サーバーアップロード ページ数：6ページ 使用ツール：VScode、Figma 使用言語：HTML、CSS、SCSS、JavaScript、jQuery 3. 工夫したポイント(コーディング) ファーストビューでは、数秒ごとに画像が切り替わるアニメーションを実装し、訪問者に動きのある印象を与える工夫をしました。 また、トップページでは以下の機能を実装し、利便性を高めています。 ・モーダルウィンドウ ・ハンバーガーメニュー ・ローディングアニメーション ・スムーススクロール ・ホバーアニメーション学科ページについては、4つのページが同一仕様であることを活かし、共通のCSSファイルを適用しました。これにより、保守性や管理効率が向上しています。また、すべてのページにおいてCSS設計ではBEMを使用し、可読性の高いコーディングを行いました。さらに、予約フォームのページでは、必須項目がすべて入力されていない場合は送信ボタンが押せない仕組みを導入しました。この設計により、利用者が入力ミスに気づきやすくなりました。 最後に、スマートフォン（iPhone・Androidの両方）を用いて表示確認を行い、崩れがないことを確認しました。

ご覧頂きましてまことにありがとうございます！Makkwyldeです。JavaScriptの基礎を習得した皆さん、おめでとうございます！これからは、より高度な概念とテクニックを学び、効率的で堅牢なコードを書く時です。このガイドでは、JavaScript中級者が次のレベルに進むために知っておくべき重要なポイントをご紹介します。非同期プログラミングの深掘り非同期処理は現代のJavaScriptにおいて重要な概念です。① Promiseの高度な使い方・`Promise.all()`や`Promise.race()`を使用して複数のPromiseを管理・async/await構文を活用してより読みやすい非同期コードを書く② フェッチAPIとAjax・フェッチAPIを使用してサーバーとのデータのやり取りを行う・エラーハンドリングとリトライロジックの実装モジュールシステムの活用コードの再利用性と保守性を高めるためにモジュールを活用しましょう。・ES6モジュールの`import`と`export`を使いこなす・動的インポートを使用して必要に応じてモジュールを読み込む・モジュールバンドラー（WebpackやRollup）の基本的な使い方を学ぶ関数型プログラミングの導入関数型プログラミングの概念を取り入れることで、より宣言的で予測可能なコードが書けます。・純粋関数の作成と副作用の最小化・高階関数（map、filter、reduce）の活用・イミュータブルなデータ構造の使用オブジェクト指向プログラミングの深化JavaScriptのオブジェクト指向機能を最大限に活用しましょう。① クラスと継承の高度な

「プログラミングって何から学べば良いかわからない‥」「プログラミングスクールって高額過ぎて踏み出せない‥」そんな風に思っていませんか？　私もそうでした。私は4人子供を育てながら小学校で教員をしていましたご存知のように教員は超絶ブラック。子供に学びを教える喜びを味わいながらも、自分の働く環境について強く疑問を持つようになりました自分を変えたい、新しい技術を学びたい。プログラミングって興味あるけど、何から始めたらいいかすらわからない。独学は挫折の連続。スクールは高額で決心がつかず、迷って動けない時期がずっとありました結局貯金をはたいて、某有名プログラミングスクールに通うことに決めましたそこでの学びは私にとって本当に有意義でした。専属の先生が一つ一つの質問に丁寧に答えてくれて、安心して学ぶことができました。子育て仕事と苦労しながら先生の支えがあってなんとか卒業できましたしかし卒業後に、ある後悔をしました。それは、「スクールが即戦力のエンジニアまで専門性を高められるほどの環境」だからこそ、私のような「基礎基本もわからない初心者にとって無駄に高額すぎる環境」だという気づきです例えるなら初心者にとってスクールは【小学生が算数を学ぶのに大学に通う】ようなもの私はプログラミングを学んだ嬉しさと、どこか満足しきれない思いを抱えて卒業しました。もしこの話を聞いて少しでも興味を持っていただいた方には、私のような思いをさせないように、私がプログラミングスクールに150万円以上費やして学んだ知識・経験から、基礎基本の部分をまとめ、お子さんから大人まで初心者の方にも分かるように、安価な値段でお教えします。

当サービスは、高品質、高コスパのLP（ランディングページ）を制作します。 高品質な有料画像、売れるためのLP構成ガイド付き！ 当サービスの特徴 ・高品質なテンプレートをベースにお客様に合わせたカスタマイズします。 ・LPの構成から文章・画像・カラーを変更可能です。 ・売れるLPに必要な構成のガイド付きで文章作成も安心です。 ・シンプルでわかりやすく見やすい、情報が伝わるデザイン ・ご自身で構成順序の並び替え、ブロックの非表示も可能なため、ABテストも簡単です。 通常では高額になる作り込まれたLPをベースに使用することで、高品質、低価格かつ高コスパを実現しています。 当サービスはこのような方におすすめです ・はじめてLPを制作する方 ・高品質なLPをできるだけ安価で欲しい方 ・派手なデザインよりもシンプルでわかりやすく写真を活かしたデザインで制作したい方 ・HTMLの知識が無くてもご自身で定期的に更新してABテストを行い方 当サービスはこのような方におすすめいたしません ・キャッチコピーや文章作成まですべて丸投げでお任せしたい方 ・低品質でいいからとにかく安く済ませたい方 ・予算は惜しまずレベルの高いデザイン・クオリティで制作した方 LP制作内容 スマートフォン表示対応 画像選定（著作権フリーの写真・イラスト） WordPressの導入、初期設定 お問い合わせフォーム 内部SEO対策、表示速度対策 セキュリティ対策 お知らせやブログの投稿機能可 SNS連携可 簡単なスクロールアニメーション Googleマップ、You Tube動画埋め込み Googleアナリティクス・Google

そのアニメーション本当に要る？Web制作においてCSS、JavaScriptを使ったアニメーションはよく見かけると思います。アニメーションは見た目にもインパクトに残りやすいですが、使いどころを間違うとそのサイトで伝えたいことが分かり辛くなる可能性があります。アニメーションを使うと分かり辛くなる例そのサイトの目的が文章を主とした情報提供である場合、アニメーションとは相性が悪いです。例えばニュースサイトやブログなどでスクロールするたびに文章がアニメーションで出てくるとどうなるでしょう？読み辛くなります。人間は文章を読む時、視線が上から下に動きます。しかし読んでいってもアニメーション待ちで下の方の文章が間に合っていないとストレスになりますし、そのサイトですべき文章での情報提供の価値が薄れてしまいます。また、初心者のポートフォリオサイトで無駄にアニメーションを使っているのがよくあります。自分の能力を見せるために動きのあるサイトを使いたくなる気持ちは分かりますがポートフォリオサイトの目的は"こんな作品を作った"、"こんな能力があります"とアピールすることが目的かと思います。それなら見やすく分かりやすいレイアウトを行いリンク先の自分の作品で適切なアニメーションを使うことができることをアピールした方が良いと思います。アニメーションを使うと効果的な例ビジュアルのみでユーザに価値提供できるようなサイトはアニメーションと相性が良いです。ファッション、フード、アニメなどなど...極端に言うと写真1枚でもそれがなんのサイトか説明できるジャンルはアニメーションと相性が良いです。日本と海外のサイトの違いと

下記を用意します。名前はなんでも良いです。- index.html- script.jsscript.js内に下記JavaScriptを書いて、時間を取得します。const today = new Date()console.log(today)▼index.htmlをGoogle Chromeなどで開いて、コンソール画面を確認します。※Google Chromeだと右クリック→検証→Consoleをクリックします。console.log(today)が出ています。続いて下記を追記して、時間と分を取得します。const hour = today.getHours()const minutes = today.getMinutes()console.log(hour)console.log(minutes)▼コンソール画面で確認します。時間と分が出ました！次は◯時◯分という形で出してみましょう！以下を追記します。1行目はバッククォートで囲んでいます。↓コレ`const time = `${hour}時${minutes}分`console.log(time)次に先ほどのhourを使って、もしも18時以降なら（hourが17より大きかったら）…こんばんは上記当てはまらなくて、もしも12時以降なら（hourが11より大きかったら）…こんにちは上記当てはまらなくて、もしも5時以降なら（hourが4より大きかったら）…おはようございますどれにも当てはまらなかったら、（hourが4以下）…無理しないでくださいを表示してみます。下記を追記してください。function greeting()

## 開発環境+ Windows10+ VSCode : v1.74.2 + Chrome : v108.0.5359.125 + Live Preview(VSCode拡張) : v0.4.4 + Git(ソース管理用。開発とは直接は関係なし) : v2.27.0 + GitLens(Git用。VSCode拡張) : v13.2.0 ## はじめに C/C++っぽいものは10年近く使ってますが、JavaScript自体は経験なし。 私自身もあきちゃんさんの講座を見ながら作ってみたので、自分なりに+αしつつ、思い返しながらまとめ直してみました。 今回は#00今後の予定は目次参照全部揃うまでは無料で公開。全部揃ってからは6.以降は有料公開にする予定。## 目次 0. ソース管理の勧め 1. フィールド表示 2. テトロミノ表示 3. テトロミノ移動(残像あり) 4. テトロミノ移動(残像なし) 5. 外部ファイル化/クラス化 6. フィールド定義/あたり判定 7. テトロミノ種類追加/変更 8. テトロミノ回転 9. テトロミノ確定/次ミノの出現 10. 自由落下 11. ライン消去 12. 出現位置変更/ゲームオーバー 13. 壁蹴り/回転入れ 14. ゴースト/急直下 15. ネクスト表示 16. ミノキープ 17. シード値対応 ## 0. ソース管理の勧め 個人で色々勉強しながらコーディングする場合は、作業中のリファクタリング(コードの再構築)はザラに発生します。 そのため、ソース管理システムを使って、コードが上手く動いた段階のソースを都度管理していくと、いつでもそこまで

Vue公式チュートリアル　〜　部品にデータを渡すVue の公式チュートリアルを使ってゼロから Web 開発の学習をする方法を紹介しています。今回は、メインのページから呼び出す「部品」にデータを渡す方法を学習します。前回までのポイントは？前回のステップでは、これまで学習に使っていたメインの部品（ページ）から新たに作成した部品を呼び出す方法を学習しました。 これまで、学習した基本的な「書き方」は、Vue で使う「部品」を作る場合には同じ容量で使う事ができます。つまり、これまで学習した事が使いこなせるようになれば、「部品」を作ることに役立てることができます。そこで、改めてこれまで学習した「Vue の部品の基本」をもう一度見直してみてください。今回の学ぶのは？今回、学習するのは既に書いていますが、作成した Vue の「部品」を呼び出す際にデータを渡す方法を学習します。なぜ部品にデータを渡す事ができると、部品が使いやすくなるからです。例えば、ページの先頭に書く情報（ヘッダーと呼ばれる場合もあります）に例えばアプリのタイトルをこの部分に入れたい場合です。 部品にデータを渡せない場合は、部品の中でタイトルのデータを作る方法になります。しかし、この場合は、アプリごとに「別の物」になってしまいます。 部品を呼び出す際にデータを渡せれば、同じ部品を利用する事が可能になります。Vue は、そうした事を考慮して、部品にデータを渡す機能をサポートしています。このステップではそれを学習します。今回の変更前のコードです。(App.vue)<script>import ChildComp from

Vue 公式チュートリアル　〜　「部品」を呼び出す！Vue の公式チュートリアル、ステップ 11 は、これまでは一つの大きな「部品」を扱ってきました。このステップでは、別の「部品」を作成して、呼び出すと言う使い方を学習します。どちらかというとこちらの方がよく使う方法です。前回までのポイントは？前回までは、メインの表示部分だけを作って、その「部品」を表示するという課題でした。 メインの表示部分の部品を作る基本を中心に、その書き方を学習してきました。これは、部品の作り方の基本をカバーしているので、別の部品を作る場合にも利用できます。今回学習するのは？今回学習するのは、新たに「別の部品」を作成して、「メインの表示部分で使う」やり方を学習します。例によって、変更前のコードから見ていきましょう！今回は二つの部分に分かれています。 コードが表示されている右側の画面の上にファイルの名前が書かれています。 今回扱うのは、メインのページの部品の「App.vue」ともう一つの部品「ChildComp.vue」の二つです。（App.vue）<script>export default {  // register child component};</script><template>  <!-- render child component --></template>　今まで学習してきた、「メインのページ」の「部品」です。 現時点では、基本的に何もない状態です。（ChildComp.vue)<template>  <h

Vue 公式チュートリアル　~ Vue の部品の状態とテンプレートのリファレンス今回は、今までとは違ったステップです。Vue の仕組みを理解するには意味のある内容ですが、初めて Vue を学習する人には、知識として覚えておけば十分です。では、早速内容を見てみましょう。前回までの復習Vue の部品の書き方の基本を使って、少しプログラムらしい例として、「やる事の一覧を管理」をするための、シンプルなアプリを前の二つのステップで学習しました。ちょっとしたアプリにしたので、初めて、HTML や Javascript を学習している人には、ちょっと学習する項目が多くなっていました。 今回の、ステップはシンプルなので、時間が許すようならば、前回までの復習を今一度やってみてください！今回学ぶのは？今回学ぶのは、「Vue の部品」の状態と、HTML の記述（template のタグの部分）で利用できる「リファレンス」の使い方です。「Vue の部品」は、Vue の中で「部品が作られる（準備される）」状態から、Web ブラウザで表示できるような状態に「組み込まれた状態」など、いくつかの違った「状態」があります。この「状態」によって、実際に表示される内容が微妙に違ってきます。変更前のコードです。<script>export default {  // ...};</script><template>  <p ref="p">hello</p></template> この変更前のコードだと、HTML の部分（template の部分

React の公式チュートリアルを見てみましたWeb 開発のショートカットとして、フロントエンドのフレームワークのチュートリアルをやってみると言う学習方法を紹介しました。この記事では実際に React のチュートリアルを見てみました。React のチュートリアルリアクトの公式サイトにチュートリアルが紹介されています。このチュートリアルは、「tic-tac-toe」と言うゲームです。日本だと「🟡 ❌」という感じで、縦・ 横・斜めのいずれかで三つ揃えるゲームです。これを順番に従って作っていくと、簡単な React のアプリが作れる様になっています。 まずは、React を使うための設定から始まって、React を使ったコードの書き方を解説しています。React の簡単な仕組み最初に、簡単に React とは何かを書いておくと、「Web ブラウザ上で動くアプリを簡単に作るための仕組み」です。HTML と CSS は Web ページを書くための言語です。一方で Javascript は Web ブラウザで動かすプログラムを書くためのプログラミング言語です。もちろん、Javascript を使って、 Web ブラウザの表示も作る事ができますが、HTML で直接書くよりわかりにくいコードになってしまいます。そこで、HTML の記述を Javascript の中に組み込む様な形で使えるようにしたのが React がやっている事です。HTML に似た記述で「JSX」と呼ばれています。JSX は HTML に非常に似た記述方法なので、HTML を学んだ上で学習した方が良いというのが通常の学習方法

値下げしました！

bitcoinjs-libとtruffleを使って、ビットコインと連動して動くERC20トークンを作ってみました。 こちらが、トークンの購入画面です。金額を入力して、購入ボタンを押すとMetaMaskが開きます。このコントラクトにはイベントが定義されています。 実行結果をEtherscanから確認。サーバー側でイベントを感知して、ビットコインを移動します。 その結果がこちら。テストネットのビットコインが足りず桁を下げています。本来なら1 BTC = 1 トークンを想定しています。 また、ビットコインのテストネットなので、当然アドレスがイーサリアムのものと変わっています。 こちらのテストネットのアドレスは、送金者のイーサリアムのアドレス + ○○（セキュリティ面を考慮して秘密）で作っています。 ビットコインの送金完了後、ウォレット側にトークンを送ります。トークンが送られて、残高が1となりました。 省略しますが、売却を押すとコントラクトのイベントが実行された後、トークンを送金する関数が動きます。 そのイベントを感知してビットコインの移動が行われるのも確認できました。 また、ビットコインの移動が失敗（残高不足など）すると、トークンを送金者に返金する部分も上手く動作しました。 今回は、動作確認のためビットコインの移動は、あるアドレスから別のアドレスへ移動させただけですが、実際に使う時はコインチェック等の取引所のAPIを使ったらいいのではないかと思っています。