企画概要とWebサイトの公開 + Webデザイナーのスマホアプリ開発 について

  • 63
    Like
  • 0
    Comment

 こんにちは!Life is Tech !でデザイナー系メンター、GMOペパボのSUZURIというサービスでデザイナーをしているちゃんちーです。(詳しくはこちらhttps://chanchihiro.github.io/

 今回は初めての試みであるこの企画の概要と、無料のWebサイトの公開+webデザイナーのアプリ開発について書いていこうと思います。自分は他のメンターのポートフォリオを見るのが好きで、この記事をきっかけにメンターでポートフォリオ作る人が増えればいいなぁって勝手に思ってます。

Life is Tech ! Advent Calendar 2016について

 みなさんが恐れていたさむいさむーい12月がついにやってきましたね。そんなさむいさむーい12月でもぽっかぽかに心も知識もあたたまる、そんな企画がこのLife is Tech ! Advent Calendar 2016です。クリスマスまで一緒にぽっかぽかになりましょうではありませんか。

calendar.png

企画発足のきっかけ

 つい先日、Life is Tech !のメンター内でWebD-1グランプリという企画がありました。 その懇親会の中でざわっちさんから「Lit!でアドカレやったらおもしろそうだからやってね!」というお告げが発動し今に至ります。
 そんなこんなで選ばれたぼくとへむへむで運営していきますので、一ヶ月よろしくお願いします!

企画概要

 今回の日程がこんな感じになります→http://qiita.com/advent-calendar/2016/life-is-tech

基本的には一日一記事ずつメンターが面白くてためになって冬でも心があたたまる記事を書いていきます。デザインのことからiOSのこと、ディープラーニングのことまで深く広く投稿されていく予定です。ぜひ購読していただけると嬉しいです。メンバーのみんなにも楽しめる記事になっているのでぜひぜひみてくださいな〜〜!

Webサイトの公開+αについて

 今回はWebデザインをし、コーディングしたあとのWebサイト公開と、僕らだってアプリを作りたい!という二本立てでいきたいと思います。

無料で簡単便利にサイトを公開する


 webサイトの公開方法は最近では結構いろいろ出てきていて、一般的にはなんらかのホスティングサービスを利用することになると思います。最近だとAWSとFirebaseが流行ってたり、ほかにもさくらとかかごやが有名だったりします。そんな中でも"簡単に便利に"という面で今回は "Netlify" を使っていこうと思います。ちなみにNetlifyはところどころにマテリアルデザインの要素があってたまにむむってなります!
では、「あとは公開するだけ!」という状態からやっていきたいと思います。

1.サイトにあげても大丈夫な状態か確認する

 まずそのファイルが公開しても大丈夫な状態かを確認します。
 以下を最低限確認しましょう。

  • 著作権違反の画像を使用していいないか
  • 使用しているフォントは個人使用可能なのか
  • なるべく20秒以上の動画はディレクトリに入れない(デプロイに時間がかかりすぎるし、読み込みに時間が掛かる)
  • 関係のない、使わなくなったファイルを削除はしたか
  • index.htmlファイルがあるか確認する

...などなど

2.GitHubに登録する

 これはステップ2というよりは、開発を始める前が最高です。サイトを公開する以上、Webデザインでもバージョンの管理は必要不可欠です。さらに、デプロイする際にも、登録しておくことで簡単にできるので登録しましょう。

3.Netlifyに登録する

・GitHub
・GitLab
・Bitbucket
・e-mail
以上のどれかから登録ができます。ステップ1で作成したGitHubで進めていきましょう。

4.プロジェクトの作成、公開

 早いですね。ステップ4つ目で早速サイトを公開します。
Netlifyでは既存のリポジトリか、7種類のテンプレートからサイトを公開できます。今回はgitで管理しているものとして、リポジトリから作成します。

 まず"ADD A NEW PROJECT"ボタンを押します。すると以下のような画面が表示されるので、githubボタンを押します。

スクリーンショット 2016-12-01 13.02.42.png

 フォルダのドラック&ドロップにも対応していますが、今回はgitのpushを使ってデプロイできる機能などを使いたいので今回は遠慮します。この機能も画期的で、本当に軽いファイルだったら簡単にサイトを公開できます。

 クリックすると、自分のリポジトリが一覧で表示されていると思います。その中から公開したいサイトのリポジトリを選択します。
 すると、そのリポジトリのコンフィグ画面が表示されます。

スクリーンショット 2016-12-01 13.07.02.png

 すぐに問題なく公開したいときは何も変えずに"Build you site"を押してしまいましょう!

 以下に項目の詳細をまとめておきます。
 "branch"は基本masterなのでいじらなくて大丈夫です。
 "Dir"は、公開したいディレクトリだけを指定して、公開してくれます(便利!)コンパイルしたりしてなかったら、基本的にはこっちも、何をいじらなくて大丈夫かと思います。
 "Build Command"も便利で、タスク管理でgulpとかgruntを使用していたり、Scssを使用している場合に、コマンドを入力しておくとビルドしてくれるというものです(便利!)これも基本何もいじらなくてもおっけいです。

以上でサイトの公開は完了です!!!(簡単はやい!)

5.サイトの設定

 サイトの公開おめでとうございます!
 ですが、まだ終わっていません。続いてサイトの設定について見ていきましょう(重要!)netlifyではサーバーをいじらないとできないようなことも簡単に設定できます。
 まず最初の画面い出るのがデプロイのログです。ビルドの履歴とかビルドの内容を見ることができます。ここは確認程度で大丈夫かと!
スクリーンショット 2016-12-01 15.57.56.png

 次に”Setting”というところに飛びます。
 ここで設定したいのが以下の3つです。
・サイト名の変更
・カスタムドメインの指定
・プライベートページの設定

サイト名の変更

 クリックして、任意の名前を入力するだけで変更できます。
 しかし、ドメイン名が自分のものではないためnetlifyが入ってしまいます。
 以下でカスタムドメインを設定します。

カスタムドメインの指定

 自分のサイトの公開はカスタムドメインの方がやっぱりイケメンに見えます(だよね)
 通常の.jpなどはお金がかかってしまうので無料で取れるドメインを取得します。
 .tkという無料のドメインが一般的です。→tk
 (一日3アクセスがなければドメインが剥奪されちゃうとこに注意)

 では次にカスタムドメインを指定します。
 こちらも簡単で、"domain"の部分の"edit"からドメインを指定するだけです。

プライベートページの設定

 簡単に非公開ページを作ることが出来ます。メンバーにサイトを公開してもらったり、自分で何か作るときに、このページは非公開にしたい!というファイルがあると思います。そのプライベートページの設定を行いましょう。
 _headersというファイルを非公開にしたいディレクトリ(ここではprob)内に作り、以下を記入しましょう。
 

Basic-Auth: hogeuser1:hogepass1 hogeuser2:hogepass2

これだけでBasic認証がかけられるようになります!

5.デプロイ(サイトの更新)をする

 Netlifyを使うとデプロイ作業がどちゃくそ簡単になります。
 やり方はただgitにプッシュすればいいだけです(簡単!)

cd my-site-folder
git commit -am
git push

 コミットを確認すればメンターもメンバーが著作権違反していないかとか、エラーでたとか確認しやすいので、ぜひこの方法をお勧めします。

こんな感じになれば成功です!
スクリーンショット 2016-12-01 17.37.22.png

6.他にもできること

・SSL化(有料)
・Redirect / RewriteRule
・フォームを簡単に設置
・OAuth・認証
・Webhook・Slack通知・E-mail通知(サイト内でのフォーム送信時)←すぎょい
・カスタムスクリプトの追加
・HTTPSの設定

まとめ



 ここまでサイトの公開と設定についてみてきました。メンバーにサイトを公開してもらうときに参考になれば幸いです。くれぐれも著作権など、注意点には気を付けましょう!
 ここまで書いて思うのはやっぱりメンターの作品ってみんな気になるし、パッと見れたら雰囲気もわかりやすいのでみんなポートフォリオ作ろうってことです!Webデザインメンターは特に!

Webデザインコースだってスマホアプリを作りたいもん!

 Webデザインをしてて「僕たち(私たち)もアプリ作りたい〜〜!」なったことありません?(あるでしょ!)そうなったらWebアプリを作ったり、Swiftを学ぶっていうのが最適解な気もしますがまた新しい学習領域が増えたり、サーバー周りが大変だったりの問題点もあります。
 なので、今回はWebデザインの技術のみで簡単にアプリが作れる方法を書きます〜。

 今回使うのは、Monacaというハイブリッドアプリ作成サービスです。
 ハイブリッドアプリというのはiOSもAndoroidも対応しているアプリのことで、このMonacaを使うことで簡単にハイブリッドアプリを構築することができます。

Monacaが単純にいい理由

 こういうサービスって他もあって、cordova(monacaはcordoveみたいな)とかとか色々ありますが、monacaがいい理由があります。
 ちょっと長くなりそうなので簡単に箇条書きでまとめます。

・monacaアプリでデバック作業がしやすい
・アプリの申請をしなくてもmonacaのアカウントを持っている人にそのアプリをいれられる。(家族、友達、誰でも)
・gitで管理できる
・プラグインが結構あって開発しやすい。(加速度センサーとか)
・mobilebackend使いやすい

MonacaがWebデザイナーにいい理由

・アプリのデザイン業務に触れられる(ボタンの大きさとかスマホ対応とかアイコンの作成とか)
→webデザインできるけどアプリデザインは苦手><ってひと多い気がする。
・あんまり学習しなくてもできる
・Webアプリにも対応すればレスポンシブサイトの練習になる

スクリーンショット 2016-12-01 17.32.38.png

アプリを開発する

簡単に説明していきます。アプリの最初といえばカウントアプリということで、カウントアプリを5分で作ります。

1.monaca登録

GitHubまたはmailで登録できます。何も問題なければgitで登録しましょう

2.プロジェクト作成

無料登録で、三つまでアプリを所持できます。
[新規プロジェクトの作成]→[Onsen UI Minimum]→[アプリ名を入力]とします。これでプロジェクトの完成です!

スクリーンショット 2016-12-01 16.08.24.png

2.プロジェクト作成

[開く]からプロジェクトを作成します。
こんな感じの画面が出ればOKです。
スクリーンショット 2016-12-01 16.19.20.png

3.コードを書く

components/index.jsを追加して以下のコードを書きます。

index.html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="components/index.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
    </script>
</head>
<body>
    <div class="container">
        <div id="result">0</div>
        <button class="buttons" onclick="countup();">+1</button>
        <button class="buttons" onclick="countdown()">-1</button>
    </div>
</body>
</html>

style.css
*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #fff;
}

.container{
    width: 300px;
    margin: 0 auto;
    text-align: center;
}

#result{
    margin: 100px 0;
    font-size: 100px;
}

.buttons{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background-color: #000;
    padding: 20px 40px;
    border-radius: 4px;
    margin: 50px 10px;
    font-size: 30px;
    color: #fff;
}
index.js
var num = 0;

function countup(){
    document.getElementById("result").innerHTML = ++num;
}

function countdown(){
    document.getElementById("result").innerHTML = --num;
}

4.実行を確認する

 横にあるデバッグのステージですぐに確認できます。
スクリーンショット 2016-12-01 16.40.00.png

スマホアプリで確認する
 [APPストアにあるmonacaをダウンロード]→[プロジェクトをクリック]
以上でアプリを実機で確認、動作できます!(簡単!)
IMG_9459.jpg

5.知り合いと共有する

 [共有設定]→[ユーザーを招待する]→[ユーザーを追加]
で、monacaのアカウントを持っている人にアプリを共有できます!
これで、友達や家族ともアプリを一緒に使えます。

他にできること

 ほかにも色々できます
・mBaasと連携してモバイルバックエンドを用意する
・iOSデベロッパー登録をして、アプリを申請する
・enchant.jsなどを使ってゲームを作る
...などなど!

まとめ



 monacaを使えばwebデザインの技術で簡単にアプリを作ることが可能です。高機能なアプリを作るという目的でなくても、アプリのモックを作る際や、アプリのデザインを練習したい時などに役立ちます。

Life is Tech ! Advent Calendar 2016について

 以上で初日のあどかれを終わりにします〜〜!!メンバーでもメンターでも誰でも為になれば幸いです!!!
 明日はみんなのアイドルの "うーぴょん"が登場します〜〜!
 今日使ったmonacaと組み合わせると面白そな企画をやるみたいなんでぜひチェックしてください!みなさん良いリア充クリスマスライフを〜〜〜