2018-07-05

アラフィフ・Webフリーランサーが2018年前半を振り返る。

freelance

はじめに

今回のお題は前半戦の総括などを。
ありきたりですが、例年どおりあっという間の半年でしたし、それなりに感じたり学んだりすることがありました。そこらへんをつらつらかければいいかなと。

僕の基本スペック

アラフィフ、家族あり（カミさんとムスコとネコとネコ）、中古マンション買ったばかし。フリーランス歴はまだ三年未満。
主にWebサイト制作。Wordpressサイト、LP、静的サイト。たまにフロントエンド（CSSとJS）とPHP。新規だけではなく更新やカスタマイズも結構やってます。
実務経験は20年以上ありますが地方の広告代理店上がりなので、さほどスキルがある方ではないです。

売り上げは？

以前は取引は二社のみでしたが、三月頃から新規の制作会社からコンスタントに取れるようになり、去年よりは行けそうだなという手応えがあります。
まだ勤め人時代の数字には届いていないので、まずはそこを叶えたいです。
仕事は広告代理店や制作会社からの委託がほとんどなので、制作内容や業種は様々です。
以前在籍した会社であったり、そこからの紹介だったりで、営業はほとんどしてません。
三社のみとはいえ忙しい時はかなりアップアップになるので、今のところこれ以上取引を増やす予定はないです。

業務内容は？

フリーランスを始めた頃は、企画、制作、運用まで一気にやれることをウリにしていましたが、今は逆に内容を制作のみに。デザインもやめて開発のみをメインとするように進めています。

理由は開発が一番楽しいから。そして一番効率的に稼げるからです。
デザインは嫌いではないけど仕事が遅いので意識的に避けたり断ったりしています。
企画も楽しいのですがお付き合いや打ち合わせが必然的に増えるのがイヤですね。
僕はそれほどフレンドリーなタイプではないので。

一番依頼が多いのはWordpress関係です。サーバーインストール、設定、デザインや機能のカスタマイズなど、一通り請け負います。
テーマは既存テーマも使いますが、ブランクテーマをベースにSassやBootstrapなどでオリジナルデザインを落とし込むのもよくある依頼です。

Wordpressはプラグインが充実していて、大抵のことなら低コストでサービスを構築できるのが魅力です。使ったことがあるクライアントさんも多いので話も早いんですよね。

新しいことにはトライした？

基本的に好奇心は強いので、新しいプラグイン、言語、フレームワークをいじりたがります。
今は理解が曖昧なjavascriptをやり直しています。そしてそれのフレームワークであるVue.jsをよく触っています。
業務内容的にもバックエンドよりもフロントの方が需要がありそうなので（僕の場合は）、もっと理解を深めたいです。

半年前まではガッツリ触っていたRailsはサッパリですね。。。独自要素を盛り込むとすぐにゴチャゴチャになるWordpressと違い、素に近いところから作っていけるRailsはとっても魅力的なフレームワークで、これでサービスを作りたいという欲求はあるのですが今は沈黙しております。
悪くいえば、目の前の仕事と金に流されている状況です。トホホ。

Wordpress業務もいつかは激減するだろうなという意識はあります。
僕はコーディングも得意分野で、三年前はレスポンシブのLPをガンガン作っていたのですが、今はサッパリ依頼すらないです。新しいもの、面白そうに感じるものには、最初は好奇心ベースでも構わないので、何かしらかじっておくべきだと思います。

メンタルとか心構えとか。

フリーランスなら誰でも悩む？メンタル問題についてちょっと。

僕は必ずしも自己管理がなっているタイプではないし完璧に締め切りを守れるタイプでもありません。
勤め人を卒業してスタートアップするぜウェイってタイプでは全くなく、大人数が苦手で、むしろ波風少なく生きていきたいタイプでございます。消極的フリーランス、でございます。

フリーランスは、アクティブで、ポジティブで、管理能力が高く、スキル高く、仕事も早くあるべきである。

いや僕全然ですよこんなのムリ。
むしろ、ムリ、って思うところから、なんとかなり始めた感があるです。

ちなみに僕にはムリルールというのがありまして、それはこの三つ。

できない内容は断る。
ありえない料金は断る。
間に合わない納期は断る。（着手していて、間に合わないと思ったら伸ばして、という）

フリーランス制作者として、この辺をはっきりさせるって大事だと思っています。
「間に合わないから伸ばして」というのは僕も恥ずかしい、ヘボすぎる、と思っていましたが、今はむしろ開き直ってます。そりゃ勿論ある程度は頑張りますよ。
が、無理そうだったら寧ろ正直に言う方が信用されるし、質も保証されると思います。精神衛生上もこっちが絶対いい。
多重案件 & 無理ゲー納期のストレスは、僕にとってはかなり辛いです（不整脈出そうになる）

次に、決して依頼主ってスキルばかりを求めてはいない、という意識。乱暴な言い方かもしれませんが、要は求められている依頼内容をカタチにできればいいんです。手法はどうであってもいい。

ちょっとくらいわかんなくてもググれば必ずヒントはある素晴らしい時代。
コピペとかクソコードかもしれないが動くものを作れればそちらが正義。
無理せず金の力を借りて有料のコードを使ったって大丈夫。

ダメダメな僕の、せめてものポジティブな心構えとしては、とにかく納品することです。

「多少体裁悪くても、どうにかこうにか納めてくれる」ってとっても大事なこと。
ていうかここがゴールだ。

そういうことの繰り返しで、
「●●さんならこの案件をこれくらいの金額で、これくらいの納期で作ってくれそうだ。」

↑こんな評価をもらえるようになったら、もうお得様ゲットなんだと思います。
ちょっとくらい出来がダサくても、ちょっとくらい仕事が遅くても、ちょっとくらいミスっても、大まかな評価がプラスであればいいのだと思います。

完成品を納品する。
これは続けていれば、スキルは必ず上がっていくと思います。

ついでにもう一つ。
4. できない内容に対しては、代案を出してみる。

のはとってもいいチャレンジかと。「依頼のまんまの仕様は無理だけど、この辺ならできますよ。」というアピールは、すごく好印象だと思います。

かぞく。

最後に。
なんのために仕事をしているのかというお話です。

仕事がたくさんあって、面白くって仕方がないという瞬間があったとしても。
家事をしたり、子どもと接したり、カミさんとおしゃべりする時間は「同等に」大切なもの。

ここを踏み外すと、僕にとってのフリーランスの意味はありません。
時間に融通がきくのであっても、仕事だけに融通をきかせるのは、これは違うかなって思ってます。
クライアントにも融通きかせるくらいの気合いを持って、子どもの運動会とか参加したいのです。

僕はへぼいですがそれなりにコードが好きで、実務時間以外にもちょくちょく触って面白がっています。
が、かぞくがいます。
全ての時間を、自分の喜びのため、技術向上のために使える若い人間には、僕はもう戻れないのです。

だからスキルだけで生き抜いていこうとは、もう思ってません。
かといって経験値だけでやっていけるほど甘いとも思ってません。
忙しかったら徹夜をすれば・・・なんて体力も、もうありません。

そう考えると、先は決して明るいばかりではないかなと。まだまだ工夫しなくちゃいけない。気力があるうちに。

人生100年とか言われ始めてますが、まだまだ同じことを続けるの？
とか問うてみると正直ゲンナリですよ。

まあそこまでいかなくても、子どもが普通の市民になってくれるまでは、どうにかこうにかしようと思います。そして住宅ローンも！

フリーランスだろうがなんだろうが、僕はかぞくのために仕事をしている、ていう原点だけは、少なくともそこまでは踏み外さずにいたいなと思っています。

長文駄文最後まで読んでくれた人ありがとう。

2018-05-24

AWS Cloud9 + EC2 でWordPress開発環境【安定版】

AWS Cloud9 wordpress AWS

はじめに

数日前にようやく整った・・・と思ってたはずの↓コレが全く使えませんでした。。。

koyacch.hatenablog.com

IDEもWordPressサイトも直ぐに固まってしまいます。何が悪いのか。。。 EC2がt2.micro（無料）だからスペック足りないのかなと思って有料の良さそうにしても結果は変わらずでした。

で、ふとEC2サービスのページを眺めていたら、あらあら、あるんですねWordPressプリンストールのAMI・・・.

気がつかなかった。

ググってみるとamimoto社の有料サービスが素敵そう。

ja.amimoto-ami.com

が、あくまで開発用なので、無料版から探すことに。 AWSでも紹介されている、WordPress powerd by BitNami とか良さそう。

bitnami.com

これにSSHでAWS Cloud9を接続すれば使えないかなーと思いトライしました。結果、うまくいきました。

以下に手順をまとめました。

工程

1. WordPress powered by BitNami サービスを起動。

これはAWSのチュートリアル通りで問題なしです。

aws.amazon.com

2. BitNami AMIをSSH接続できるようにする。

あくまで普通のLinux AMIと同様と考えて、チュートリアルの手法で接続できるように設定できました。公式の接続チュートリアルは↓これです。

docs.aws.amazon.com

ただ、多少違うところがありますので手順を追って説明します。

1. Pytonのインストール

BitNamiのAMIにはPyhon3は入ってましたが、Python2は入っていませんでした。
AWS Cloud9は2がないとインストールできないので、コマンドラインからPython2をインストールします。

$ sudo apt-get install python2.7

インストールされているPythonの確認はこちらで。

$ python[tabキー][tabキー]

コマンドラインでpythonとタイプしてタブキー連打です。こんなコマンドあるんですねー。

2. Node.jsのインストール

こちらは先のチュートリアルと同様です。$ sudo yun -y updateは不要です。

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
$  . ~/.bashrc
$ nvm install node

3. AWS Cloud9のSSHキーを貼り付け

AWS Cloud9のSSHキーの取得は、Cloud9のIDEの新規設定でSSH環境を選択すればコピーできます。

f:id:koyacch:20180524153907p:plain

↑こちらの「Copy key to clipboard」をクリックすればOKデス。コピーしたら以下のコマンドで貼り付け。

$ echo "[貼り付けたSSHキー]" >>  ~/.ssh/authorized_keys

最後にアクセス許可の設定

$ sudo chmod u=rwx,g=rx,o=rx ~

4. AWS Cloud9の設定

AWS Cloud9ページに移動して「Create environment」をクリックしてIDEを設定します。

Name 任意の設定名を入力（僕は作成するサービス名称とかURLにしています）
Description 概要。空欄可。
Environment type 「Connect and run in remote server (SSH)」を選択。
User 「bitnami」と入力。
Host AMIのIPを入力。
Port デフォルトの「22」。
Environment path 空欄でもいけますが、編集すべきpublicディレクトリが彼方に消えてしまうので設定します。「/home/bitnami/apps/wordpress/htdocs」と入力。
Node.js binary path 空欄だとこけます。「/home/bitnami/.nvm/versions/node/v10.1.0/bin/node」と入力。コマンドラインで$ which nodeで取得できるパスです。
SSH jump host 空欄。

以上の設定で起動できます。アクセスできますが、時間が結構かかります。

これで終わりです。

補足

WordPressのコンソール > 外観 > テーマの編集ができなくなります。おそらく権限の都合です。IDE側でファイルを作成すると所有者とグループが違うものになるからだと思います。けどIDEでいじれるから問題なしです。
権限の関係でIDEで触れないディレクトリがありますがそこはsudoコマンドで補完できます。
外部からプラグイン経由でファイルをインポートすると所有者ユーザーがBitnamiと違うものになっている可能性があります。その時は変更すれば良いです。

最後に。

これでも旧Cloud9に比べると多少の不便は感じますが、安定してます！安心して触れます。
コンソールを操作しつつテンプレートファイルをIDEでゴニョゴニョできます。快感です。

当面はこれにてWordPress開発を続けたいと思います。

2018-05-15

AWS Cloud9 + EC2 でWordPress開発環境を整備する。

AWS Cloud9 wordpress AWS

はじめに

静的サイトからJavascript、WordPressの開発、そしてRailsの勉強まで重宝しまくっていたCloud9がAWSに買収されました。

koyacch.hatenablog.com

旧Cloud9の年契が五月上旬で終了、ということで、新たにAWSでの環境づくりをしましたです。

まずは仕事でメインのWordPress開発用を目指しました。やりたいことは以下です。

直接IDEからFTPを介せず編集する。
WordPressコンソールから通常の操作ができる。
Gitが使える。
できたら複数設置したい。

というわけで、以下の三つの方法を検討しました。

1. AWS Cloud9からインスタンスを作成する。そこにWordPress環境を構築する。

Cloud9でのデフォルト的な環境なのでとりあえずやってみました。が、権限に制限があるのか、IDEからファイルが作れなかったり移動できなかったりしました。（なぜかコマンド打てばできた）不自由極まりないので諦めました。

2. LightsailサービスよりWordPress環境を立ち上げ、AWS Cloud9からSSH接続する。

LightsailはWordPressやLAMPなどの環境をスイッチ一つで立ち上げるサービスです。

https://lightsail.aws.amazon.com/ls/webapp/home/instances

公式にも接続方法が解説してありますね。

docs.aws.amazon.com

確かに簡単にWordPress環境が作れます。が、これも先の方法と同じ問題が出て、ファイルを思うように弄れなかったのです。加えて複数の環境が立てられない。

簡単に運用用の環境を用意するにはいいサービスかもしれませんが、開発には向きません。

3. 普通にEC2サービスを立ち上げ、環境を整備、AWS Cloud9を接続する。

結局一番手間がかかるこれにしました。 AWSを全く知らないので苦労しました。その辺の注意書きもちょいちょい書きたいと思います。

工程

1. EC2インスタンスの準備・環境整備。

普通にroot権限で作成します。最初は、Linuxが動けばいいかな。。。という安易な感じでクイックスタートの最初に「無料枠」とあるやつを選びました。

Amazon Linux AMI 2018.03.0 (HVM), SSD Volume Type / t2.micro

これがいきなり失敗でした。インストール失敗するわ、動いたら動いたで止まるわ。。。です。以下の記事が参考になりました。

bitcapitalz.hatenablog.com

全く同じ現象でCloud9がビルドできませんでした。

なので課金覚悟でt2.mediumを選択しました。

2. AWS Cloud9からSSH接続する。

公式の記事を参考に設定しました。

docs.aws.amazon.com

英語の記事であろうがChromeの翻訳機能があればなんとかなるもんです。流れとしては以下です。ターミナルからの操作になります。

Pythonのバージョンチェック（入ってなければインストール）
Node.jsのバージョンチェック（入ってなければインストール）
AWS Cloud9をSSH接続で環境構築する。（僕はrootをログアウトしてIAMで作成したCloud9ユーザーで構築しました。）その時にSSHキーが取得できるので、コピーしてターミナル経由でインスタンスに設定します。以下のコマンドで追記しました。

echo "(SSHキーをペースト)" >> ~/.ssh/authorized_keys

3. AWS Cloud9の環境構築を完了させる。

以下の三つだけで作成できるようです。

Userは、ec2-user
Hostは、インスタンスのパブリックDNS
Portは、22

Create environmentをクリックするとIDEっぽい画面が開いてチェックボックス付きの画面が出ますが、ここで一気にFinishをチェックしないでください。チェックを外し、NextをクリックしてAWS Cloud9 Installerを眺めてください。

ここで Yes/No の確認が求められます。で、Yesしないと永久にビルドが終わらないのです。要注意です。

うまくいけばAWS Cloud9のIDE画面が開きます！

【注意】EC2インスタンスとCloud9のユーザーは分けましょう。
公式にもその旨推奨されています。

docs.aws.amazon.com

弄ってると何回もユーザー切り替えて面倒でした。きっといい方法があるんだと思います。僕が知らないだけだと思います。

4. IDE越しにインスタンスのLAMP環境を整備する。

LAMP環境を整備するには公式を参考にしました。

docs.aws.amazon.com

以下のオプションは設定しました。

(オプション) ブート時に毎回 MySQL サーバーを起動させる場合は、次のコマンドを入力します。
(オプション) phpMyAdmin のインストール

phpMyAdminはWordPress用のDBを作成する時に必要になります。

5. AWS Cloud9の環境設定を変更し、作業ディレクトリだけを見えるようにする。

AWS Cloud9の設定を編集し、Advanced setting の Environment pathを/var/www/htmlに変更します。余計なものが見えない方が間違いも少なくてすみます。

うまくいけば、phpMyAdminしか見えてないはずです。

6. WP-CLIをインストールし、WordPressを一つインストールしてみる。

コマンドラインインターフェイスよりWordPressがインストールできる便利なツールです！

Command line interface for WordPress | WP-CLI

実際の操作は以下の記事を参考にさせていただきました。

qiita.com

phpMyAdminでDBを作成するのを忘れずに！

7. プラグインインストールなどができるよう所有者を変更する。

6までの手順の場合、ファイルの所有者はec2-userとなっています。グループはapacheです。所有者とグループが違うディレクトリだとWordPressはプラグインをインストールできません。

権限を変えればOKですが、あちこち変えるのも面倒なので、所有者変更で対応します。

chown -R apache:apache /var/www/html

AWS Cloud9でファイルなど作成した場合、所有者はec2-userとなるので注意が必要です。

とりあえずここまでで。

IDEからのファイルやディレクトリの編集
WordPressコンソールからの編集
プラグインの編集

バッチリできるようになりました。

8.そのほか

未使用時の停止、EBSの設定を忘れずに。←まだ理解してない。トホホ。

さいごに。

...と、ここまでたどり着くまでにいくつインスタンスを壊したか。。。ボタンポチリで悩まないで月2000円程度で幾つでもWordPress環境が作れた旧Cloud9は素晴らしかったのだなあ。

でもせっかくの機会。福岡の片田舎でも「AWSでやりましょう」という時代が来るかもしれないので、勉強しておいて損はないと思うので頑張ってAWSマスターしていきます。

追記1

インスタンス初期設定では、.htaccessの書き換えが有効になってないらしい。。。ので連発しました404 Not Found

httpd.confを以下を参考に書き換え。

mashpote.net

追記2

t2.mediumで構築しましたが、結局t2.mircroに戻しました。

microの謎の挙動は「インスタンス停止　→ インスタンス起動」の際にパブリックIPが変わるから、というしょうもない問題でした。そりゃ固定で割り当てるものではないよね。。。

起動のたびにSSHの設定してもしょうがないし、稼働し続けないといけないし、だったら無料枠でのmicro、というわけです。

2018-04-03

　よくある電卓

javascript

jQuery頼みのフロントエンド実装の限界を感じたので、今さらながらjavascriptをやり直しています。

なので簡単な習作を始めることにします。

といってもGitHubを貼るだけです。興味がある方はそちらへ。。。

github.com

よくあるものですが、僕には案外難しかった。
もう少しナビゲーションを修正したいかなと。

f:id:koyacch:20180403150056p:plain

あ。これは押せません。。。イメージだけです。
Herokuに突っ込むのも面倒くさそうなので、何か見せ方考えなければ。

追記

気になって調べたら、GitHub Pages なんてものがあるんですね！
ありがとうございます。

www.tam-tam.co.jp

無事に公開できました。
御照覧あれ。

dentakku

2018-04-02

【50歳からのRailsアプリ開発 vol.6】Bootstrap4でヒーローイメージを整える vol. 1

BootStrap4 Ruby on Rails

はじめに

このシリーズ、1ヶ月以上放置は流石にひどいだろう、なのでちょっぴり進めます。ちょっぴりね・・・。

今回はヒーローイメージ周辺をBootstrap4を用いて整えます。作成しているレイアウトはこちら。

f:id:koyacch:20180109160809p:plain

作るのはこのへんです。解像度低くてすいません。元XDデータが消えてしまったです。

f:id:koyacch:20180402111251p:plain

工程

1. /app/app/views/static_pages/home.html.erb のHTMLを確認

  <section id="prof">
    <figure><img src="#" alt="Thumb"></figure>
    <h1>John Doe</h1>
    <p>San Fransico. CA</p>
    <h2>Hi! Myname is John, i'm a creative geek from San Fransico, CA. Contact me at john@mail.com.</h2>
    <dl>
      <dt>qualification</dt>
      <dd>14</dd>
      <dt>experience projects</dt>
      <dd>140</dd>
      <dt>files</dt>
      <dd>240</dd>
    </dl>
    <a href="#">MORE PROFILE</a>
  </section>

なるべくBootstrap4のタグを利用して作ることにします。公式サイトを参照しつつ付与して行きます。

getbootstrap.com

2. 具体的なimgが入ってないと雰囲気が掴みづらいのでダミー画像を入れます。にゃー。

Bootstrapでおなじみのclass、img-responsiveが、Bootstrap4ではimg-fluidになってましたうおー。

<%= image_tag('dammy-hero.jpg', class: 'img-fluid') %>
        <figure>
          <%= image_tag('dammy-header-thumb.png', class: 'img-fluid', alt: "John Portrait") %>
        </figure>

①<figure>タグはサムネイル部分。
②もう一つのimgは背景画像に使います。CSSで背景配置が簡単なのですが動的に変更するため、HTML側に配置します。

3. ヒーローイメージをBootstrap4、jumbotronでスタイリング。

公式サイトでのjumbotronドキュメント。

getbootstrap.com

    <div class="container-fluid">
      <div class="jumbotron jumbotron-fluid">
        <%= image_tag('dammy-hero.jpg', class: 'img-fluid') %>
        <figure>
          <%= image_tag('dammy-header-thumb.png', class: 'img-fluid', alt: "John Portrait") %>
        </figure>
      </div>
      <h1>John Doe</h1>
      <p>San Fransico. CA</p>
      <h2>Hi! Myname is John, i'm a creative geek from San Fransico, CA. Contact me at john@mail.com.</h2>
      <dl>
        <dt>qualification</dt>
        <dd>14</dd>
        <dt>experience projects</dt>
        <dd>140</dd>
        <dt>files</dt>
        <dd>240</dd>
      </dl>
    <a href="#">MORE PROFILE</a>
    </div>
  </seciton>

①ブラウザに対して余白が欲しかったので<div class="container-fluid">を追加。
②<img>をヒーローイメージでスタイリングしたかったので<div class="jumbotron">を追加。
③Jumbotronを横長にするためにclass、jumbotron-fluid'を付与。
④<figure>にclassimg-thumbnailを付与して角丸と枠線をつける。

余白は不要なので<div class="container-fluid">はJombotronの外に外す必要があります。

    <div class="container-fluid">
      <div class="jumbotron jumbotron-fluid">
        <%= image_tag('dammy-hero.jpg', class: 'img-fluid') %>
        <figure>
          <%= image_tag('dammy-header-thumb.png', class: 'img-fluid  img-thumbnail', alt: "John Portrait") %>
        </figure>
      </div>
      <h1>John Doe</h1>
      <p>San Fransico. CA</p>
      <h2>Hi! Myname is John, i'm a creative geek from San Fransico, CA. Contact me at john@mail.com.</h2>
      <dl>
        <dt>qualification</dt>
        <dd>14</dd>
        <dt>experience projects</dt>
        <dd>140</dd>
        <dt>files</dt>
        <dd>240</dd>
      </dl>
    <a href="#">MORE PROFILE</a>
    </div>
  </seciton>

< 結果 >

f:id:koyacch:20180402122714p:plain

4. SCSSで調整する。

①Jumbotronの背景色を消す。
②figureをpositionで背景画像の左隅に配置する。

/app/app/assets/stylesheets/application.scss に記述します。

#prof{
  .jumbotron{
    background: none;
    position: relative;
    figure{
      position: absolute;
      display: block;
      width: 200px;
      left: 20px;
      bottom: 30px;
    }
 }
}

< 結果 >

f:id:koyacch:20180402125926p:plain

終わり

いつものようにgitに保存してherokuへと。 vol.2でヒーローイメージを終えたいと思います。

GitHub - koyacch/myresume

Home | MyResume

みんな大好き？RailsTutorial

railstutorial.jp

2018-02-23

【50歳からのRailsアプリ開発 vol.5】Bootstrap4でヘッダーを整える。variables.scssをパーシャルし、編集して初期設定を変更する。

BootStrap4 Ruby on Rails

はじめに

今回はせっかく導入したBootstrap4を活用してヘッダーを整えます。 Bootstrapを使って見るのは初めてなので、公式サイトを引用しつつ、それがどんなCSSとなっているかも見ていければいいかなと。

getbootstrap.com

工程

1. 作りたいデザイン。

以前にAdobe XDで作ったモックをそのままやってみようと思います。

f:id:koyacch:20180223111359p:plain

2. /app/app/views/layouts内のパーシャル、_header.html.erbの編集。

現状はこんなです。

<header>
    <h1>Name Surname</h1>
    <nav>
      <ul>
        <li>Your-menu</li>
      </ul>
    </nav>
</header>

シンプルですねー。デザインを見ると足りないと思われるのがアイコン画像です。適当なダミーを用意しましょう。

f:id:koyacch:20180223112149p:plain

わが家のネコ一号です。 Bootstrapで円形にしますが、トリミングはスクエアになるようにRailsで仕掛けないといけないですね。

Rails上の置き場所はとりあえず

/app/assets/images/dammy-header-thumb.png

でよろしいですかね。先々はRailsTutorialに倣ってAWSのS3サービスに置くことにします。

image_tagヘルパーを用いてパスを張ります。

<header>
    <h1>
      <%= image_tag("dammy-header-thumb.png", alt: "サムネイル") %>
      Name Surname
    </h1>
    <nav>
      <ul>
        <li>Your-menu</li>
      </ul>
    </nav>
</header>

3. Bootstrap4のヘッダーサンプルの確認

公式からNavibarのコードを参照しましょう。最もシンプルなものを使います。

ビジュアルはこんなので。

f:id:koyacch:20180223115249p:plain

コードはこんな。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

さらにこれを`_header.html.erb'に当てはめてシンプルにしたのがこちら。

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <h1 class="navbar-brand">
      <%= image_tag("dammy-header-thumb.png", alt: "サムネイル", class: 'd-inline-block align-middle rounded-circle', size: '40x40') %>
      Name Surname
    </h1>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Your-menu</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

h1タグを差し込んでちょっぴりセマンティックにしました。プレビューするとこんな。うまく適用されました。

f:id:koyacch:20180223143042p:plain

4. 微調整

sass記述で整えていきましょう。ヘッダーに背景色をつけ、文字色などを白抜きにし、上左右の余白をつけて角丸にします。

1. レイアウトのためのブロック要素を追加。

bootstrap4の公式に従うのと、新しい要素を理解したいためなるべくhtmlにちょいちょいとクラスを加えるやり方で。

/app/app/views/layouts/_header.html.erbを編集

<div class="header-wrap container-fluid">
  <div class="header">
    <header>
      <nav class="navbar navbar-dark bg-primary navbar-expand-lg rounded">
        <h1 class="navbar-brand">
          <%= image_tag("dammy-header-thumb.png", alt: "サムネイル", class: 'd-inline-block align-middle rounded-circle', size: '40x40') %>
          Name Surname
        </h1>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Your-menu</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
  </div>
</div>

bootstrap3ではお馴染みのpull-leftとかが消え去ってますね。実はこの辺を公式を見て理解するのに一苦労。。。色々あるので読み進めてこのプロジェクトでも使っていきます。

2. h1がつくる不必要なmarginを消し上の余白を作る。

/app/app/assets/stylesheets/application.scssを編集

.header-wrap{
  .header{
    margin-top: 10px;
    h1{
      margin: 0;
    }
  }
}

3. カラーリング

bootstrapならば$brand-primaryとか使いますが、これをapplication.scssで使うとエラーが出ます。あと変更したい場合に使う_variables.scssにあたる部分はどこになるの...?

早速ググるとapplication.scssでのimportをどうにかすると良さそうです。

github.com

1. /app/app/assets/stylesheets内に_bootstrap-custom.scssを作成

2. 下記のコードをコピぺ。

bootstrap-rubygem/_bootstrap.scss at master · twbs/bootstrap-rubygem · GitHub

3. /app/app/assets/stylesheets/application.scssのimportを修正。

@import "bootstrap" を @import 'bootstrap-custom'; と書き換える。

パーシャルで読み込みリストを読み込む感じですかね。

で、ここからです。先ほどの_bootstrap-custom.scssの中に、

@import "bootstrap/variables";

があるので、これをコメントアウトし、代わりにローカルに_variables.scssのコードを貼り付けたパーシャルを作成、それを読み込ませます。

 @import "bootstrap-custom-variables"

_variables.scssの内容は公式をダウンロードして持ってきました。

/app/app/assets/stylesheetsの構成はこのとおり。

f:id:koyacch:20180223160611p:plain

あとは実際に色を修正します。以下のファイルです。

/app/app/assets/stylesheets/_bootstrap-custom-variables.scss

$blue:    #2699FB !default;

bootstrap4は、デフォルトでは$blueがprimaryとなっています。

$primary:       $blue !default;

こんなところですねーふー！

f:id:koyacch:20180223160857p:plain

終わり

いつものようにgitに保存してherokuへと。

GitHub - koyacch/myresume

Home | MyResume

みんな大好き？RailsTutorial

railstutorial.jp

2018-01-26

【50歳からのRailsアプリ開発 vol.4】Bootstrap4（正式リリース版）の導入。

Ruby on Rails BootStrap4

はじめに。

Railsに限らずWordPressやDreamweaverでも使わないことのないBootstrap4が3日前に正式リリースになってました。

www.atmarkit.co.jp

これはもうさっそく使ってみるしかないでしょう。公式を眺めながらRailsで使えるようにしたいと思いますー。

getbootstrap.com

工程

1. 工程を確認する。

なんじゃ、またなぞってるだけかい。。。というツッコミはおいていて。何をやるにもREAD MEは大事ですね。

github.com

2. sprockets-rails のバージョン確認

まずはGemfileにBootstrapを追加するのですが、その前に、「sprockets-railsが少なくともv2.3.2であることを確認」する必要があります。以下のコマンドで確認します。

$ bundle list

すると良かった、今の環境は「* sprockets-rails (3.2.1)」とでました。

3.Gemfileに追記、bundle installする。

gem 'bootstrap', '4.0.0'

としました。バージョンを固定するのはRailsTutorial流？です。

4. /app/app/assets/stylesheets/application.css を、scssに変更する。

Railsが使うスタイルシートは標準ではcssなのですが、これをscssに変更します。

5. /app/app/assets/stylesheets/application.scss 内の「= require」「= require_tree」を全て削除。

上記のファイルを開くと最後尾らへんに入っているのを削除します。

ちなみに、このファイルはRailsTutorialによりますれば、マニュフェストファイル、と言われています。役割は以下です。

静的ファイル (アセット) を上記の場所へそれぞれ配置すれば、マニフェストファイルを使って、それらをどのように1つのファイルにまとめるのかをRailsに指示することができます。

削除したらヤバげな感じですが、READ MEによるとこう書かれてます。もちろん？Google先生に訳してもらってます。

[*= require]は、Sassで使用しないでください。そうしないと、他のスタイルシートはブートストラップのミックスインや変数にアクセスできなくなります。

安心して次に進みます。

6. /app/app/assets/stylesheets/application.scss 内に「@import "bootstrap";」を追記する。

上記のファイルの一番上に追記します。この下にSassを書くことになりそうです。

6. jQueryのgemをGemfileに追記、bundle installする。

gem 'jquery-rails'

READ ME通りに追記します。って、バージョンが書かれていない。。。案の定このままではbundle installできませんでした。なのでググって最新バージョンを追記。

gem `jquery-rails', '4.3.1'

そしてbundle installします。

7. /app/app/assets/javascripts/application.js

READ MEによりますれば、上記のファイルに以下を追加とあります。

//= require jquery3
//= require popper
//= require bootstrap-sprockets

位置は指定がないのでとりあえず最後尾に。

以上。。。かな。

動作確認

bootstrap4で使われてるクラスをhome.html.erbに追加してみます。例えば。

<a class="btn btn-primary" href="#">MORE PROFILE</a>

うまくいきましたー。

f:id:koyacch:20180126164813p:plain

デベロッパーツールでも結果を確認できました。良かった。

f:id:koyacch:20180126165111p:plain

さいごに

例によってGithubと公開中のherokuを貼り付けておきます。

github.com

Home | MyResume

次回は大まかに、ワイヤーに沿って多少のスタイリングをします。

みんな大好き？RailsTutorial

railstutorial.jp

はじめに

僕の基本スペック

売り上げは？

業務内容は？

新しいことにはトライした？

メンタルとか心構えとか。

かぞく。

はじめに

工程

1. WordPress powered by BitNami サービスを起動。

2. BitNami AMIをSSH接続できるようにする。

1. Pytonのインストール

2. Node.jsのインストール

3. AWS Cloud9のSSHキーを貼り付け

4. AWS Cloud9の設定

補足

最後に。

はじめに

工程

1. EC2インスタンス の準備・環境整備。

2. AWS Cloud9からSSH接続する。

3. AWS Cloud9の環境構築を完了させる。

4. IDE越しにインスタンスのLAMP環境を整備する。

5. AWS Cloud9の環境設定を変更し、作業ディレクトリだけを見えるようにする。

6. WP-CLIをインストールし、WordPressを一つインストールしてみる。

7. プラグインインストールなどができるよう所有者を変更する。

8.そのほか

さいごに。

はじめに

工程

1. /app/app/views/static_pages/home.html.erb のHTMLを確認

2. 具体的なimgが入ってないと雰囲気が掴みづらいのでダミー画像を入れます。にゃー。

3. ヒーローイメージをBootstrap4、jumbotronでスタイリング。

4. SCSSで調整する。

終わり

はじめに

工程

1. 作りたいデザイン。

2. /app/app/views/layouts内のパーシャル、_header.html.erbの編集。

3. Bootstrap4のヘッダーサンプルの確認

4. 微調整

1. レイアウトのためのブロック要素を追加。

2. h1がつくる不必要なmarginを消し上の余白を作る。

3. カラーリング

1. /app/app/assets/stylesheets内に_bootstrap-custom.scssを作成

2. 下記のコードをコピぺ。

3. /app/app/assets/stylesheets/application.scssのimportを修正。

終わり

はじめに。

工程

1. 工程を確認する。

2. sprockets-rails のバージョン確認

3.Gemfileに追記、bundle installする。

4. /app/app/assets/stylesheets/application.css を、scssに変更する。

5. /app/app/assets/stylesheets/application.scss 内の「*= require」「*= require_tree」を全て削除。

6. /app/app/assets/stylesheets/application.scss 内に「@import "bootstrap";」を追記する。

6. jQueryのgemをGemfileに追記、bundle installする。

7. /app/app/assets/javascripts/application.js

動作確認

さいごに

1. EC2インスタンスの準備・環境整備。

5. /app/app/assets/stylesheets/application.scss 内の「= require」「= require_tree」を全て削除。