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 CLI 3でプロジェクト作成

Vue CLI3のの公式サイトを参考に Vue.jsのプロジェクトを新規作成してみました。Vue CLI 公式サイト Vue CLI 3これからVue.jsをやってみたい人の 学習の足がかりになれば幸いです。 Creating a Project vue create vue create コマンド vue create hello-wor…

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

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

外部引数名

現在ドットインストールの「Swift入門」 でSwif勉強中です。その中で「外部引数名」についての説明があったので その理解を含めるべくplaygroundで簡単なプログラムを作ってみました。「外部引数名」とは関数呼び出し時、引数にどんな値を渡すかをわかるよう…

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の勉強をしました。 今日のテーマは属性セレクタといわれるもので 「要素のxxxx属性がyyyyのもの」など属性で対象を指定するセレクタになります。 <html lang="ja"> <head> <meta charset="utf-8"> <title>属性セレクタ addClass</title> </head> <body> <Style> .myClass { font-size:20px; background</style></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で簡単なプログラム作ってみました。 ボタンで要素を追加, 削除, フォントカラーを変えるもの…

CGAffineTransformによる回転・拡大/縮小

ずいぶん久しぶりの投稿になりましたが 今回は部品の回転や拡大についての覚え書きです。UIViewおよびその継承クラスのtransformプロパティに対しCGAffineTransXXXを指定します。 回転させる場合はCGAffineTransMakeRocation ※ここで指定する角度の単位は「…

AutoLayoutを使わずに画面中央に図形表示

今日はAutoLayoutを使わずに画面中央での図形表示に挑戦してみました。 iOSデバイスには様々な画面サイズがありますがその画面サイズを UIScreenクラスで画面サイズを取得し、その中心に円を表示させています。 また縦横の中央線も入れてみました。 (今回は…

SwiftでTableViewのデリゲート

今日はTableViewでのデリゲートの方法です。iPhoneアプリでTableViewを実現する為には 「行数を返す」や「セクション数を返す」「セルを返す」といったデリゲートメソッドをViewControllerにデリゲートする必要があります。※「デリゲート」とは「委譲」を意…

SwiftでAutoLayoutに挑戦(multiplier)

過去にSwiftでAutoLayoutを実現する記事を書いたのですがSwiftでAutoLayoutに挑戦 - iOSアプリ挑戦日記hiramatch.hatenablog.comその中でよく分かっていなかったNSLayoutConstraintのイニシャライザに指定するmultipilierについての覚え書きです。このmultip…

テキスト入力するキーボードを非表示

今回はテキストフィールド編集時に表示されるキーボードを非表示にする方法の覚え書きです。改行ボタンを押下したタイミングでキーボードを非表示にする為に①ViewControllerにてテキストフィールドデリゲートプロトコルを指定 ②テキストフィールドのデリゲー…

文字列検索と置換

今日は文字列の検索、置換にはまっていましたのでその覚え書きです。SwiftではString→NSStringに変換してからNSStringとして編集するのが一般的な様です。 (認識違いでしたらすみません )

ImageViewの表示モード(Scele to Fill, Aspect Fitなど)を試してみる

今日はImgeViewの表示モードを変えた時、画像がどう変わるか確認してみました。 以下は確認に使った画像です。 (以前iPhoneで撮影したものでサイズは3264 x 2468です。)以下は上記の画像をサイズ200 x 200の正方形のImagViewで表示させたもので それぞれの表…

SizeクラスでiPhoneの縦横別でレイアウトの異なる画面を作る

今回はXcodeのSizeクラスでiPhoneの縦横別でレイアウトが異なる画面を作ってみました。 SizeクラスとはXcodeの機能で画面サイズ、画面の縦横別に画面のデザインを対応できるもので以下の画面のチェックボックスをONになっていると利用可能です(デフォルトはO…

タッチイベントを受け取り処理を行うUIViewのサブクラスを作成

2週間ぶりの投稿ですみません。今回はタッチイベントを受け取り処理を行うUIViewのサブクラスを作成しましたので、その備忘録になります。 UIViewを継承したサブクラスを作成する場合は イニシャライザをオーバーライドする必要があるようです。またUIView…

SwiftでAutoLayoutに挑戦(複数View)

今回もSwiftによるAutoLayoutです。 前回はボタンを画面中央に表示する制約でしたが 今回は複数のUIViewとそれぞれの相対位置を指定する制約に挑戦しました。 以下は実行後のシミュレーター画面です。(iPhone6) 以下は緑のUIViewになります。 ViewController…

SwiftでAutoLayoutに挑戦

今回SwiftでAutoLayoutを実行するプログラムに挑戦しました。 大きな流れとしては ①ボタンの生成 ②AutoresizingMaskをfalseに設定 ③ボタンをviewcontrollerのviewプロパティに追加 ④制約を追加 となっています。②の「AutoresizingMask」についてはまだよくわ…