すべてのカテゴリ

来週に初のサービスを出品する予定です。たぶんです。(笑)サービスは、「マルチメディア デザイン ブック」です。サービスのタイトルは未定です。ブックのサンプルを制作中ですが、今回は、ブックの概要的な説明です。＼ページめくり／本物の本のようなページめくりができるため、本物の本のような読書体験を閲覧者に提供できます。＼マルチメディア／文章、画像、写真、フォトギャラリー、動画、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

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()]

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

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プログラミングの副業に活用

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))

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

こんにちは、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は、付けたら便利ですが、絶対付けなくてもいいという感じです。ご覧いただきありがとうございます。これが私が出品しているサービスです。ご覧ください！！さっき言ったホームページ制作もやっています。

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

## 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部分を上のスクリプトに変えるだけ!これで提案ページでそのブックマークを押すと定型文が挿入されるようになります :)もしかして自分が分かってないだけで最初から出来たりするのかな・・・？

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

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()

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

## 開発環境+ 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を使ったらいいのではないかと思っています。

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

みなさんおはようございます。nikoniko 21です。今回は、私の記事を見てくださってありがとうございます。今回は、私のプログラミング用語を覚えるための暗記術について紹介したいと思います。私はプログラミングの勉強をはじめてけっこう経ちますが、たまに用語を忘れてしまったりします。従いまして、そういった用語を覚えなおすために暗記帳を作って持ち歩いています。そして、暗記帳を書く方法も工夫しています。一冊のノートの前半のページ数はHTML・CSSの用語を書くのに使って、後半のページ数はJavascriptの用語を書くのに使っています。そうすればノートの中を整理することができて、3種類の用語の勉強ができます。また、勉強が楽しくなるようにノートは以前もカバー画像にした星座の魔法陣の表紙のノートを使って、覚える用語の詳しい解説は好きな紫色のペンで書いています。その結果、暗記しやすくなって用語も覚えやすくなりました。この情報が少しでも読んでくださってる人の参考になれば嬉しいです。今回の記事はここまでです。読んでくださってありがとうございます。

1. サイトイメージ画像2. 制作概要 制作時期：2024年8月 制作時間：170時間ページ数：12ページ 作業内容：コーディング、クロスブラウザテスト、サーバーアップロード 使用ツール：VScode、Figma 使用言語：HTML、CSS、SCSS、JavaScript、jQuery、WordPress 3. 工夫したポイント(コーディング) WordPressを使用してオリジナルテーマを作成し、コーディングを行いました。 投稿機能では、デフォルトの投稿機能とカスタム投稿機能の両方を活用しています。特に、カスタム投稿機能を使用した社員紹介ページでは、カスタムフィールド機能も組み合わせ、保守管理しやすくなっております。 また、パンくずリストを実装し、ナビゲーション性能を向上させています。一部のページでは、パンくずリストのリンク先や表示されるタイトルをPHPを用いてカスタマイズし、コンテンツの一貫性と利便性を確保しました。 さらに、スムーススクロールやページネーション、ハンバーガーメニューの実装を行うことで、サイト訪問者が快適に操作できるデザインを心がけました。 最後に、パソコンだけでなくスマートフォン（iPhone・Androidの両方）での表示確認を行い、デバイスに応じたレイアウトの崩れがないことを確認しました。

今日はcssの横並びについて、昔はfloatという機能が使われていましたが最近だとdisplay:flexという機能を使うのが主流です、これで単純な横並びから縦並び、逆あって並びなど応用が利くのでそうようお世話になります。

Vue 公式チュートリアル　〜　変数の変化をチェックするVue 公式チュートリアルのステップ 10 は、変数の状態が変わるのをチェックする方法です。Javascript の変数を表示に使う場合、変数が変わったら表示も更新したい場合が多くなります。そういう場合のやり方です。前回までのポイントは？Vue の公式チュートリアルもステップ 10 まで来ました。 何となく Vue で、Web ブラウザに表示させるやり方がわかってきたのではないかと思います。 ステップ９までで、基本的な Vue の部品の書き方がわかって、HTML と Javascript、HTML と CSS、CSS と Javascript の連携のやり方も一部は体験しているので、あとは「回数」を増やして実際に使えるようになる様な練習が必要になってきます。今回のポイントは？ステップ１０では、新しいポイントがいくつかあります。まずは、変更前のサンプルコードを見てみましょう！<script>export default {  data() {    return {      todoId: 1,      todoData: null,    };  },  methods: {    async fetchData() {      this.todoData = null;      const res = await fetch(        `h t t p s://jsonplaceholder.typicode.com/todos/${this.todoId}`      );      this

Vue でボタンをクリックした時の処理Vue 公式チュートリアルのステップ４です。このステップでは、Web ブラウザ上に作成した「ボタン」をクリックした時の処理を学習します。前回までのポイントをもう一度例によって最初は、前回までの復習です。 前回までに、Vue の「部品」を記述するファイル「.vue」は、HTML・CSS・Javascript の記述を書く部分に分かれています。＊　HTML は、「template」のタグの部分に記述します。＊　CSS は、「style」のタグの部分に記述します。＊　Javascript は、「script」のタグの部分に記述します。　Vue では、この三つの部分をうまく連携させて、色々な機能を実現しています。 特に、HTML の部分は、標準の HTML の書き方とは、若干違う部分もあるので、その辺りを意識しながら、Vue 独自の書き方をマスターする必要があります。これまでは、この三つの基本部分を使った例と、簡単な連携を学習してきました。今回学ぶのは？今回は、HTML と Javascript の連携で、新たに「ボタン」を使った事例を学習します。 ボタンをクリックする度にボタンに表示されている数字を１づつ増やして表示をするという機能を実現します。以下のコードが変更を加える前のコードです。<script>export default {  data() {    return {      count: 0,    };  },};</script><template>  <!-- make this bu

Vue の公式チュートリアル（ステップ１）をやってみる！フロントエンドのフレームワークの学習を通して、Web 開発の基本をマスターする実施例として、Vue の公式サイトにあるチュートリアルをやってみるという連載を紹介する事にしました。初めて、Web 開発のプログラミングの学習をされる方是非見てみてください！Vue の公式チュートリアルフロントワークのフレームワークを最初に学習するスタイルで Web 開発に必要なプログラミングを学ぶ実施例として、Vue の公式チュートリアルを使った学習例を紹介してみる事にしました。このチュートリアルは、Vue の公式ベージの一部として紹介されている物です。（日本語版のサイトはサイトはサイトはこちら）日本語のサイトは英語のサイトと同じではないようです。（2022 年 2 月現在） 英語のサイトの公式チュートリアルを見た感じでは、初心者の学習には良さそうなので、これを元に学習する初心者のための記事を少し連載の形で書いてみることにしました。全部で 14 のステップになっていて、一つづつ学習した場合、14 日間で基本をマスターできる事になるので興味のある独学者はやってみると良いと思います。チュートリアルの形式は、画面の右側に、コードを入力できる部分と、その結果を表示する部分が作られていて、一番最初は開発用の PC などに設定する事なく学習できるのも魅力です。まずは、このオンラインでコードを入力しながら学ぶというスタイルでやってみる方法を紹介します。最初の課題は？最初の課題はシンプルに、単純な HTML の記述を Vue の部品として表示させるというシンプ

Javascript と TypescriptWeb 開発では、Javascript は欠かせませんが、最近では Typescript も注目されています。Typescript を勉強しておいた方が良いのか迷う場合も多いと思います。どちらが良いのかを考えてみました！Javascript は必須Web 開発をする場合、バックエンドは別にしてもフロントエンドの Web ブラウザで動作するプログラムは Javascript になります。したがって、フロントエンドに関わる開発では Javascript は必須のプログラミング言語という事になります。そうした、理由もあって Javascript を学習する人はたくさんいますが、最近では企業のある程度の規模の開発では Typescript が使われるケースも増えています。そうなってくると、Typescript を学習しておいても損はなさそうな状況になりつつあります。ところで、Web 開発者を目指してプログラミングを学習する人の場合はどうでしょうか？この連載で既に書いてきたように、「今必要な事に絞って学習する」ことで、学習を効率よく進めて短期間で成果を出すという考え方で言えば、Javascript でプログラミングを書ければ、Typescript はなくても良い事になります。そう考えると、Typescript を初心者が学習するのは後でも良いという事になりそうです。Typescript の正体とは？ところで、Typescript の正体をご存知ですか？ 一言で言うならば、Typescript は Javascript をベースに、変数の型や初

Javascript のプログラムの流れの作り方プログラムで重要なのは、「流れ」という話をしました。今回は、プログラミング言語を Javascript に絞って、どのように流れを作るかを考えてみました。「入口」と「出口」を決めるJavascript のプログラムは、関数（function）を使わなくても記述できます。しかし、関数（function）を意識した方が入口と出口がハッキリしやすいので、関数を意識したコーディングをすることをお勧めします。あとは、関数を呼び出す事で処理をするようなスタイルにします。関数の入口は引数と呼ばれるもので、関数を呼び出す際に一緒にデータを渡すようになっています。 出口は関数が返してくる処理結果です。関数によっては、値を返さないで処理だけを行うこともあります。例えば、Web ページのボタンが押された場合の処理の場合、一連の処理を行なって終了という場合が殆どなので、値を返しません。例としては、ボタンを押したら別の表示に切り替えるという場合、呼び出し元に結果を返す必要がありません。このような関数はボイド（void）型、要は返り値がない関数として定義されます。その場合は、コメントに処理結果などを描いておくと、開発後や開発者以外の人がソースコードを見たときに内容の理解の助けになります。これが決まると、最初に関数に渡す物と処理結果が何なのかがハッキリするので、関数が何をするのかの方向が決まります。 あとは、必要な結果を得るための流れをプログラムとして記述すれば良いことになります。流れを作る「構造」は２種類で OKプログラムの基本は「上から下」なので、それ以外

現在自分がやっている「もりけん塾」では駆け出しエンジニアの卵の方達に自分が提供した課題をやってもらっています全てJavaScriptです問題は25問で、最初はDOMを挿入するだけのものが、積み上げていくと入力フォームや、スライダー、テーブル内のソート機能、Promiseを使ってのページ更新など、Webページでは欠かせない機能を一歩ずつ実装していくことができます皆さんもぜひ気になったら教えてください不定期で夜中ではありますが、電話での進路相談のサービスも出品しているので是非悩んでいる方いたらご利用ください

値下げしました！

Javascript の非同期処理Javascript を学習していて分かり難い部分に非同期処理があります。 なぜ、こんな処理をするのかプログラムを勉強したての方には分かり難いし、思ったように動かない部分です。 この記事では、その非同期処理に目を向けてみました。非同期処理とは？非同期処理という言葉自体が余り馴染みのない言葉で、よくわからないというのが多くの方の第一印象だと思います。 簡単に言うと、完全に正確な表現ではありませんが、プログラムを書いた順番で実行されない処理と考えると少し分かりやすくなります。非同期の処理に対する言葉は同期処理と言いますが、これは基本的に上から順番に実行される処理です。 もちろん、プログラムには、条件で実行する部分を分けたり、繰り返し処理（ループ）などがあるので、完全に書いた順番で実行されるわけではありませんが、基本的には、処理の流れはプログラムの上から下へと言う流れで、一つ一つの処理が終わってから次の処理をするようにできているプログラミング言語が多くなっています。ところが、Javascript では、処理が終わる前に次の処理を実行してしまうことが多く、この辺りが初心者の方には分かり難い部分になっています。この記事で紹介している、Firebase のデータベースのアクセスなども非同期の処理の代表格です。処理には時間がかかる！非同期の処理を行う一番の理由は、「処理には時間がかかる」からです。 当たり前の様ですが、これが非同期の処理を取り入れている大きな理由です。 特にデータを読み込んだりするのには、時間がかかります。データをどこから読むかと言うと、いろ

以前に書いた記事のネタ元になったアプリの話です。機密情報に当たる部分もございますので、詳細は伏せますが、ある特殊染料を扱うクライアント様からのご相談で、染料調合割合を計算するためのカラーサンプラーアプリを制作した時の話です。なお、本記事はQiitaで公開した記事の要約版と補足となります。要件定義要望は概ね以下の通りでした。 1.タブレットでの使用を前提2.ＣＭＹそれぞれの濃度１００％時の色成分初期値（ＲＧＢ）を変更したい 3.３色間の調合割合ごとの混色結果を一括で確認したい 4.タップした部分の各色調合割合を表示したい問題点や要望を踏まえ、要件定義を行ない、ＵＩ及びＵＸに関するプロトタイプの仕様をまとめました。以下は関連部分の抜粋です。 1.タイル状のカラーブロックを濃度１０％刻み固定でピラミッド状に並べる（カラーテーブル） 2.問題点の補完用として直線状に並べたカラーブロックを別に用意する 3.スライダーにて各色個別の割合調整、全体の濃度調整を行う 4.カラーブロックをクリックで調合割合を表示する ※実際のアプリでは、monacaとOnsen UIで構築しました。なお、プライベートアプリのため一般公開はしていません。技術的な話1-カラーブロックの集合体、カラーテーブル生成 ベースのロジックは以前の記事を参照いただければと思いますが、今回は自動生成部分をアプリ用にクラスにしたものをそのまま使用しています。簡単に説明すると、カラーブロックを直線状に並べるクラスと、それを拡張してピラミッド状に並べるクラスになります。 上記のインスタンスはＣＭＹ各色ブロック、クリックイベントを設定

こんにちは、taxintianです。これまで会社員として普通に働いていましたが、フリーランスとして自分の力で稼ぐことに挑戦しています。今はまだ案件を取れていませんが、ココナラで「HTML / CSS / JavaScript を使ったWebサイトの修正・調整」サービスを出品する準備を進めています。〇なぜココナラに挑戦するのかWeb制作スキルは独学で1ヶ月半ほどですが、少しずつ作品を作って公開してきました。まだ経験は浅いですが、初心者だからこそ、同じように悩む方の力になれることもあると思っています。「文字の位置を少し変えたい」「デザインが崩れているのを直したい」「ちょっとした動きを追加したい」こういった小さな修正や相談に応えられるサービスを提供したいです。〇出品準備でやったこと1.サービスページの文章を作成2.料金や納期、オプションの設定3.自分のポートフォリオ（GitHub公開ページ）を整理4.サービス内容にポートフォリオリンクを追加出品する前に、これらを整えるだけで、信頼感や安心感が大きく変わると思ってます。〇これからの目標・初案件獲得を目指す・依頼者とのコミュニケーションを丁寧に行う・小さな修正から経験を積み、徐々に大きな案件にも挑戦する初心者の僕でも、少しずつステップを踏めば案件は獲得できると信じています。最後にもしこれからココナラで出品を考えている方がいたら、「まだ案件は取れていないけど、挑戦中」という視点で文章を書くだけでも共感されやすいです。まずは小さな挑戦から、一歩ずつ進めていきましょう。

今回は、GSAPを使ってカフェ風デザインのWebサイトをコーディングする様子をまとめた解説動画を作成しました。実際のサイト制作を想定して、デザインからアニメーション実装までの流れをそのまま収録しています。動画では以下のような内容を扱っています。・ファーストビューのフェードイン演出・スクロールに合わせた要素のアニメーション・カフェらしいやわらかい動きの作り方・GSAPの基本的な書き方と考え方・シンプルだけど見栄えのする実装テクニック「アニメーションを入れたいけど難しそう」と感じている方でも、そのまま真似できる形でコードを組んでいますので、初心者の方にもおすすめの内容になっています。ポートフォリオ制作や、実案件を想定したサイト制作の練習にも使える構成です。Webサイトに少し動きを加えるだけで、印象やクオリティは大きく変わります。ココナラのブログでは、・どんな構成で作ったのか・どんなポイントを意識してアニメーションを組んだのかもあわせて解説しています。GSAPに触れてみたい方、カフェ風デザインのサイトを作ってみたい方、サイトの表現力を一段上げたい方は、ぜひ動画を参考にしてみてください。

Three.jsを使って、3D食品モデルが 「下から順番に盛り付けられて完成する」 アニメーション演出を実装しました。 今回のサンプルは、パフェを題材にした ・グラス ・アイス ・ホイップ ・ソース ・フルーツ といった複数のGLBモデルを、 時間差で自然に積み上げていく演出です。 ▼ 実装のポイント ・GLB形式の3Dモデルに対応 ・具材ごとに「出現位置」「最終位置」「動きの速さ」を個別に調整可能 ・下から積む／横から乗せる／上から垂らすなど演出を変更可能 ・Web（Three.js）上でそのまま再生可能 特に「食品サンプル系3D」は、 静止画だけだと魅力が伝わりづらいですが、 完成していく過程をアニメーションで見せることで、 より“美味しそう”“目を引く”表現が可能になります。 ▼ こんな用途におすすめ ・WebサイトやLPのキービジュアル ・ECサイトの商品演出 ・デジタルメニュー／サイネージ ・SNS・動画広告用の3D演出 ・NFT／3D素材販売用デモ動画 現在、 ・お手持ちのGLBモデルを使ったアニメーション実装 ・3D食品モデル＋盛り付け演出のセット制作 どちらも対応可能です。 「こんな動きはできる？」「この料理でも可能？」 など、相談ベースでもお気軽にご連絡ください。

アニメーションやフォーム周りなど、「どこまでJavaScriptで実現できるか」の境界線が見えず、不安になるデザイナーさんは多いはずです。この境界線があいまいだと、見積もりのブレや後からの仕様変更につながります。この記事では、JavaScriptの「できること・できないこと」の境界線をわかりやすくお話しします。クライアントとの打ち合わせで、「これは画面内でできる範囲なので大丈夫です」と自信を持って言えるようになるための、やさしい入門ガイドです。1. クライアント打ち合わせで“答えられない焦り”が起きる理由（１）「これ実装できますよね？」と突然ふられる瞬間クライアントとの打ち合わせ中、何気ない流れで「ユーザーがスクロールしたら商品がふわっと出てくる感じ、できますか？」と聞かれたことありませんか？頭では「アニメーションだからJSなのかな？」と思いつつ、確信が持てず笑顔でごまかす—このシーン、デザイナーさんからよく聞きます。その場で返せないと、「技術に弱いと思われたらどうしよう…」と不安が一気に膨らんでしまうんですよね。（２）判断できないのは“スキル不足”ではなく“情報構造を知らないだけ”多くのデザイナーさんは「自分が勉強不足なんだ」と思い込みがちですが、実際にはそうではありません。そもそも JavaScript が どこで動いているのか（ブラウザなのかサーバーなのか）という前提が説明されないまま、いきなり “JSでできる／できない” を判断しろと言われても無理があります。技術を知らないのではなく、「地図を渡されていない」状態なんです。（３）デザイナーとコーダーの“イメージのズレ”は

【概要】コンセプト「ある数値より大きい素数を、昇順に出力して欲しい」使用ツール・HTML・CSS・Javascript【コード構造】 1.変数K、Nの取得 2.変数の補正 3.エラトステネスの篩 4.K以上の素数をN個見つけるまで、篩にかけ続ける 5.答えを出力する 今回のテーマは、「K以上の素数をN個見たい」です。ここでNは自然数。大きくなりすぎると表示画面が見にくくなるので、1以上100以下で制限をかけています。エラトステネスの篩にかけ素数を探索しながら、今調べている素数がK以上ならば素数列Primeに保存しておきます。Primeの長さがNに達した時点で、篩の処理を終了します。あとは出力。素数1つごとに出力して表示できるように、HTML文で答えを送っています。【使用例】【今後の改善点】装飾をほとんどしておらず、現在は殺風景です。今後HTML・CSSを勉強して、デザインを施そうと思います。