記事一覧
自分を信じてあげることが大事
失敗をしたとしてもそれを受け入れる足りていない所を努力する努力 ＝ 続ける3日坊主になったとしてもまた始めればいい言い訳並べたくなったらまた始めればいい5分でもいいからまた始めればいい他の人と比べても仕方がない落ち込んだことがあっても大丈夫向き合うことで見えてくることもある先が見えなくなることもあるかもしれないでも、 必ずその先は見えてくる 新しい発見がそこにある嘘でもいいから信じることから始めて
もっとみる
Angular: ポップアップを設置する
ボタンをクリックしてポップアップを表示させる！
コンポーネントの中のHTML
<!-- ボタン --><button (click)="testClose()" style="border-radius:4px; color:#101010;">削除する</button><!-- ポップアップ --><div id="testPopup" class="popup hidden" style=
Angular: タイムスケジュール＆ファイルアップロードを設置する
管理や予約系のアプリにもよく使われてる！
コンポーネントの中のHTML
<div class="container"> <div style="margin-right:10px;"> // ラベル名 <label for="scheduleDate">Schedule Date:</label> // スケジュール <input type="date"
Angular: ボタンクリックで選択状態のままにする！
ユーザーにより直感的でわかりやすくなる！
コンポーネントの中のHTML
<!-- ボタン1の背景色をbutton1Colorにバインド --><button (click)="Button1Color()" [style.background]="button1Color" style="padding:20px 60px; margin:10px;"> Button 1</button><
Angular : ボタンをクリックすると非表示だった内容が表示される
TypescriptとHTMLに記述するコンポーネントの中のHTML
<!-- ボタンのクリックで質問内容の表示状態をトグルする --><button (click)="openQuestion()">Show Question</button><!-- 質問内容を表示する部分 --><div *ngIf="showQuestion"> <p>質問内容がここに表示されます。</p></div>
Angularでいいね♡ボタン！
HTMLとTYPESCRIPT使うコンポーネントを作成
ターミナル入力
ng generate component 作りたいコンポーネントの名前
作ったコンポーネント.component.html
<!-- いいねボタン --><button (click)="likesBtn()">// いいねのハートは適当なのでお好みアイコンを入れてください{{ isLiked ? '❤︎いいねしました
Angular: ライブラリでデータテーブルを設置する
Ngx-DataTableを使おう！HTML
<!-- テーブル --><div class="container"> <ngx-datatable id="ngxDatatable" [rows]="rows" [columnMode]="ColumnMode.force" [footerHeight]="0" [scrollbarH]="true" [scr
Angularで使いたいライブラリ３選
Angular Material / Ngx-DataTable / jQuery
便利なライブラリを設置しよう① ngx-datatableをインストール
ターミナル
npm install @swimlane/ngx-datatable
【Visual Studio Codeの自身のプロジェクトを開く】
src → app → app.module.ts
import { NgxDa
Angularの環境構築
Angularの環境構築の手順について【Node.jsインストール】
インストーラーを起動
「I accept the terms in the License Agreement」
(ライセンスに同意する)にチェックをつける
あとはデフォルトのままで大丈夫
【ターミナル開く】
バージョンを確認：ターミナルにコマンドを入力
node --version → バージョンが表示される →
Elastic IPを解放したら消えたので復元
Cloud Shellを使って復元コマンドを打つ！参考サイト:
cloud shellshellターミナル# 例: aws ec2 allocate-address --domain vpc --address 18.233.238.219# Elastic IPの払い出し$ aws ec2 allocate-address --domain vpc --address 自分の使ってたElast
AWS-EC2のElastic IPアドレスを解放とインスタンス停止方法
12カ月間の無料枠を果たすためにもコチラを気をつけて！
Elastic IP アドレスの関連付けを解除するEC2から左サイドメニューElastic IPを選択。
ElasticIPアドレスにチェックを入れる
アクション▼クリックからElastic IP アドレスの関連付けの解除をクリック
関連付け解除クリック
再びアクション▼クリックからElastic IP アドレスの解放クリック
解
AWS無料枠のEC2でアプリをデプロイ②
ここからは有料となる場合もあるため注意も必要です。あらかじめ調べてから進めても良いかもしれません！正しい知識で無料枠を使っていきましょう！
EC2インスタンスの作成ElasticIP
以上でインスタンスにElastic IPの関連付けが終わり紐付けることが出来ました！お疲れ様でした！次回は、ターミナルを使って実際にSSH通信によるインスタンスへのログインをしていきます。
思わずフェス気分が味わえる作業BGM
■ Inkswel & Colonel Red - Make Me Crazy (Potatohead People Remix)
■ Gaijin Blues - Guardia Castle
■ LESKY & Waywell - Fettucine
■ Inkswel & Colonel Red - Cruel Mistake (Moodorama's Deep Rise Remix)
AWS無料枠のEC2でアプリをデプロイ①
AWS無料枠のEC2サーバーを使って制作したアプリを世界に公開をしよう！※ 予めAWS新規アカウント作成した前提の内容となります。
VPCの作成
サブネットの作成
インターネットゲートウェイ作成
インターネットゲートウェイとVPCの紐付けルートテーブルの作成セキュリティグループの作成次回②は、EC2とElastic IPのセッティングからです。ここからはお金が絡むことなので手順は慎重に！前もって