JavaScript

Bootstrap4のNavbarをモバイル対応

ポートフォリオサイトのはNavbarにモバイル対応をした時に 意外と手こずったので備忘録として残します。Shuichi's portfolioモバイル画面で画面が崩れる場合にItemをドロップダウン表示するボタンを追加しました。.navbar-toggler-icon アイコン表示 .data-t…

ポートフォリオサイトをFirebaseで公開

Vue CLIを開発したポートフォリオサイトですが 問い合わせページを除き一通り作成しました。これまで作成したページにつきましてFirebaseで公開しました。 Shuichi's portfolioまだ問い合わせページができていないので これから作成して更新します。技術的な…

Vue CLI3のプロジェクトをFirebaseで公開するまでにやったこと

Vue CLIを開発したプロジェクトをFirebaseで公開するために以下のことを行いました。これからVue.jsをやってみたい人の 学習の手助けになれば幸いです。手順は難しいものでなく 公式サイトで紹介されている手順通りにやれば大丈夫でした。 やったこと Fireba…

Vue CLI3のプロジェクトにportfolioのページを作る

前回の続きです。これからVue.jsをやってみたい人の 学習の手助けになれば幸いです。簡単ですが ポートフォリオサイトをAboutページを作成してみました。components/About.vue <template> <div class="about"> <h1 class="title">自己紹介</h1> <div class="container"> <div class="row"> <div class="col-sm-4"> <img src="../assets/about.jpg" width="300px" alt=""> </div> </div></div></div></template>

Vue CLI3のプロジェクトにBootstrapのJumbotronのページを作る

前回の続きです。これからVue.jsをやってみたい人の 学習の手助けになれば幸いです。現在ポートフォリオサイトを制作中です。そのトップページを見栄え良く見せるために BootstrapのJumbtronを使ってみました。components/Home.vue <template> <div class="jumbotron jumbotron-fluid bg-info"> <div class="container"> <h1 class="display-4">Welcome to My portfol</h1></div></div></template>…

Vue CLI3のプロジェクトにBootstrapのNavbarを作成する

前回の続きです。hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の手助けになれば幸いです。現在ポートフォリオサイトを制作中です。 これらの画面上部に表示するナビゲーションバーを作成しました。 スタイルはBootstrapを利用しました。 …

Vue Router Not Foundページを作成

前回の続きです。 hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の手助けになれば幸いです。今日からポートフォリオサイトを制作しております。前回Vue Routerでルーティングを追加しましたが URLがマッチしない場合のNot Foundページも作…

Vue Router ルーティングを追加

前回の続きです。 hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の手助けになれば幸いです。今日からポートフォリオサイトを制作しております。今回はこれまで作成したプロジェクトに対し Vue Routerでルーティングを追加しました。 ペー…

Vue Router URLに含まれる#(シャープ)を取り除く

前回の続きです。 hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の手助けになれば幸いです。 URLに#(シャープ)が含まれる Home, Aboutページ表示するとURLに#(シャープ)が含まれていました。 http://localhost:8080/#/ http://localhost:8…

Vue.jsの画面でリロード時, sockjs-node infoが失敗

前回の続きです。 hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の手助けになれば幸いです。 sockjs-node/infoが失敗 画面をリロードすると以下の非同期通信が繰り返されるようになりました。chrome Devtool 画面のHome, Aboutのリンクク…

Vue CLI 3で作成したプロジェクトにVue Routerを追加する

Vue CLI3で作成したプロジェクトにGUI画面でVue Routerを追加しました。 前回GUI画面でプロシェクトを表示させた続きです。 hiramatch.hatenablog.comこれからVue.jsをやってみたい人の 学習の足がかりになれば幸いです。 vue ui GUI画面を起動 vue ui Star…

Vue CLI 3で作成したプロジェクトをGUI画面に表示させる

Vue CLI3 で作成したプロジェクトにVue Routerを追加することが Vue CLIのGUIの操作だけでできました。今回は前段階としてGUI画面で表示させたところまでを書きます。 vue ui cli.vuejs.orgこれからVue.jsをやってみたい人の 学習の足がかりになれば幸いです…

Vue CLI 3で作成したプロジェクトにBootstrapを導入する

Bootstrapの公式サイトを参考に 前回Vue CLI3で作成したプロジェクトにBootstrapを導入しました。Vue CLI 3でプロジェクト作成 - hiramatch's blogこれからVue.jsをやってみたい人の 学習の足がかりになれば幸いです。 Package managers 参考 https://getboo…

Vue.jsで簡単なHello worldの画面を作る

以前Vue.jsを用いたフロントエンドのでの開発をやらせていただいた経験があります。ここ最近サーバサイド関連が多くしばらく触っていなかったのですが 復習のため再度学習を始めました。その第一歩として Vue CLI3のの公式サイトを参考に Vue.jsでHello worl…

JavaScriptの復習

今日は以前習ったJavaScriptの配列, オブジェクト, for文の復習をやっていました。 毎日jQueryばかりやっていたので気分転換になるし、それにプログラム言語というのは覚えるだけでなく、何度か反復し自然に使いこなせることが大事だと考えています。 以下は …

jQuery ボックスのエフェクト

今日はドットインストールコムのjQuery入門 #12 エフェクトの動画を見た後 自分でプログラムを作ってみました。サンプルそのままだと表示後すぐ消えて確認しにくいので setTimeout関数で1秒後に消える様にしました。 <html lang='ja'> <head> <meta charset='utf-8'> <title>#12 エフェクト</title> </head> <body> <div id="test" style="width:150px; height:50px; background:orange"> </div></body></html>

jQueryのフィルターを使った簡単なプログラム

最近お世話になっているドットインストールでjQueryを学習しています。 今日学んだフィルターを使った簡単なプログラムを作ってみました。以下はフィルタで対象となった要素の文字色を変えるものです。 <html lang="ja"> <head> <meta charset="utf-8"> <title>フィルタ</title> </head> <body> <p>aaaaaa</p> <ul id="sub"> <li>3-0</li> <li>3-1 <ul> <li class="item">3-1-1</li> <li>3-1-2</li> </ul></li></ul></body></html>

JavaScriptで要素追加、削除

数ヶ月間ブログを放置してしまいましたが、ひさしぶりに再開しました。現在はjavaScript, jQueryをやっています。 iOSはこの後やりたいと考えています。javaScriptで簡単なプログラム作ってみました。 ボタンで要素を追加, 削除, フォントカラーを変えるもの…