すべてのブログから「#JavaScript」タグの検索結果

来週に初のサービスを出品する予定です。たぶんです。(笑)サービスは、「マルチメディア デザイン ブック」です。サービスのタイトルは未定です。ブックのサンプルを制作中ですが、今回は、ブックの概要的な説明です。＼ページめくり／本物の本のようなページめくりができるため、本物の本のような読書体験を閲覧者に提供できます。＼マルチメディア／文章、画像、写真、フォトギャラリー、動画、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を使わないと、この機能は使えません。毎月有料版の支払いをしていれば利用できます。オリジナルプログラムなら毎月の費用がなくてアップロードが可能実際にアップロードを自動で行って、ファイル名を変換して、メールにリンク先ファイルを作成して送信することができます。興味がある方は、ご連絡をください。

# 【Web制作学習】自分用の「献立・レシピ管理アプリ」を作ることにしました今日は、以前から「あったら便利だな」と思っていた、**自分専用のレシピ・献立管理アプリ**について、必要な機能や画面構成を考えました。普段レシピを探すときは、CookpadやYouTube、料理サイトなど、いろいろなサービスを利用します。ただ、「この料理また作りたい！」「前に作ったレシピ、どこで見たんだっけ？」「今週の献立をまとめて決めたい」ということがよくあります。そこで、気に入ったレシピだけを自分用にまとめて、さらに**1週間の献立まで作成できるWebアプリ**を作ってみることにしました。---## 今回作りたいアプリ今回考えているのは、レシピそのものを掲載するサイトではなく、**お気に入りレシピを管理する＋1週間の献立を作成する**ための自分専用アプリです。CookpadやYouTubeなどの元レシピはURLを登録して、必要なときに元サイトへ移動できるようにします。まずは機能を増やしすぎず、Ver.1では、* レシピ一覧* レシピ追加* レシピ詳細* 今週の献立作成この4つを中心に作ることにしました。買い物リストなどもあると便利ですが、まずは基本機能が完成してから追加する予定です。---## レシピに登録する内容レシピを登録するときは、次の情報を保存できるようにします。### ・料理名「鶏の照り焼き」「麻婆豆腐」など、料理の名前を入力。### ・カテゴリー主菜、副菜、汁物、ご飯・麺などをプルダウンから選べるようにします。### ・元サイト名CookpadやYouTubeなど、どこで見つけたレシピな

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

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

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

本日も、自分用に作成している**献立・レシピ管理ツール**の制作を進めました。今回は主に、レシピ一覧画面のカテゴリー機能を整えています。## カテゴリーごとに色分け一覧画面には、* すべて* 主菜* 副菜* 汁物* ご飯・麺のカテゴリーを用意しました。選択中のカテゴリーだけ色が付くようにし、どのカテゴリーを表示しているのか分かりやすくしています。また、レシピカード内のカテゴリータグも同じように色分けしました。例えば、主菜はオレンジ系、汁物はブルー系、ご飯・麺はベージュ系というように、カテゴリーごとに色を変えています。## JavaScriptで絞り込み機能を追加見た目だけではなく、JavaScriptを使って実際にカテゴリーごとにレシピを絞り込めるようにしました。ボタンを押すと、* 選択したボタンに`active`クラスを付ける* その他のボタンから`active`を削除* 選択したカテゴリーと一致するレシピだけ表示* 「すべて」を選択すると全件表示という動きになります。HTMLの`data-filter`と`data-category`を使って、ボタンとレシピカードを対応させています。今回の制作を通して、JavaScriptでクラスを追加・削除する方法や、HTMLに持たせたデータを取得して処理する方法も少しずつ理解できてきました。## レシピ追加ボタンも設置一覧画面には、右下に「＋」ボタンも追加しました。スクロールしても表示されるように`position: fixed;`を使い、ここから新しいレシピを追加できるようにする予定です。次回は、この「＋」ボタンから移動する**レシピ

▼月を小文字のアルファベット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()]

表題の事件、どんなことが起きたのか簡単にいうと、「AIがリンクを window.open という JavaScript で書いていた」です(笑)■まずか結論から。何が悪いの？　とお思いの方もいらっしゃると思うんですが、これかなりまずいです。まず、結論から言います。・Analyticsなどで計測されない場合があります。・運が悪ければ、パラメータの取得もされない場合が。・iPhone サファリで、コンバージョンしない（リンクが作動しない）などの不具合が生じます。この事件の詳細をお伝えいたします。■社内で相談を受けました。「すみません、このLPのリンクがAnalyticsで計測されないんですが、原因分かりますでしょうか？」みたいに、とある課から依頼がありまして。ちょっとHTMLソースを見たところ、<button onclick="window.open('～～リンクURL～～');">●●の詳細を見る</button><a href="#" onclick="window.open('～～リンクURL～～');">●●の公式サイトへ</a>こんな感じでリンクが張られていました。AnalyticsもHTMLもいろいろトータルでやっている人間からすると、原因は明らかです。で、どう見てもAIに書かせたんだろうなあ、とすぐに予測ができました(笑)「これ、AIに書かせましたよね？ 　リンクが全て window.open というJavaScriptになっています。　これは絶対にやめてください。　iPhone のサファリではそもそもリンクが動作しない

# Webサイトにカルーセルを実装しました！想像以上に難しかった制作記録本日は、制作中のWebサイトに「カルーセル」を実装しました。カルーセルとは、複数の画像やカードを横方向へスライドさせて表示する仕組みのことです。店舗や施設などの写真をすべて一度に並べると、ページが長くなったり、情報量が多く見えたりします。カルーセルを使えば、限られたスペースの中で複数の写真を見せられるため、店舗紹介や制作実績などにも活用できます。今回は店舗内の写真を見やすく紹介するために取り入れましたが、完成するまでの調整が想像以上に難しかったです。## Swiperを使ってカルーセルを実装今回のカルーセルには「Swiper」というライブラリを使用しました。Swiperは、Webサイトにスライド機能を追加できるライブラリです。HTMLでスライドの構造を作り、CSSで見た目を整え、JavaScriptで動き方を設定します。大まかな仕組みは、次のようになっています。* カルーセル全体を囲む要素* スライドをまとめる要素* 1枚ずつのスライド* 現在位置を表すページネーション* カルーセルの動きを設定するJavaScriptただ写真を横に並べるだけではなく、Swiperで決められたクラスを正しく指定する必要があります。HTML・CSS・JavaScriptのどれか一つでも設定が合っていないと、横並びにならなかったり、スライドしなかったりするため、確認する部分が多くありました。## 写真の大きさをそろえるカルーセルに使用する写真は、それぞれ縦横の比率が異なります。そのまま表示すると、カードごとに高さが変わり、全体の

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

こんにちは。最近は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要素への操作との違いも少し見えてきた気がします。途中でカッコの閉じ忘れなどのエラーにもハマりましたが😂こういうミスも含めて理解が深まっているなと感じています。完成までもう少しなので、引き続き頑張っていきたいと思います✨

はじめまして。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))

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

今日は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がバックエンドで使われる場合、サーバー上での処理に関わります。例えば、ユーザーがフォームに入力した情報をデータベースに保存したり、ユーザーのリクエストに基づいて特定の情報をウェブページに表示したりします。フロントエンドとバックエンドの違い簡単に言えば、フロントエンドは「見た目」と「ユーザーの体験」を、バックエ

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

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

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

PCではきれいに見えるページでも、スマートフォンでは横にはみ出したり、文字が読みにくくなったり、ボタンが押せなくなったりすることがあります。見た目だけを急いで直すと、別の画面幅で崩れたり、既存の動作を壊したりすることがあります。公開前なら、次の順番で症状を切り分けると、どこを確認すべきか整理しやすくなります。1. 横スクロールが出ていないか。ページ全体を左右に動かせる場合、固定幅の要素、画像、余白、画面外へ押し出されたメニューが原因のことがあります。2. 画像が画面幅を超えていないか。画像の幅だけでなく、親要素の幅、左右の余白、画像を囲む要素の指定も確認します。3. 長い文字列やボタンが折り返されているか。URL、英数字、見出し、ボタンの固定幅が原因になることがあります。文字が切れているのか、要素全体が横へ広がっているのかを分けて確認します。4. メニューや開閉ボタンが押せるか。見た目だけでなく、押した後に表示が変わるか、別の要素に隠れていないか、1回目と2回目で同じ動きをするかを確認します。5. PCで直した後に別の幅が崩れていないか。1つの幅だけで修正を終えず、PC幅とスマホ幅の両方で確認します。可能なら中間の幅でも、横スクロールやボタンの重なりがないかを見ます。確認しても原因が分からない場合は、対象ページ、崩れる症状、再現手順、確認した端末・ブラウザを整理してください。「スマホで崩れる」だけでなく、「幅を狭くすると画像の右端が切れる」「メニューを押しても開かない」のように、操作と結果を書けると修正可否を判断しやすくなります。スクリーンショットを添える場合は、個人情報やログ

子どもがバスケットボールをやっているのですが、練習や試合を見ている中で、自分がマークする相手を見失ってしまうことが少し気になっていました。バスケではボールを見ることも大切ですが、ディフェンスでは「自分が誰をマークしているのか」を意識することも大切です。そこで、指定された色と番号の選手をすばやく探す練習ができる、簡単なブラウザゲームを作ってみました。画面上に青と白のユニフォームが表示され、その中から、「青の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つずつ順番に扱えることも学びました。最初は少し混乱しましたが、「配列のような箱から順番に取り出している」と考えることで少しずつ理解できてきました✨まだまだ基礎段階ですが、少しずつ「動き」のあるサイトが作れるように頑張ります🌿

ご覧頂きましてまことにありがとうございます！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

下記を用意します。名前はなんでも良いです。- 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()

値下げしました！

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

Webページのボタンやメニューが動かないとき、「JavaScriptが壊れている」とは限りません。対象の読み込み順、HTMLの指定、別要素との重なり、画面幅による表示変更など、確認する場所が複数あります。原因を自分で特定できなくても、購入前相談で次の5項目を伝えると、対応範囲を切り分けやすくなります。1. 対象ページとボタンページ名、見出し、ボタンに表示されている文字を伝えます。同じページに似たボタンが複数ある場合は、上から何番目かも添えます。2. 再現する操作「ページを開き、メニューを1回押す」「入力後に計算ボタンを押す」のように、問題が起きるまでの操作を順番に書きます。3. 実際に起きること何も変わらない、1回目だけ動く、別の場所へ移動する、スマートフォンだけ反応しないなど、操作後の結果を具体的にします。4. 期待する動作メニューが開く、合計が変わる、指定した場所へ移動するなど、本来どうなってほしいかを示します。参考にした正常な画面がある場合も、顧客情報やログイン情報を含めずに説明します。5. 確認環境と対象ファイルPCかスマートフォンか、ブラウザ名、問題を確認した画面幅、HTML・CSS・JavaScriptファイルの有無を伝えます。スクリーンショットを添える場合は、氏名、メールアドレス、注文情報、管理画面、APIキーなどが写っていないか確認してください。修正前にこの5項目がそろうと、「既存の静的ファイルだけで再現できる問題か」「外部API、認証、サーバー処理など別の確認が必要か」を購入前に判断しやすくなります。今回の静的修正サービスでは、受領したHTML・CSS・Jav

こんにちは！今回は、背景動画を活用したヒーローセクションを制作してみました。企業サイトやLPでは、ファーストビューの印象がとても重要です。静止画だけでは伝えきれない世界観も、背景動画を使うことで一気に高級感や没入感を演出できます。実装した機能今回のサンプルでは、以下の機能を実装しています。✅ 背景動画の自動再生✅ ワンクリックで背景動画を切り替え✅ 音声のON／OFF切り替え✅ オーバーレイによる視認性向上✅ レスポンシブ対応動画を差し替えるだけで、サイト全体の雰囲気を簡単に変更できるよう設計しています。使用技術HTML5CSS3JavaScriptMP4背景動画シンプルな構成なので、既存サイトにも導入しやすい仕様です。活用シーンこのような演出は、コーポレートサイトランディングページポートフォリオ商品紹介ページイベントサイトホテル・施設サイトなど、さまざまなWebサイトで活用できます。カスタマイズも簡単動画ファイルを差し替えるだけで、ゴールドパーティクル水中宇宙桜サイバーなど、サイトの印象を自由に変更できます。用途に合わせて世界観を作り込めるのも、背景動画の魅力です。まとめ背景動画は、「動きがある」だけではなく、サイト全体のブランドイメージを伝える強力な要素になります。現在は、このような演出を取り入れたWebサイト制作や、背景動画素材の制作も行っています。「サイトに動きを取り入れたい」「印象に残るファーストビューを作りたい」そんな方は、お気軽にご相談ください。

こんにちは。今回は、私が独学でプログラミングを学ぶ中で感じた「上達するために大切だと思うこと」について書いてみたいと思います。プログラミングを始めたばかりの頃は、「何から勉強すればいいのかわからない」「本を読んでも実際に作れない」「難しくて挫折しそうになる」そんな状態でした。実際、私も最初はHTMLやCSSの基礎を学んでも、なかなか自分でサイトを作れるようにはなりませんでした。しかし、ある時から勉強方法を変えたことで少しずつ理解が深まりました。それは、「学んだらすぐ作る」ということです。例えばHTMLやCSSを学んだら簡単なLPを作る。JavaScriptを学んだらボタンを動かしてみる。そんな小さなアウトプットを繰り返しました。最近はThree.jsを使った3D表現の制作にも挑戦しています。Three.jsは難しそうなイメージがありますが、最初から複雑な作品を作ろうとする必要はありません。最初は、・立方体を表示する・回転させる・色を変える・光を当てるといった基本から始めました。そこから少しずつ、・パーティクル・発光エフェクト・3Dモデル表示・シェーダー表現などを学んでいきました。最近では、妖精が飛び回るファンタジー風のWebサイトや、背景アニメーションなども制作しています。振り返ってみると、上達の近道は「知識を増やすこと」ではなく、「作品を作ること」だったように思います。完成度は高くなくても構いません。まずは作る。分からなければ調べる。また作る。この繰り返しが一番成長につながると感じています。これからプログラミングを始める方や、学習で悩んでいる方の参考になれば幸いです。今後もW

こんにちは。このたび、Three.jsを使用した背景アニメーション制作サービスを開始しました。近年、大手企業や高級ブランドのWebサイトでは、背景に動きのあるアニメーションが採用されるケースが増えています。静止したサイトと比較すると、訪問者の印象に残りやすく、サイト全体の世界観を演出できるのが特徴です。こんな演出が可能です・光の粒子が漂うパーティクル演出・星空や宇宙空間の表現・幻想的な浮遊エフェクト・マウス操作に反応するインタラクティブ演出・波紋や流体表現・スクロールと連動するアニメーションこんな方におすすめ・企業サイトを他社と差別化したい・サービスサイトに高級感を出したい・ポートフォリオサイトを魅力的にしたい・LPの滞在時間を向上させたいThree.jsとは？Three.jsは、Webブラウザ上で3D表現やアニメーションを実現するJavaScriptライブラリです。アプリのインストール不要で、PCやスマートフォンから閲覧できます。制作実績現在はパーティクルアニメーションや背景演出を中心に制作しております。今後も様々な作品を公開していく予定です。背景に動きを加えるだけで、サイトの印象は大きく変わります。「こんな演出ができるかな？」というご相談も歓迎しております。お気軽にお問い合わせください！

ココナラでビデオチャット相談やオンライン対応をしていると、お客様へ予約可能な日時を案内する場面がよくあります。たとえば、「〇日は10:00〜12:00、13:00〜16:00が空いています」「この週の空き枠は以下の通りです」といった案内を、予約管理画面を見ながら毎回手入力するのは意外と手間がかかります。そこで今回は、ココナラの予約管理ページに表示されている予約受付枠を、1クリックで文章に変換してコピーできる仕組みを作りました。できることこの機能を設定しておくと、ココナラの予約管理カレンダーを開いた状態で、Chromeのブックマークバーにある専用ボタンをクリックするだけで、表示中の予約受付枠を文字情報としてコピーできます。出力される文章は、たとえば次のような形式です。6/7(日) 空き無し6/8(月) 10:00〜12:00 13:00〜16:006/9(火) 13:00〜16:006/10(水) 13:00〜16:006/11(木) 10:00〜12:00 13:00〜16:006/12(金) 10:00〜12:00 13:00〜16:006/13(土) 空き無しコピーされた内容は、そのままココナラのメッセージ欄に貼り付けて、お客様への案内文として使えます。使い方の流れ使い方は大きく分けると、次のような流れです。まず、Google Chromeのブックマークバーに専用のボタンを登録します。登録後は、ココナラの予約管理ページを開き、ブックマークバーの「予約枠コピー」をクリックします。すると、画面に表示されている予約受付枠が自動で読み取られ、日付ごとの空き時間として整理されます。整

みなさんこんにちは。nikoniko 21です。本日は私の最近のお気に入りについてお話したいと思います。私は手芸にはまって、カラフルな色の世界に魅了されました。そして、これまで興味があまりなかった花にも興味を持つようになりました。周りを見るときれいな花がたくさん植えてあって、これもまたカラフルできれいな世界と思えました。そして、花モチーフのビーズのアクセサリーもよく作るようになりました。ダリア風のビーズの指輪つくり方が少々複雑な花のビーズブレスレットそして、サムネイルの花のビーズブレスレット。花の知識にそんなに詳しくなくてなにがなんという花なのかわからないことが多いですが色がきれいと思う花を見ると癒されます。また、人が作った色よりも自然の色のほうがきれいなのかもしれないと少し思いました。これからもいろいろなきれいな色の花を見て癒されて、手芸やITデザインの参考にもしたいと思います。

Three.jsとShaderを使って、 “生きているような” 現代風ポートフォリオサイトを制作しました。 ・Shader演出 ・GLBモデル表示 ・粒子エフェクト ・マウス追従 ・立体カードUI などを組み合わせています。 AI映像、ショート動画、ロゴアニメーション、 WebGL演出なども制作しています。 ━━━━━━━━━━━━━━━ 【制作内容】 ・YouTube Shorts ・VTuber向け演出 ・ロゴアニメーション ・MV風映像 ・Three.js / Shader演出 ・ポートフォリオ制作

みなさん、こんにちは（ちょっと遅いか）。nikoniko 21です。本日は少し遅い時間に失礼します。今回は昔の概念と今の概念について書いていきたいと思います。私は学生時代は勉強があまり好きではありませんでした。テストで悪い点をとるのが嫌で、小学生の頃はテストの日が近づいてからいやいや勉強をして、中学・高校・大学ではいやいやでもちゃんと毎日少しずつ勉強してまあまあな点をとっていたといったところです。それ以外はとにかく趣味とか遊びに時間を使ってました。しかし、今は違います。好きでプログラミングの勉強を自発的にしています。HTML・CSSやJavascriptやPHP...そういった言語やIT関連の用語を自発的に覚えてプログラミングの仕方やITの世界がわかるようにしています。ココナラの仕事のためでもありますが、好きでやってもいます。子供の頃と違って大人になってこんなにも勉強が楽しくなるとはと思います。勉強は楽しくない、仕事は面倒くさいもの...。大人になったら勉強は楽しい、仕事は真面目にやるもの。大人になるとここまで変わるものなんですね。本当にすごいです。本日のブログはここまでです。最後まで読んでくださってありがとうございました。

「一生懸命書いた解説記事なのに、最後まで読んでもらえない」「専門用語を並べれば並べるほど、読者が離れていく」。情報を発信する側であれば、誰もが一度は抱く悩みではないでしょうか。 2026年4月22日、私は大きな壁にぶつかっていました。これまで「言葉」で説明することに心血を注いできましたが、読者の脳に情報が届くスピードが、発信のスピードに追いついていないことを痛感したのです。この日私が行ったのは、単なる資料作成ではありません。AIを活用し、複雑なロジックを「一瞬で理解できる形」へ変換する、情報の再定義です。 -------------------------------------------------------------------------------- 1. 【状況説明】「読まれない」という静かな危機 この日、私は二つの重要なプロジェクトを抱えていました。 一つ目は、「コンテンツの視認性向上プロジェクト」です。日々発信している技術的な知見や作業ログ。これらは価値がある情報だと自負していましたが、データを見ると「離脱率」という冷酷な数字が突きつけられていました。文章主体では、現代の忙しい読者にとって「理解コスト」が高すぎたのです。 二つ目は、「プログラミング初学者のための教育資料作成」です。ターゲットは、技術学生やコードを書き始めたばかりの初心者。彼らにとって、JavaScriptの「制御構造」や「乱数」といった概念は、目に見えない呪文のようなものです。 「文字だけで説明するのは、目隠しをして迷路を案内するようなものだ」。そう気づいた瞬間から、私の「図解化」という名の

今日はJavaScriptの「非同期処理」について学習しました。これまでは、上から順番に処理が実行される「同期処理」が基本だと考えていましたが、setTimeoutを使うことで、処理の実行タイミングが変わることを知りました。今回のコードでは、「処理1 → 処理2 → 処理3」と順番に実行されたあと、setTimeoutで設定した処理4は2秒後に実行されます。その間も処理は止まらず、「処理5 → 処理6」と続いて実行されるため、実際の実行順は、処理1処理2処理3処理5処理6（2秒後）処理4という流れになりました。setTimeoutは処理を一度保留しておき、指定した時間が経過したあとに実行される仕組みになっているため、このような順番になります。この仕組みを理解することで、時間差のある動きや表示の制御などができるようになると感じました。少しずつですが、できることが広がってきている実感があります✨処理１が隠れてますが処理２の上にあります！