Laravel 6x AWS Cloud9 環境構築

Laravelアプリ作成の流れ 今回はLaravel 6.x を使用 環境構築 AWS Cloud9を使用する。 無料枠であれば以下の様にすると良い。 Laravelインストール インストール # phpの設定を行う(yesかnoが表示されたら基本yes) sudo amazon-linux-extras install php7.2=…

AWSのLarave環境構築(Laraveアップロードの土台作りまで)

Laravel開発環境構築 VPC設定 vpc作成 パブリックサブネットとプライベートサブネットを作成 EC2設定 EC2インスタンス作成 EC2へSSH接続 sudo yum update -yでyumを最新状態にする sudo yum -y install httpdでアパッチをインストール sudo systemctl start …

Javascriptでタグの属性(classやstyle)を指定して削除する方法

方法 参考にした記事 https://www.javadrive.jp/javascript/dom/index3.html https://www.javadrive.jp/javascript/dom/index18.html https://www.tam-tam.co.jp/tipsnote/javascript/post601.html Jqueryの場合 $(function() { $("span").removeAttr("style…

Topに戻るボタン実装

実装に至るまでに参考にしたサイト @mediaについて 参考記事print, screen スマホのhover有効について 参考記事 hoverの画像切り替え 参考記事 注意点 overflow:hidden がついていると重ねた画像が乱れた。 overflow:hidden を外すと戻った。 スムーズスクロ…

ディレクトリの所有者の権限の変更方法

sudo chown <変更したい所有者名> <変更したいディレクトリ名> でOK 参考サイト

AWSのLarave環境構築(Laraveアップロードの土台作りまで)

Laravel開発環境構築 VPC設定 vpc作成 パブリックサブネットとプライベートサブネットを作成 EC2設定 EC2インスタンス作成 EC2へSSH接続 sudo yum update -yでyumを最新状態にする sudo yum -y install httpdでアパッチをインストール sudo systemctl start …

SSH接続と公開鍵認証について

SSH接続 公開鍵認証とは ユーザー名とパスワードでの認証と比べセキュリティが高い 秘密鍵と公開鍵を用いた暗号方式 公開鍵はサーバーが保有する。そして、秘密鍵を保有しているユーザーだけがログイン出来る。 仕組み 大きく3つの概念がある 公開鍵 : 誰で…

英語学習方法

とても参考になる。 これに合わせてNews in levelsを https://brighture.jp/b-blog/1719

仕事の出来る様になる人

1番最初に、質を問わず自分の意見を言える人 https://r.voicy.jp/jLaVkXeKyJg ボイシー良い

MAMPが起動できない

解決 参考記事 mysqlのポート3306が使用されていた。 3307に変更したら使える様になった。

Git管理の仕方

基本的な流れ masterブランチからclone 又はブランチを切る。 自身のローカル環境にてcloneしたブランチをdevelopと名前をつける(ここの名前は任意で変更可能) さらに2のdevelopブランチを作業ブランチ用の名前に変更しブランチを切る(例:feature/update_…

Bitwardenの設定〜パスワード管理ツール〜

Bitwarden パスワード管理ツール:基本無料 とても便利だった。 参考サイト 上記サイトで設定も簡単。

sublime text 画面分割とDiffy

sublime text 分割 Macの場合 ⌘ + option / alt + 2 //1なら1分割、3なら3分割 分割して右クリック Diffy で比較可能 ※⌘を押しながらファイルを2つクリックした場合は分割ではなく、複数表示の為、Diffyが機能しない様子

ターミナル操作時のファイル権限について

パーミッション関係のエラー対策 参考記事chmod 参考記事エラー出たら権限みよう 権限の変更は chmod モード 対象ファイル名orディレクトリ名 例) chmod 744 hoge_dir ls -alをするとファイルの権限を見る事が出来る。 ls -al drwxr-xr-x 5 root staff 160 …

SEOについて

SEO調査結果(その1) 参考:【必見】2022年のSEO対策を発表します 2022年に注目されている項目4点 1.ドメインパワー 被リンクがついているか 取引先、関連企業からのリンク 2.E-A-T(専門性、権威性、信頼性:それぞれの頭文字をとっている) サイト単位…

zshrcについて

隠しファイル.zshrcについての説明 参考記事 zshrcとは zshrcに限らず、bashrc、vimrc等のrcは「Run Command」の略。 つまり、zshrcは「zshを実行するためのコマンド」といった意味 .zshrcファイルを見るとexportという記述がある。 「export」は「環境変数…

anyenv(バージョンマネージャー)のインストール

インストール手順 参考サイト $ git clone https://github.com/anyenv/anyenv ~/.anyenv $ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc # シェルを再起動 $ exec $SHELL -l anyenv install --init これを実行すると Manifest directory doesn…

パスワード管理ツール

パスワード管理ツール検討 bitwarden 説明サイト Sticky Password 説明サイト 使いながら検討してみる。

便利なメモアプリ 〜Sublime text~

日々のメモ書き用にインストール 日本語化には設定が必要 参考にしたサイト ファイル拡張子一括変更 プラグインの有効・無効Sublime%20Text%203%E3%81%AE,Command%20Palette%EF%BC%89%20%5D%20%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%80%82&text=…

やりたいこと 1つのformタグから複数画像をアップロード myprofileEdit.ejs <form action="/myprofile_img" method="post" enctype="multipart/form-data"> プロフィール写真の変更<input type="file" name="account_img"><br> 店舗詳細写真の変更 <input type="file" name="shop_img"><br> 店舗画像1<input type="file" name="img1"><br> 店舗画像2</form>

Node.jsの更新による複数画像の投稿について詰まったところ

今回は既にinsert済みのshopテーブルにてnullで指定していた画像を投稿するカラムの更新について詰まった点を記述する 使用コードは2点 formタグを使用してpost処理を実行する myprofileEdit.ejs postを受け取りupdate文を実行する myprofile_img.js コード…

Node.jsのpostとgetで詰まったところ

やりたいこと トップページ(top.ejs)内の検索ボックス(inputタグ)に入力した値を使用して検索をかける。 検索ワードを含む記事をデータベースから取得し一覧(d_search.ejs)で表示させる。 試したこと 一覧を表示させるために d_search.jsを用意 このファ…

Vue.js 連絡先追加フォームのfirebase連携

以下でフロントを実装した連絡先フォームをfirebaseと連携する kirikko-scondcube.hatenablog.com firebaseセットアップ firebaseコンソールからプロジェクトの追加を選択。 必要事項を選択し、プロジェクトを作成後、webアプリを選択で上記画面が出る。 こ…

Vue js Vuexの使い方とvuexを使用した連絡先追加フォームの作成

Vue cli をインストールする際にデフォルトではなくカスタムを選択し、Vuexを選択すると使える。 storeフォルダのindex.jsのファイルを記述していくことで使う ステイト、ミューテーション、アクション、ゲッターの機能がある デフォルトのコードは以下 src/…

Vue js Vuetify導入について

Vue cliでプロジェクトをcreateする方法はこちら参照 https://qiita.com/H-Toshi/items/2dbd9f72d28815a67924 作成したプロジェクト内で ターミナルを開き $ vue add vuetify でプロジェクトを作成可能 インストールすると作成したフォルダが書き換えられる…

Vue js router-view , router-linkについて

過去記事の続きです。 kirikko-scondcube.hatenablog.com kirikko-scondcube.hatenablog.com 今回最初に操作するのは src/App.vue App.vue <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template> <style lang="scss"> #ap…

Vue js SPAとRouterについて

この記事は前回の記事の続きです。 kirikko-scondcube.hatenablog.com SPAの特徴 SPAはページの描画は一度(初回アクセスが重くなることがある)。 軽快に動作するアプリケーションが作れる。 Vue Routerの機能 ページごとの画面の切り替えをする機能 確認す…

Vue CLI のcreateしたファイルについて

Vue CLIでcreateしたファイルの主なフォルダの役割について インストールしたファイルの階層 メモ 画面で表示される。ファイルはpublicフォルダに入れる。 大事なのはpublic/index.html 内の<div id='app'><div> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </meta></meta></head></html></div></div>

Vue js component 親コンポーネント から子コンポーネント へデータの渡し方(props , slot)

参考動画 https://www.youtube.com/watch?v=uNR_WKLFh48&list=PLkQpCfbvj0lwds9oPsRRrFp1ZxTGyueqv&index=14 メモ propsはdataを扱うのと似た感じで使える slotを使うとタグの間に文字が入れられて視認性が良い <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume…</meta></meta></head></html>

Vue js componentのグローバルな書き方とローカルな書き方

グローバルは過去記事の記載方法 kirikko-scondcube.hatenablog.com kirikko-scondcube.hatenablog.com kirikko-scondcube.hatenablog.com 簡単に言うと Vue.component(第一引数, 第二引数) で宣言し、使用するもの しかしこの場合常にコンポーネントの読み…