メールでのお問い合わせはこちら、お問い合わせフォーム

2019年2月のスタッフブログ

1

同じはずが違う結果になる 

blog190228.jpg

widthとmax-widthはどちらを100%にしても同じ...


今回はスタイルシートのお話です。
.sbox1 {
 width:1000px;
 max-width:100%;
}

.sbox2 {
 max-width:1000px;
 width:100%;
}
は同じ結果になるでしょうか。
それとも違う結果になるでしょうか。

これには既に考察された方がいらっしゃるので、記事を紹介します。

[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか
https://coliss.com/articles/build-websites/operation/css/width-and-max-width.html

つまり、「同じ結果になる」が回答となります。

では、以下のサンプルをご覧ください。
サンプルを見る

ブラウザの幅を変えてみると、どう見えるでしょう。
 「特に変わった所は無いよ?」
という方も多くいらっしゃるでしょうが、中には
 「下はブラウザの幅に合わせて横幅が縮むが、上は固定されている。」
 「上は固定デザインで、下側はレスポンシブデザインの例ですね。」
となる方もいらっしゃるかと思います。
では、そのサンプルのソースをご覧ください。

実は最初に提示した2つのCSSに違いがあるのかどうかというお話だったのです。

Google Chrome で見たとき、その「変わった現象」は発生します。
(確認したときのバージョンは 71と72 です。他のバージョンでは判りません)
確認した範囲では Edge , IE11 , Firefox ,ios Safari では発生しません。

実は、table を使わず、div でやった場合はこの現象は発生しません。
サンプルを見る

サンプルを見てピンとくる方もいらっしゃるかもしれませんが、これは問い合わせフォームなどでよく使われる「表」です。
この現象を発見したのも、問い合わせフォームを作って見栄えをチェックしていたときでした。

今回は@mediaによるブレークポイントを使わない指定方法で起きた現象でしたが、スタイルの指定方法は多種多様なので、どんな所でどんな現象が出るかは判りません。
動作チェックは念入りに行うようにしましょう。
「(事実上)IEがなくなったから、モダンブラウザは皆同じで、MSと違ってヘンな動きはしないから、もうチェックなんてしなくて良い」
などど思ったら、大間違いというお話でした。


おまけ1 google検索


「同じはずが違う結果になる」はgoogle検索でも発生します。
複数のキーワードで検索する事もよくあると思いますが、キーワードの順番を変えると、結果も変わります。
例として「札幌 ホームページ作成」と「ホームページ作成 札幌」を検索してみると結果が異なるようです。
なぜそんなことになるのか。
ネットでは語順の違いから意味づけを推測しているのではないかという意見も見かけます。


おまけ2 ゲーム


似たような話に「同じだと思ったら全く違う」というものがあります。

A.○○を題材にしたゲームを作ろうと準備を進めていたら、**という技術を使うと効果的だと判った
B.**という技術が話題なので、コレを使ったら○○を題材にしたゲームが作れると考えた

どちらも出来上がるのは一見すると「○○を題材にして**という技術を使った」ゲームですが、そのデキは著しく違うことになります。
前者(A)は傑作になる可能性がありますが、後者(B)は100%駄作です。
この場合、順番の違いは重視している要素の違いや、準備にかけた時間の違いとなって現れます。
Aはゲームデザイナー主導で内容を重視し、長期間にわたって準備をした内容に対し、Bは営業やプロデューサー、またはプログラマー主導で話題性や技術的挑戦を重視し、内容は思い付きレベルなわけです。
内容を軽視したゲームは、当然残念な内容の面白くないゲームになります。

フルスクラッチで、ウェブサイトを効率よく作成する方法

今、クライアントから受注をして、会員サイトの構築をしていこうという構想を社長と一緒に考えておりますが、
フルスクラッチで、作ることを要望されておりまして、どのようにするのが一番効率が良いかと考えております。

cloud-service-platform.png

Amazon EC2や、Heroku、Google Compute Engineなど、クラウドサービスの仮想マシン上であれば、
Railsとか、Laravelなどのフレームワークを入れて、地道に作っていてけば良いのですが、
恐らく、共有のレンタルサーバーですと、上記のようなフレームワークを動かすことができないため、
それに代わる、フレームワークもしくは改造可能なCMSを探しておりました。

そこで見つかったのが、簡易フレームワークである、levis: PHP Frameworkと、
作品公開サイト向けコンテンツ管理システム(CMS)freo。

どちらもPHP-LABOというフリーPHPスクリプト配布&改造&入門サイトを運営してた「ないと」さんが、
作り上げたシステムです。

levis: PHP Frameworkについて

levis: PHP Frameworkは、こちらで使わせていただく立場で、えらそうに聞こえると申し訳ないのですが、
PHPで作られたフレームワークもどきです。

実際にフレームワークもどきで検索して出てきました。

しかしながら、その構築の思想は、Cake PHPというとても有名なフレームワークに影響を受けていて、
かなりしっかりしたMVC(Model、View、Controller)モデルになっています。

これなら、無駄を少なくして、とても効率的にシステムを構築することができそうです。

levis: PHP Frameworkのサイトはこちら
http://refirio.org/levis/

これでしっかりとした情報管理のシステムを有するホームページが制作できそうです。

freo: CMSについて

そして、上記を調べているうちにリンクを辿ってたどりついたのが、コンテンツ管理システム(CMS) freoです。

freo自体は、PHP5と、テンプレートエンジンSmarty2で作られていて、この仕様を見たとき、
PHP5はもうライフサイクルを終えそうだし、Smartyもバージョン2だと将来性が無いな~と考えておりました。

しかしながら調べていく中で、Smartyもバージョン2.6.3あたりから、PHP7に対応していて、
freo自体も公式的にうたってはいませんが、最新バージョンでPHP7に対応しているというので、
もしかしたら、これ使えるかも?ということで、パソコンのXAMMPにシステムを入れてみました。

サポートサイトに書いてあるのですが、
php.iniに"error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED"を入れれば
実際にPHP7で動作することを確認しました。

Apache 2.4.37 + MariaDB 10.1.37 + PHP 7.3.1という環境です。

創作サイト向けコンテンツ管理システム freo(フレオ)
http://freo.jp/

16.jpg

更に、いろいろと見ていくと、マルチユーザー対応になっていたり、
更新のためのフォーム項目も自身で追加できたりと、かなり優秀です。
またコミュニティーもできていて、サイトなどで、ノウハウもかなり公開されていて、
悩んだときにも、解決方法を見つけられそうです。

ということで、現在、システムのベースとして
levis: PHP Frameworkとコンテンツ管理システム(CMS) freo
が候補にあがっています。

そこではっと考えたのですが、PHP-LABOのないとさんのシステムは、GPLで公開されています。

GPLとは、General Public Licenseの略で、
「自己責任で使ってください」
「著作権の表示は消さないでください」
「複製・改変・再配布・販売等は自由にやってOK」
「再配布する物もGPLライセンスにしなさい」
ということが謳われています。

つまり自由に使うことができて、それでお金をとっても結構なんですが、
引っかかるのは、再配布する物もGPLライセンスにしなさいというところです。

自分たちがこのGPLのライセンスに乗っかってシステムを構築した時に、
それを他の人達にも、GPLで公開しないといけないのか? というところが
気になって、GPLについて少し調べました。

結構長くなってきたので、GPLライセンスについては、次回紹介させていただきます。

1