読者です 読者をやめる 読者になる 読者になる

「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

サイドバーを縦だけ固定するCSS

レスポンシブのサイドバー固定をCSSのみで実装する

久しぶりのCSSネタ。

サイドバーをfixedで横に固定したいときが多くあります。そのとき問題なのが、position:fixedの起点がブラウザの端になってしまうこと。

通常のサイトだと単純にfixedで問題ないのですが、レスポンシブのサイトだとブラウザ起点のfixedが恨めしい時が多くあります。

そんな時、親要素を起点にfixedしてくれたらいいのになと思っていたら、こんな方法がありました。

JSとかjQueryでもいいのでしょうが、CSSだけで対応できたら楽チンですし動きも軽いです。

HTMLはなんの変哲もありません。 

縦の動きだけに追従するサイドバー

続いてCSS

「position:fixedの起点を親要素にするCSS」のCSS

仕組み

このCSSのポイントは、positionのtopやleftなどを指定せずに、marginで位置を調整すること。fixedとabsoluteはtopやleftを指定せずにかけた場合は親要素の左上が起点になるんですね。そこで、marginで位置を指定してあげて完成!

 

WordPressの仕組みを興味ない人にざっくり伝える。

今、WordPressのテーマ作成を業務で行なっているのだけど、細かく書くべき備忘録がたくさん溜まっている。全てを書くのはいつになるやら、という感じ。

なので、まずはWordPress全体の仕組みについて、私なりの解釈を書いておきたい。

意外に、WordPressがどういった仕組みで動いているのかをざっくり書いてくれている記事は少ない気がするので。

WordPressとはなんなのか?

私的には「フレームワークの一つである」と考えた方が良いと思ってます。実際にWordPressのテーマ作りを行なってみた結果、意外にPHPの根本的知識やプログラミング的素養は(ほとんど)必要なかったことがこの答えに対しての理由です。

WordPress関数という便利な機能がセットになっていて、「お作法」を覚えれば一定レベルのものを作ることができる、というのは非常にフレームワーク的だなと思います。

なので、WordPressってなに?と言われたら、主にブログ用なシステムのフレームワークですと答えます。

なんとなく仕組みを理解する

WordPressが実はフレームワークだとして、それでも動作の仕組みが気になるものです。文章だけでは解説が難しいので簡単な図を書きます。

f:id:pochiweb:20170506233959j:plain

WordPressサイトの表示の仕組み

WordPressにおいて、記事はテキストデータとしてDBに保管されており、画像や動画などのデータはただデータとしてサーバーに保存されています。

これらをウェブサイトとして表示するためにはHTMLが必要になりますが、その雛形となるのがsingle.phpやpage.phpなどのテンプレートファイルです。

記事投稿から閲覧の流れ

どっかからふざけるなと声が飛んできそうなざっくり具合で説明すると、WordPressはこんな感じで動いている。

  1. 記事が投稿される

  2. URL、記事本文と画像など各データとパスがデータベースに記録される

  3. URLから、どのテンプレートに当てはめるべきかを判別する
  4. アクセスのあったURLに関連するデータをテンプレートに当てはめて表示する

WordPressでサイトを作るとはどういう事か?

WordPressでサイトを作る時には、どういった情報分類が必要か?デザインパターンをいくつ作るのか?の整理が重要になってくる。

具体的な問いとしては、過去記事一覧が必要か?カテゴリ毎のメニューが必要か?などがあげられるけれど、問いに対してイエスが増えるたびにテンプレートを増やす可能性も増えていくから。

なので、WordPressで使われるテンプレートをこれまた簡単に紹介しておく。

代表的なテンプレートタイプ

front-page.php

サイトのトップページとして使用するテンプレート。

page.php

固定ページに使用されるテンプレート。single.phpと違い時系列を持たないので、archive.phpに当たるテンプレートを持たない。

single.php

WordPressには「投稿ページ」と「固定ページ」がある。single.phpは投稿ページのためのテンプレート。archive.phpへ、時系列を持って表示させることができる。

archive.php

single.phpがブログの投稿だとして、そのindexページとも言えるページのテンプレート。タイトルだけ出力するのか?サムネイルも表示するのか?その辺りを設定していくことが多い。

テンプレート階層とは?

WordPressは要求されたデータをどのテンプレートに当てはめるべきか?という判断を、各テンプレートへ「優先度」をつけることで自動化しています。それが「テンプレート階層」という言葉の意味するところです。

少し例えを出すと、

ここでは紹介しませんでしたが、category.phpというテンプレートタイプも存在します。

カテゴリーの過去記事を一覧で見たい、というリクエストがあれば、まずはこのcategory.phpのテンプレートを探し、なければarchive.phpで代用する、というようなことをWordPressのコアにおいてプログラムされているのです。

 

さて、結構な量になってきたのでこの辺で終わります。

 

WE Projet 4月の振り返り

約一ヶ月ぶりの投稿となってしまった。

最初から言い訳になってしまうのだけど、このひと月は業務外の勉強時間を確保できていない。そのため、勉強したことをブログを書くことは時間的に厳しく、振り返り記事を書くのは精神的に厳しく...。絵に描いたような悪循環だ。

そんな状態でも振り返りを書くのは、このままこの自分への決め事を無くしてしまうのは気がひけるから、というのが大きい。

正直、業務時間以外に勉強するのは中々厳しいことだ。だけど、だからこそ価値があるし、先日36歳になったというのにまだこの業界では二年生だというそんな状態で「自ら学ぶ姿勢」を無くしてしまったらこの先戦い続けることなんて到底不可能だとも思う。

だから、振り返りたくもないこのひと月を振り返る。

というわけで実数値を計測する。

4月の実績値は?

Activity Type Duration Percent
読書 06:42 0.9
勉強 06:28 0.9
BLOG 00:40 0.1

4月の業務時間が20で、1日あたりの規定労働時間が7時間なので140時間。

28時間が目標時間。実際が14時間弱。

ひどい数値だ。

 ただし、積み上げているものはある

そもそもなぜいつものように時間を作れていないのか?ということにも理由はあって、業務において大きなチャレンジをしている、というのがそれに当たる。

当然具体的には書けないのだけど、自分が今年の目標としている「WordPressへの深い理解と構築技術を身につける」ことに繋がっている。

自然、移動中や空き時間に学ぶこともそのことになってしまう。

だから、4月と5月に関してはまあ、多めに見るべきなのかもしれない。

6月には今の案件は終わって、一回り大きく成長しているだろうから。

 

We Project 3月の振り返り

We Project 3月の振り返り

4月も4日となり、少し遅れてしまったけど3月の振り返りを書いておきたい。早速データを。

aTimeLogger Report

Time Entries

 

Activity TypeDurationPercent
Total743:59100.0%
勉強 22:48 3.1
勉強 22:48 3.1
読書 05:09 0.7
BLOG 03:29 0.5

3月の基本業務時間は22X7=154X0.2で30.8時間。

 

勉強(主に技術書を使った自習)が22時間48分

読書(仕事に関わる読書)が5時間9分

当ブログの更新が3時間29扮

 

合計:31時間26分

 

かなりぎりぎり・・。もう少し仕事を効率化して自分の時間を作るようにしないと!

3月にやっていたこと

技術書を使った勉強

なかなか思うように進められていなくって、一冊にどんだけかかってるんだよ!と我ながら思うのだけど、3月頭からメインに勉強している技術書はこちら。

 

よくわかるPHPの教科書

よくわかるPHPの教科書

 

 この本の一番の特徴というか、いいところは一番最初の章なんじゃないでしょうか。「プログラムってなんだ?」を、紙とペン、消しゴムを使ったワークを通して理解させてくれます。

仕事の中で学んだこと

他部署から依頼されたサーバー構築を何やかやと3月いっぱいかけてやっていました。相当時間とられたけど、すごく勉強になった。

実はこのサーバー構築、一度作り終わったものをクラッシュさせてしまう、というトラブルに見舞われました。

しかし、このブログで備忘録を残しておいたことで、1か月かかっていたものが半日で完了。カンペを用意しておくって大事だなあ。セキュリティ回りがまだ書けていないのだけど、流れは下の二つにまとめてあるので時間を見つけて書いていきたい。

 

pochiweb.hatenablog.com

 

 

pochiweb.hatenablog.com

 

そのほか

photoshop

デザインはほんとダメでデザイン系ツールも全然使えないんだけど、photoshopチュートリアルを使って少しづつ勉強を始めたところ。画像の軽微な修正や、色味の調整程度でデザイナーさんに頼むのも気が引けるし、自分でできれば全体としての仕事スピードが上がっていく。いいことずくめだ。

adobeXD

photoshopの勉強の前に、adobeXDを使って簡単なプロトタイプ作成を試してみたりもした。今後、ディレクター業務を行うこともあるだろうし、その時は「みんなに優しいワイヤーフレーム」を書きたいと思っているから。

以上、3月のご報告でした。

 

Webサーバーの仕組みをざっくりまとめておく

初めてWebサーバを構築するという経験をしたことで、いろいろと分かった部分があったのでまとめておきます。
今後、周囲にwebサーバーってなんなのか?を説明しなければならないことも有るでしょうし。

聞ける相手がいない中での構築はそれなりに大変でしたが、得るものも大きかったです。

なお、この記事の内容は私の個人的解釈ですので、正解は職場の先輩、書籍やgoogle先生などに聞いてください。

Webサーバーを構成するハードウェア

サーバーマシンと呼ばれたりするので、何か専用機器を思い浮かべがちなんですけど実はほとんど普通のPCと同じです。
普段私たちが使うPCと違う点は、記憶容量と処理速度に特化している点です。

一般家庭のPCは色々と用途が色々とありますよね。

  • 写真や動画を加工したり保存したりする
  • 音楽を聴く、編集する
  • オフィスソフトを使う
  • ネットサーフィン

など、いろいろな事に使われます。
すると当然、いろいろな能力がバランスよく使えるようにしなければいけません。
ハードウェアで言えば、スピーカーだってディスプレイだって必要です。

反対に、サーバーの役割は求められた処理をしてファイルを返送する、この一点です。
なので、能力値の大半を記憶容量、処理速度に割り当てることが可能になります。
ディスプレイもスピーカーもいりません。

 

実際は一般用途のPCでも問題なくサーバーとして利用可能です。
ここ数年で発売されたものであれば十分な記憶容量がありますし、処理速度も上がっているので、相当なアクセスや重い処理をするプログラムを仕込んでいるのでなければ実用可能です。

 

今回、業務で構築したサーバも余り物の事務PCです。

まとめ=サーバーとPCのハードウェアに違いはない。

 

Webサーバーのソフトウェア

サーバー管理者などになる予定がないのなら、ハードウェアは乱暴に言ってしまえば気にしなくていい程度の話です。

反対に、ソフト面については知っておくと結構役に立つのではないかと思います。
バックエンドの処理を担当する場合は特にです。
知っておくとさまざまな面で理解が進みやすくなると思います。

まずはLinix

サーバーに少しでも興味を持った時に必ず聞く単語がこの「Linux」。
このLinuxはなんなのかという話をこれまた乱暴に言ってしまうと、コンピューター本体とOSの間に立ってさまざまな処理を引き受けてくれるプログラムです。

そういった存在全般をカーネルといいます。カーネルwindowsでもMacでも搭載されています。
カーネルとPCについてはざっくりとこんなイメージになります。

  1. キーボード押下
  2. Linuxが感知
  3. LinuxからOSへ通知
  4. 通知内容をOSが感知
  5. OSがLinuxに向けて、ディスプレイの表示内容を変更するよう依頼

 

まとめ=linuxカーネルカーネルは入出力の受付や連絡、記録をする。

次にOS。

続いて、OSのお話。

カーネルがコンピューター本体との橋渡しをしてくれるものとするならば、OSは人とカーネルの間に立って様々な便利なことを行なってくれるソフトでしょうか。

フォルダを作成するケースでいうと、このような処理が行われています。

  1.  OSにて「フォルダを作成」を入力
  2. OSからカーネルに対して、フォルダ名や権限などの情報をセットに、記録を依頼
  3. カーネルで、メモリやハードディスクを使用して領域確保と記録を実行
  4. 作成されたフォルダを、OSが見た目に反映

CentOSDebianUbuntuなどは全てLinuxカーネルを利用するOSです。

そして、LAMP

LAMPはそれぞれどういった関係性なのか?すっとわからなかったのですが、今回サーバーについて学んだおかげで少し理解することができました。

LAMPとはLinuxApacheMySQLPHPをインストールしたもで、それぞれは独立したソフトウェアなんだけど、相互にやり取りができるようになっています。

データベースを使うものであれば処理の流れはこんな感じになります。

  1. ApacheがHTTPリクエストを受付け
  2. PHPが使用されているようであればPHPへ処理を依頼
  3. SQLが使用されていれば、PHPからデータベースへ処理を依頼
  4. データベースで処理したデータをPHPへ返送
  5. PHPはデータベースから受け取った情報を反映してHTMLをApacheへファイルを返送

webサーバーって何だ?と問われれば、こんな感じに答えるでしょうか。

今回は結構長々と書いてしまいましたが、ご指摘があれば是非お願い致します!

それでは。

【2017/3/25更新】CentOSのインストールから、wordpressをインストールするまでのメモ

サーバーに遊ばれる一ヶ月

今月は本当にサーバー周りの勉強に終始する一ヶ月でした。

月初のうちは、ドットインストールの学習環境作りのために。

半ばから終わりにかけて、(というか継続中だけど)業務で使うためのwordpressサーバーの構築に。

今回も色々なサイトに助けられて、なんとか形になりできそうです。

というわけで、サーバー構築のためのメモ。

 

仕様的なもの

今回、業務で作るサーバーはこんな感じでした。

マシン:余り物のwindows機(32bit)

動作させるもの:Wordpress

外部のクライアントが使用する

 

経緯

まずサーバー構築の本を買ってみたのですが、

CentOS7を対象にした本で、OSインストールからつまづいてしまいました。

 

USBにlinuxを入れて、インストールする

社内にCentOS32bitのインストールディスクもない、ということで

こちらのサイトを参考に BootalbeUSBを作るところからスタート。 

最初は、色々とソフトとか試していたのですが、コマンドでやるのが結局一番簡単でした。

 

2017/3/24追記

BIOSでの立ち上げ方法のメモも残しておきます。

ほとんどのPCは起動の際にF2を押しておけばOKです。

 

marmotte.pyrites.jp

 

CentOSの各種設定

その後、CentOSの各種初期設定はこちらを参考に。

依存関係って本当にややこしいし、理解しないまま進めたせいでうまく動作しなかったりしました。

最後はここの設定に従っていけばとりあえずOKとなりましたが、いずれもっと深掘りして学びたいなと思っています。

www.obenri.com

 

LAMPの設定

さらに、lampの設定ではこちらのサイトにお世話になりました。

webkaru.net

 

これで、とりあえずLAMP環境はできました。

しかし、この状態だと結構古い環境ですし、メールサーバーの設定はされていないので、まだまだ不完全です。

例えばmbstringがないとか。それについては下記の手順にて。

qiita.com

メール、セキュリティに関する追記と、詳細の追記を順次行なっていきたいと思っています。

postfix(メールサーバー)の設定

wordpressを使用するにあたって、ログイン通知などでメールを飛ばすこともあるのでメールサーバーの設定も行います。

今回は送信だけできればOKだったのでSMTPの設定のみ。基本的な設定はこちらの記事を参考にすれば簡単に終わリます。

blog.jicoman.info

unable to look up public/pickup: No such file or directoryってエラーはpostfixが機動していないときに出ます。基本的なことだけど、忘れがち。。

SELinuxの設定変更

上記の記事だと、コマンドラインからのメール送信は成功しますが、wordpressからのメール送信はできないはずです。そこで、SELinuxの設定を変更してWordpressからのメール送信を許可します。

下記の記事が参考になります。

www.crystalsnowman.com

 

SSLの設定 

続いて、SSLを設定していきます。認証キーとかも初めて触れましたが、先輩たちのシェア精神によって簡単に設定できました。ありがたい。

 

www.server-world.info

 

WE Project 2月の振り返り

WE Projectの振り返り。

業務時間の20%に当たる時間、自習するという本プロジェクトですが、今月は達成状況がとてもよろしくありませんでした。

というのも、ほぼ未経験の「Wordpressが動作するサーバーの構築」というタスクが突然降ってきて、これに忙殺されていたからです。

朝から晩まで、CentOSのことやらコマンドのことなどを勉強する日々。

メールサーバの設定ができれば動作に関しては一通り終了かとは思いますが、セキュリティとかももう少ししっかり理解しなければならないし、前途は多難です。

 

そんなこんなで、少し早いのですが2月のWEProjectを振り返ります。

aTimeLogger Report

Time Entries

Activity TypeDurationPercent
読書 32:47 4.9
勉強 07:20 1.1
BLOG 02:08 0.3

 

今月の規定労働時間は、20日X7時間で140時間。

20%で28時間なので、一応達成しているようです。

しかし、身になっていないなあ、と、とても感じます。

 

もっと集中して勉強する環境を作るのがポイントかもしれない。

 

オフィスだとどうしても、話しかけられたりして自分の勉強に集中しきるのは難しいし、それは家でも同じだし。早朝のカフェが一番かもしれないですね。