Nr, Kngw, Tky, Szok

生駒, 横浜, 目黒, 大田, 静岡, 浜松

豚汁 1st


レシピ

材料 分量(3杯分)
サラダ油 少々
豚小間切れ 80g
人参 1/2本
大根 5cm
こんにゃく 使い切り1個
かつお 風味香る 白だし 15ml
味噌 お玉に半分ぐらい
600ml



少し学んだこと

日持ち

  • 人参は、冷蔵(キッチンペーパーで全体を包み、ビニール袋に入れてなるべく立てておく)で2〜4週間
  • 大根は、冷蔵(ラップで全体を包んでなるべく立てておく)で1週間〜10日間

だし巻き卵 1st



レシピ

材料 分量(1〜3人分)
2個
かつお 風味香る 白だし 10ml
5ml
サラダ油 少々


少し学んだこと

巻き方

  • 奥から手前に向かって巻くのが「大阪巻き」(一般的)
  • 手前から奥に向かって巻くのが「京巻き」(京都など一部の地域)

1週間ほどで作ったシンプルなWebサービスを公開しました

f:id:aotree423:20180302213213p:plain

(この記事は2018年3月2日に書かれた記事です)

昨年の12月末に会社を退職しました。

前職では、GeneXusという日本では少々マイナーな自動開発ツールを用いて開発を行っており、広く一般的に使われているプログラミング言語を直接書く(プログラミング)ことが少なかったため、次の仕事に就く前に一通り基礎を学び直しておこうとDotinstallを利用してプログラミングやプログラムを動かすための環境の作り方を勉強していました。

今回、その総まとめとして自動開発ツール、フレームワークを使用しないで0からWebサービスを作って立ち上げてみました。(jQueryやSweet alertなどライブラリは使わせてもらいました!)

 

URL: https://wall.aotree.blue 

 

使用した技術

今回使用した技術をまとめました。

マークアップ言語

  • HTML5
  • CSS3

プログラミング言語

  • JavaScript (フロントエンド)
  • PHP (バックエンド)

プログラミング手法

  • Ajax

ライブラリ/オープンソースディレクトリ

  • Google Fonts (デザイン)
  • Font Awesome (デザイン)
  • SweetAlert (アクション)
  • jQuery (アクション)

データベース

  • MySQL

インフラ

  • AWS RDS (DBサーバー)
  • AWS EC2 (Webサーバー)
  • AWS ELB (ロードバランサー)
  • AWS Route 53 (DNS)
  • AWS Certificate Manager (HTTPS化のためのSSL/TLS証明書発行)

開発スケジュール

思い立ったのが10日前で、実際に手を動かした日数は7日程度です。

1日目: ログイン/サインアップ画面の実装 (元々作っていたログイン機能を流用)

2日目: 付箋貼り付け機能の実装 (元々作っていたTo-do listのロジックを流用)

3日目: デザインの実装

4日目: AWSにてWebサーバー、DBサーバーを作成

5日目: データベース、テーブルの作成

6日目: AWSでのHTTPS化に手こずる

7日目: how to use? ページの作成、デザイン最終調整

wallのUI

f:id:aotree423:20180302212853p:plain

壁に付箋を貼れます。

無料版では1つのウォールに100枚までの付箋を貼れます。

(有料版の実装は、落ち着いたらチャレンジしたいと思っています)

wallの使い方の提案

どのように使っていただくかは自由です。

物理的に離れた場所で仕事をするプロジェクトチームの掲示板、家族の伝言板、個人のアイディアメモ、To-doリスト、好きなものリストなどなど・・

例えばこんな使い方を想定しています。

1.開発プロジェクト

f:id:aotree423:20180302232306p:plain

f:id:aotree423:20180302232302p:plain

2.アイディアメモ

f:id:aotree423:20180302232259p:plain

良い使い方が見つかったら、是非「評価とレビュー」のウォールに書き込んでください。

評価とレビュー

wall name: wall@review-1

password:wallopen

wallの登録手順

1. サインアップ画面にて登録

f:id:aotree423:20180302233309p:plain

  • 全て入力必須です
  • wall nameはログインに使用するユーザーidのようなものです。ウォールはいくつでも作れるので、「他のsnsで使っているid@ウォールのテーマ」などはいかがでしょう。(例: aotree423@hougaku-list, aotree423@to-do-list)
  • wall display nameはウォールの左上に表示されるタイトルです。日本語、英語ともに使えます。
  • emailはパスワードを忘れた際、パスワード初期化を行うために使う予定です。(現時点で未実装ですので、パスワードを忘れないようにしてください!)

終わりに

最初から最後まで自分で作ってみることで、専門外であった環境構築なども経験できて勉強になりました。

今後の展望としては、Webサービスのマネタイズについて経験したいので、色々と落ち着いたら有料会員版の追加機能を実装してみたいと思ってます。

読んでいただきありがとうございます。

Google Fontsの使い方

f:id:aotree423:20171126105531p:plain

(この記事は2017年11月29日に書かれた記事です)

今回は、無数のおしゃれFontを無料簡単に利用できるサービス、Google Fontsの使い方を紹介します。 

 

自身ポートフォリオサイトを、HTML, CSS, JavaScriptの練習を兼ねて作成していたのですが、フォントについてはオシャレ感のあるWebフォントを使用したく、数あるWebフォントの中でも個人利用/商用利用問わず無料で使用できるGoogle Fontsを使ってみました。

Google Fontsとは

Googleが提供するWebフォントのオープンソースディレクトリで、全てのフォントが個人利用/商用利用問わず無料で使用できます。

Google Fonts利用手順

1.Google Fontsにアクセス

f:id:aotree423:20171126145157p:plain

Google Fontsにアクセスします。

https://fonts.google.com/

2.好みのフォントを探す

f:id:aotree423:20171125222248g:plain

好みのフォントを探し、右上のプラスボタンを押下して追加していきます。

  • 例文は好みのテキストに変更することができる(APPLY TO ALL FONTSを押下)
  • 右サイドバーのフィルターで好きなカテゴリのフォントのみを表示できる
  • 複数のフォントを追加できる

3.太字や斜体を使用する場合の設定をカスタマイズ

f:id:aotree423:20171126013459g:plain

太字や斜体など、複数のウェイトやスタイルを持つフォントを追加した場合、使用するウェイトやスタイルにチェックを入れます。

4.HTML/CSSGoogle Fontsの取り込みを指定

f:id:aotree423:20171125124933g:plain

ページ下部の黒いバーをクリックして追加したフォントの確認画面を表示します。

この後、フォントの取り込み方法を指定することで、ウェブサイトでGoogle Fontsが使用できるようになります。

HTMLファイルにリンクタグで追加する方法(4-1)と、CSSファイルに@importルールを追加する方法(4-2)がありますので、順に説明します。

4−1.HTMLファイルにリンクタグを追加

f:id:aotree423:20171126011356g:plain

STANDARDのタブに、<link>タグによるフォントの取り込み方法が書かれていますので、コピーしてHTMLの<head>タグの内部にペーストします。

4−2.CSSファイルに@importルールを追加

f:id:aotree423:20171126011404g:plain

@IMPORTのタブに、@importルールが書かれていますので、コピーしてCSSの@charsetルールの次の行にペーストします。

※ @charsetルールがない場合、先頭にペースト

終わりに

f:id:aotree423:20171126144641p:plain

今回、私は自分のポートフォリオサイトに「Poiret One」というフォントを使用しました。

f:id:aotree423:20171126142333g:plain

ちなみに右サイドバーでカテゴリのチェックを全て外すと、「No fonts found!」というメッセージとともに、顔文字が表示されます。

遊び心があっていいですね。