Simple IT Life Posts

設計

概要

SassはCSSを効率的に書くための記法

Sassには2つの記法がある

  • SASS(拡張子は.sass)
  • SCSS(拡張子は.scss)

SASSとSCSSで書き方の違いがある例

SASSの場合

.div
  .container
    color: red

SCSSの場合

.div {
  .container {
    color: red;
  }
}

SASSの方が最初に作られたが、デザイナーに不評だったこともありCSSっぽいSCSSが現在の主流となっているので本記事はSCSSの記法をまとめることとする

デザイン

■ 目次

  • 概要
  • モジロイはどういうサイトか
  • 推奨している書き起こし手順
  • モジロイはフィードバックを募集しています

■ 概要

先日文字起こしを行うライターさん向けにモジロイというWebサイトを公開致しました。

こちらはVue.js/Nuxt.jsで作成して、Firebaseで立ち上げています。

サイト作成の経緯などはVue.jsとWebSpeechAPIを利用してライターさん音声文字起こし補助サイトを作った話にて紹介を行なっていますのでそちらをご覧ください。

今回の記事では主にどういったサイトか、どうやって文字起こしを行うのかを具体的に紹介していきます。

その他

■ 目次

  • 概要
  • mBaaSとは
  • Firebasetとは
  • Firebaseダッシュボード作成まで
  • Firebaseにデプロイする
  • 無料枠の制限

■ 概要

FIrebaseの中の機能の一つであるHostingサービスを使うまでの流れをまとめる
具体的に言うとnuxt.jsで作成した静的ファイルをFirebase Hostingにアップしてアプリケーションを動かしてみる

■ mBaaSとは

スマートフォンアプリでよく利用される汎用的な機能を提供するサービスで
バックエンド周りの機能をクラウドを通して利用することができる

■ Firebaseとは

Googleが提供するmBaaSのこと

Firebase HostingはFirebaseの機能の一つで静的ファイルのホスティングサービスとなっている

クラウドサービス

■ 目次

  • 概要
  • Microsoft Azureとは
  • 他サービスとの比較
  • Azureの無料枠について
  • Azureのアカウント作成
  • PaaS(Azure App Service)のインスタンスを作成する
  • 作成したWeb Appにデプロイを行う

■ 概要

Microsoft AzureのAzure App Serviceを使ってPaaS環境上でサンプルを動かすまでをまとめる
無料期間が終わっても無料でサービスを継続させることを目指す

クラウドサービス 運用

テスト 運用

■ 目次

  • 概要
    • 今回の目標
    • Cloud Foundryとは
    • Pivotal Cloud Foundryとは
    • PaaS(ついでにSaaS,IaaSも)について
    • PaaS利用によるメリット
  • 利用までの流れ
  • 準備
    • cfコマンドを使えるようにする
    • Pivotal Web Servicesのアカウント作成
    • TerminalからPivotal Web Servicesにログインする
  • Hello World
    • 作業ディレクトリの準備
    • index.phpを作成する
    • manifest.ymlを作成する
    • cf push
  • cfコマンド色々
    • アプリケーションの削除
    • よく使うコマンド
  • 終わりに

■ 概要

今回の目標

今回はPivotal Cloud Foundry(PCF)のホスティングサービスであるPivotal Web Servicesを使用して
簡単なWebアプリケーションを立ち上げて、画面を確認できるまでを体験する

Cloud Foundryとは

業界標準のオープンソースのPaaSソフトウェアのこと
– 色々なベンダー/ユーザー企業から支援がされている
– 色々な言語やフレームワークへ対応している

Pivotal Cloud Foundryとは

Pivotal社が提供しているPaaS環境のことで、Pivotal版のCloud Foundryということ

PaaS(ついでにSaaS,IaaSも)について

  • SaaS(Software as a Service)
    • ソフトウェアをインターネット経由で、必要なものを必要な時に呼び出して使うような利用形態のこと
  • PaaS(Platform as a Service)
    • アプリケーションを稼働させるためのプラットフォーム一式をインターネット上のサービスとして利用する形態のこと
  • IaaS(Infrastructure as a Service)
    • 仮想サーバなどのインフラをインターネット上のサービスとして利用する形態のこと

PaaS利用によるメリット

従来ではエンジニアが、アプリケーション開発のみならずサーバ構築から負荷対策によるスケールアウト・ロードバランシングなど、作成したサーバの保守運用まで行う必要があったためとてつもない工数がかかっている

またサーバに障害があった場合は、休日問わず対応する必要があるため、決してホワイトとは言えない業務を行なっていたことと思える

PaaSを利用することによってエンジニアはアプリケーションの開発だけにフォーカスすることができ、サーバの保守運用という報われない仕事から解放されることができる

クラウドサービス 運用

■ 目次

  • 概要
  • 準備
  • ソースの見方
  • axiosを使って外部のAPIを叩く
  • インスタンスのライフサイクル

■ 概要

Vue.jsのサンプルを作成したので忘れないようにブログにまとめていく

Hello Worldぐらいなら作れるけどその次は何をしよう…という入門の次にどうするか悩んでいる人向けに以下の内容をまとめる

  • vue-routerを使って、画面を再読み込みをさせることなくURLとコンテンツを切り替えさせる
  • 1ファイルに1コンポーネントずつ、ファイルを分割していく(単一ファイルコンポーネント)
  • コンポーネントからコンポーネントを呼び出す
  • axiosを使って、外部のAPIを叩いてその結果を表示させる

これを学ぶだけでも小規模なWebサイトが作れるようになるはず(多分)

言語 開発

■ 目次

  • 概要
  • LINEスタンプを作成するまでの流れ
  • 準備
    1. ガイドラインについて
    2. LINE Creators Marketに登録する
  • イラスト制作について
    1. イラスト作成の基本
    2. 今回試したイラスト制作の流れ
  • 審査

■ 概要

LINEのスタンプを自作する

イラストを作成してから公開するまでの流れをまとめる

そもそもイラストなんて描いたことが無かったのでイラストの描き方からまとめていく

→ LINEスタンプ「イカソクくん」販売中!!

良かったら是非!

イラスト

■ 目次

  1. 概要
  2. Node-REDの作成
  3. LINE BOTを使うための準備
  4. Watson Conversationの設定を行う
  5. ここまでのおさらい
  6. Node-REDでWatson Conversationを使用する

■ 概要

LINE BOTを作成して受け取ったメッセージ内容を元にWatsonのAPIを叩いてよしなに返信をするようにする

最初なので挨拶からの好きなゲームに答えるだけのBOTとする

構成図としては以下のようにする

流れとして、LINE BOT上でWebhookが設定できるので作成するNode-REDのURLを登録して
Node-REDが叩かれた時にWatsonのAPIを叩く

そもそもWatsonが何かは以下のサイトで解説している

IBM Watson入門の入門 デモを試してWatsonがどんなものかのイメージを掴む

AI