【2017/3/25更新】CentOSのインストールから、wordpressをインストールするまでのメモ
サーバーに遊ばれる一ヶ月
今月は本当にサーバー周りの勉強に終始する一ヶ月でした。
月初のうちは、ドットインストールの学習環境作りのために。
半ばから終わりにかけて、（というか継続中だけど）業務で使うためのwordpressサーバーの構築に。
今回も色々なサイトに助けられて、なんとか形になりできそうです。
というわけで、サーバー構築のためのメモ。
仕様的なもの
今回、業務で作るサーバーはこんな感じでした。
マシン：余り物のwindows機(32bit)
動作させるもの：Wordpress
外部のクライアントが使用する
経緯
まずサーバー構築の本を買ってみたのですが、
CentOS7を対象にした本で、OSインストールからつまづいてしまいました。
USBにlinuxを入れて、インストールする
社内にCentOS32bitのインストールディスクもない、ということで
こちらのサイトを参考に BootalbeUSBを作るところからスタート。
最初は、色々とソフトとか試していたのですが、コマンドでやるのが結局一番簡単でした。
2017/3/24追記
BIOSでの立ち上げ方法のメモも残しておきます。
ほとんどのPCは起動の際にF2を押しておけばOKです。
CentOSの各種設定
その後、CentOSの各種初期設定はこちらを参考に。
依存関係って本当にややこしいし、理解しないまま進めたせいでうまく動作しなかったりしました。
最後はここの設定に従っていけばとりあえずOKとなりましたが、いずれもっと深掘りして学びたいなと思っています。
LAMPの設定
さらに、lampの設定ではこちらのサイトにお世話になりました。
これで、とりあえずLAMP環境はできました。
しかし、この状態だと結構古い環境ですし、メールサーバーの設定はされていないので、まだまだ不完全です。
例えばmbstringがないとか。それについては下記の手順にて。
メール、セキュリティに関する追記と、詳細の追記を順次行なっていきたいと思っています。
postfix（メールサーバー）の設定
wordpressを使用するにあたって、ログイン通知などでメールを飛ばすこともあるのでメールサーバーの設定も行います。
今回は送信だけできればOKだったのでSMTPの設定のみ。基本的な設定はこちらの記事を参考にすれば簡単に終わリます。
unable to look up public/pickup: No such file or directoryってエラーはpostfixが機動していないときに出ます。基本的なことだけど、忘れがち。。
SELinuxの設定変更
上記の記事だと、コマンドラインからのメール送信は成功しますが、wordpressからのメール送信はできないはずです。そこで、SELinuxの設定を変更してWordpressからのメール送信を許可します。
下記の記事が参考になります。
SSLの設定
続いて、SSLを設定していきます。認証キーとかも初めて触れましたが、先輩たちのシェア精神によって簡単に設定できました。ありがたい。
追記１：Postfixを使ってメール送信ができるようにする
参考サイト
SELinuxの設定変更をしないと動きません。
追記２：SSLに対応する
参考サイト
設定手順
証明書のこと
phpMyadminの導入
WE Project 2月の振り返り
WE Projectの振り返り。
業務時間の20%に当たる時間、自習するという本プロジェクトですが、今月は達成状況がとてもよろしくありませんでした。
というのも、ほぼ未経験の「Wordpressが動作するサーバーの構築」というタスクが突然降ってきて、これに忙殺されていたからです。
朝から晩まで、CentOSのことやらコマンドのことなどを勉強する日々。
メールサーバの設定ができれば動作に関しては一通り終了かとは思いますが、セキュリティとかももう少ししっかり理解しなければならないし、前途は多難です。
そんなこんなで、少し早いのですが2月のWEProjectを振り返ります。
Time Entries
| Activity Type | Duration | Percent |
|---|---|---|
| 読書 | 32:47 | 4.9 |
| 勉強 | 07:20 | 1.1 |
| BLOG | 02:08 | 0.3 |
今月の規定労働時間は、20日X7時間で140時間。
20%で28時間なので、一応達成しているようです。
しかし、身になっていないなあ、と、とても感じます。
もっと集中して勉強する環境を作るのがポイントかもしれない。
オフィスだとどうしても、話しかけられたりして自分の勉強に集中しきるのは難しいし、それは家でも同じだし。早朝のカフェが一番かもしれないですね。
table関連のレスポンシブ対応方法メモ
コーポレートサイトを作る場合、<table>タグを非常に高い確率で使用します。
普通に使う分には特に問題はないのですが、レスポンシブ対応のケースでは融通がきかなくて困っていました。
例えば、
- PC表示だと縦のセル連結するけど、スマホではしない
- でも、テキストはちゃんと上下中央配置にしたい
- テキストの行数は結構バラバラ
こんな条件が揃うと通常の<table>だと厳しいというか、CSSが肥大化してしまいがちです。
後々の管理のためにももっとスッキリさせたいですし、そもそも対応できるのか？という疑問から、今回tableについて調べました。すると、超絶便利なものが有るではないですか。
今までtableタグしか知らなくて驚愕。
要素がtableタグ風に振る舞うdisplayプロパティ
CSSのdisplayプロパティを使って、各要素をtableでマークアップされた様に表示が可能です。簡単なメモから。（間違いのご指摘は尻尾を振って喜びます。）
:table
内包する要素のtable系プロパティを有効にします。
:table-row
tableタグにおける<tr>のように振る舞います。
:table-cell
tableタグにおける<td>のように振る舞います。のように振る舞います。
併せて覚えておきたい display関連のプロパティ
:inline-block
テーブル(行)の中でセルを左右に分けたい時に重宝しました。
例えば「企業の沿革」ページなどよくある、
文章だけの行もあれば、文章と画像が入る行もあるというケース。
display:table-cellだとrowspanやcollspanなどが使用できないので、そのままだと縦に並んでしまうのですが、table-cellの中でinline-blockを上手く使うといい感じに処理ができます。
その他、テーブルで便利なCSS
vertical-align
なんと言ってもこれです。
というか、display:tableを利用する最大のメリットはこのvertical-alignが使えることかもしれません。
display:tableとdisplay:blockを使っていくことでレスポンシブでのテーブル対応も簡単になりました。次回案件からは悩まずに使っていこうと思います。
ただし、「セマンティックマークアップ」という概念においては反することなのかなぁとも思うので、この辺りは引き続き考えていきたい部分です。
サンプルコード
We Project 1月の振り返り
2月ももう6日目となってしまうのですが、1月の振り返りをしたいと思います。
というのも、
- 1月の終盤から約一週間の間、異常とも言える疲労感に襲われてペースダウン
- 慣れからくるものか、エネルギーが下がってきている
という状態になっており、経験上こういう時は、実際に自分が積み上げてきたものを振り返るのが一番だと思うためです。
振り返ることで自分の行動を客観視し、それが「ああ。これだけやれば疲れも出るよね」となり、「休まなきゃ」につながる。
ただただ強迫観念的に「やらなきゃ・・・。やらなきゃ・・。」と思いながら寝るのと、自分の行動量を見た上で、体や心と相談した結果として集中して休むのでは効果が全く異なるのではないかと思うのです。
前置きはこのくらいにして、1月のデータを公開します。
1月の仕事、勉強時間
| Activity Type | Duration | Percent |
|---|---|---|
| Total | 671:59 | 100.0% |
| 仕事 | 193:14 | 28.8 |
| 勉強 | 22:43 | 3.4 |
| 勉強 | 22:43 | 3.4 |
| 読書 | 16:12 | 2.4 |
| BLOG | 02:40 | 0.4 |
| 勉強+仕事 | 00:57 | 0.1 |
| 勉強+仕事 | 00:57 | 0.1 |
| その他 | 436:11 | 64.9 |
このWe Project2020は、仕事時間の 20%を勉強の時間として追加するのが第一目標なのですが、
(さすがに残業時間まで含めた20%だとハードルが高すぎるな、と今感じました。)
実態はさておき、今月は出勤日数から計算すると152時間の業務時間です。
そこから計算する20%は30時間30分。
この時間を学習に当てていればとりあえずの目標は達成になります。
- 勉強（技術書の写経）22時間43分
- 読書（関連書籍の読み込み）16時間12分
- BLOG（当ブログの執筆）2時間40分
- 「勉強+仕事」はおそらく計測ミスのため除外
合計：41時間35分
時間的には余裕のクリア！うん。頑張った。
1月にやったこと
1月に取り組んだのは主にjQueryの基礎固めです。
写経はこちらで。
読み物としてはこちらを。
「作りながら学ぶ〜」を１冊目に消化しました。解説は非常に丁寧ですし、実際に動くものを作っていくので楽しみながら覚えていくことができます。実戦でよく使うものも多く、非常にお得感の強い一冊でした。
ただ、時々出てくる「これ何？」に対しての答えが非常に探しにくいです。
例えば先日記事にした箇所とか、あとは引数として渡す(event)とはなんなのか？とか。
反対に「jQuery入門道場」は動くものを作るタイプではなくて、理屈に特化した本でした。「作りながら学ぶ〜」で端折られていた辺りが非常に細かく解説されていて、この組み合わせはすごく良かったなと思っています。安いし。というか、unlimitedなら無料です。
というわけで、技術書を２冊消化し、40時間を超える勉強をしたということで。
少し休むのは当然ということにして今月も頑張ります。
CSSで要素を上下入れ替える方法。[レシポンシブ対応]
要素を上下で入れ替える方法。レスポンシブにも対応。
CSSのpositioを使った要素の上下入れ替えってよくやりますよね？
にもかかわらずいつも忘れてしまうので、コードの理解と保存のために記しておきます。
やりたいこと
こんな状態をCSSでこうしたい。
これを行います。
HTML
HTML_positionで要素の上下入れ替え（レスポンシブ）
CSS
CSS_positionで要素の上下入れ替え（レスポンシブ）
手順
- 全体を包むボックスを用意します。
今回のコードだと<section>です。
ここにposition:relativeを指定して、<section>内の左上をこのボックス内でのpositionの起点とします。
また、同様の要素が続く場合は特に、marginで各要素との間隔を調整します。 - 見出しと文章を含むボックスの用意をして、必要な要素を書き込みます。
- <img＞を記述します。
- css のpositionで入れ替えを設定する
入れ替えの理屈
下に移したい<div>にposition:absoluteを指定して、任意の場所に指定します。
今回は<div>を<img>の下に配置しました。
absoluteを使うと、後続の要素はabsoluteが指定された要素の高さ分詰まってきます。floating-Boxと考え方は同様です。
<div>に対して、positionをbottom:0;にすることで、imgの下に配置して、padding-topを%で指定することでボックスの高さが変わることに対応します。
配置したい位置次第でこの数値は変更します。
この<section>を複数使用する場合は、sectionに対してmarginを設定します。<div>内の<p>などの高さ次第では、メディアクエリで何段階か指定が必要になります。
残念なあとがき
そもそもこの上下入れ替えは「sectionやarticleタグの直下は見出しタグでなければならない」というvalidationエラーが出ていた為に行なっていました。
しかし、最近ではこのsectionやarticleの直後にimgが有ることに対してエラーを吐かない様なのです。いや、そもそもそんなエラーは存在しなかったのかもしれないんですが。
今回記事を書くにあたりテスト的に色々な並びでバリデータかけてみましたが、不要な様です。
We Project2200 [2017/01/09~01/15]の記録
We Project 2200開始から
1月8日から1週間の記録。
読書に約3時間半、
勉強（写経）に7時間半で
約11時間。
土日がないとやっぱり厳しいな。
Statistics
| Activity Type | Duration | Percent |
|---|---|---|
| Total | 167:59 | 100.0% |
| 仕事 | 41:50 | 24.9 |
| 勉強 | 07:33 | 4.5 |
| 勉強 | 07:33 | 4.5 |
| 読書 | 03:18 | 2.0 |
| 勉強+仕事 | 00:40 | 0.4 |
| 勉強+仕事 | 00:40 | 0.4 |
| その他 | 114:37 | 68.2 |
「作りながら学ぶjQueryデザインの教科書」の非公式な正誤表
「作りながら学ぶjQueryデザインの教科書」のAjaxでハマる時の対処
今年は技術を学び、身につける一年にする。
その一冊めの教材として昨年末から取り組んでいるのがこちら。
ドロップダウンや固定ヘッダー、スライドショー、さらにAjaxなど今風な技術を網羅していて、発行から2年以上たった今でも物凄く使える一冊。
私はjQueryもJSもまともに学んでいなかったのですが比較的スムーズに学習が進んでおり、説明も丁寧で分かりやすいため同じような状況の人にはお勧め。
しかし、これからこの本を手に取る人の為に書いておきたいことがあります。
Ajaxの章でハマる。
多分、多くの人がAjaxの章で躓くのではないかと思います。
いくらコードを見直しても間違いない。でも動かない。
それで2時間程度はハマったでしょうか。
結果としては公式サイトに対策の記載がありました。
端的に言えばサーバーがJSONファイルに対応していないケースがあるので、設定してあげればOKとのこと。すぐに見つけられれば....。
作者のコラムという形で掲載されておりますが、見つけにくいです。
私は写経で動かない場合、
- 再三ソースを見直し
- 「書籍名＋正誤表」で情報を探す
- それでもダメなら動いていない原因や箇所の特定をして、
- 対処をググる
という順序なのですが、皆さんどうなんでしょうか？？
これは正誤表に乗せても良いんじゃない？という意味で、本記事のタイトルを非公式正誤表としました。
We Project2200
Statistics
| Activity Type | Duration | Percent |
|---|---|---|
| Total | 95:59 | 100.0% |
| 仕事 | 20:10 | 21.0 |
| 勉強 | 04:47 | 5.0 |
| 勉強 | 04:47 | 5.0 |
| 読書 | 01:26 | 1.5 |
| その他 | 69:35 | 72.5 |
