delalunaofficedaysのブログ

WORDPRESSとEC CUBEくらいしか触っていないWEBデザイナーの日記とかメモ。

EC CUBE 3 インストールしたのに管理画面がNOT FOUND 404

そんな時は

http://(インストールしたディレクトリ)/index.php/admin/

を試してみよう!

アクセスできるならmod_rewriteが有効になっていません。 根本的な解決方法はこっち

これで管理画面がNOT FOUNDにならないはず!

EC CUBE3 [推奨] APC 拡張モジュールが有効になっていません。

さてEC CUBE3インストール時に出ていた警告の最後の項目。 ” [推奨] APC 拡張モジュールが有効になっていません。” これ有効にしておくと速度がアップすると聞いたのでぜひやってみることに。

[code] sudo apt-get install php-apc [/code]

これでAPCモジュールをインストール

[code] sudo php5enmod mcrypt [/code]

これで有効化。

[code] sudo /etc/init.d/apache2 restart [/code]

apache再起動。 なんとこれであっさり解決しました。

今まで必要だったモジュール関係まとめ

[code] sudo apt-get install php5-curl sudo apt-get install php5-mysql sudo apt-get install php5-mcrypt sudo apt-get install php-apc [/code]

EC CUBE3 [推奨] mcrypt 拡張モジュールが有効になっていません。

これまたEC CUBE3なんだけど[推奨]って書いてあるから無くてもいいかなって思いつつ推奨なんだったら入れてみよう(本番サーバーで入れれるかは知らんけど)。

php.iniを弄ればいいかな?と思ってパスを調べてみたら

/etc/php5/apache2/php.ini

にあるようなので早速チェックしてみる。

[code] ls /etc/php5/apache2/ vi php.ini [/code]

いつものように :set numberで行番号表示して /mcrypt で検索してみると項目はある。

[code] 1813 [mcrypt] 1814 ; For more information about mcrypt settings see http://php.net/mcrypt-module-open 1815 1816 ; Directory where to load mcrypt algorithms 1817 ; Default: Compiled in into libmcrypt (usually /usr/local/lib/libmcrypt) 1818 ;mcrypt.algorithms_dir= 1819 1820 ; Directory where to load mcrypt modes 1821 ; Default: Compiled in into libmcrypt (usually /usr/local/lib/libmcrypt) 1822 ;mcrypt.modes_dir= [/code]

こんな感じで書いてあるけどディレクトリを指定するような形になってるな・・・。 何かインストールする必要があるんだろうか。

通常このパス(/usr/local/lib/libmcrypt)を指定すればオーケーみたいに書いてあるけど /usr/local/lib/ を見てみてもlibmcryptってディレクトリすら無い。

mcript.iniが /etc/php5/mods-available/ にあったので開いてみる。

[code] ; configuration for php MCrypt module extension=mcrypt.so [/code]

とだけ書いてあった。

一体どうしたらいいんだこれ。

mcrypt.soを検索してみると usr/lib/php5/20121212/ にあった。 不思議なディレクトリ名だなこれ。

[code] extension_dir = "usr/lib/php5/20121212/" extension=mcrypt.so [/code]

php.iniに追記して [code] sudo /etc/init.d/apache2 restart [/code]

apache再起動。

見事に「[推奨] mcrypt 拡張モジュールが有効になっていません。」のメッセージが消えました。

Ubuntu14.04にEC CUBE3をインストール時にcURL 拡張モジュールを要求された

EC CUBE3をローカル環境に入れてテーマとか作るぞーって張り切ってインストールしようとしたら cURL 拡張モジュールが必須だけど無いよ。って言われたのでインストール

cURL 拡張モジュールってなんやねんと思って調べてみたら cURL関数を使うためのモジュールって言うことみたいです。 なるほどなるほどということで

[code] sudo apt-get install php5-curl sudo /etc/init.d/apache2 restart [/code]

で解決しました。 よく考えたらPHPのバージョン5だったわ。これ7入れようかな。

【CSS】jQueryを使って可視領域に入ったオブジェクトをふわっと表示する【HTML】

サイトを開いた時にふわっと表示されるのを見たことないでしょうか。 あれがやりたいと思って色々調べてまいりました。

コード見たほうが早いと思うので貼っつけておきます。

[html] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>css-inview</title> <meta name="robots" content="noindex"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="">http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <script type="text/javascript" src="jquery.inview-master/jquery.inview.js"></script> </head> <body> <div class="contents"> <h1>下にスクロールしていくと画像が可視領域に入ります。</h1> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <section class="fade"> <ul> <li class="fade-img"><img src="common/img/01.jpg"></li> <li class="fade-img"><img src="common/img/02.jpg"></li> <li class="fade-img"><img src="common/img/03.jpg"></li> </ul> </section> </div>

<script> $(function() { $(‘.fade-img’).on(‘inview’, function(event, isInView, visiblePartX, visiblePartY) { console.log(isInView); if(isInView){ $(this).stop().addClass(‘fade-stop’); } else{ $(this).stop().removeClass(‘fade-stop’); } }); }); </script> </body> </html> [/html]

[css] @charset "UTF-8"; body{ background-color: #eee; } img { width: 250px; height: auto; } .contents { width: 900px; margin: 0 auto; } ul { list-style-type: none; } .fade { overflow: hidden; } .fade li{ margin: 10px 5px 10px 5px; float: left; transition: 1.5s; }

/ 透明度と移動 / .fade-img{ opacity: 0; transform: translate(0,60px); -webkit-transform: translate(0,60px); } .fade-stop{ opacity: 1.0; transform: translate(0,0); -webkit-transform: translate(0,0); } [/css]

デモはこちら

実際に使ってみないとわかりにくいCSSの “vw” “vh” って単位

CSSの横幅や高さで使われる単位の中にvw とか vh とか見たことないでしょうか? 今まで気にもしていなかったんだけどこれってなんなんだろう?と思って調べてみました。

Viewport-percentage lengths: the vw, vh, vmin, vmax units

ここに書いてあるとおりviewportの幅(width)と高さ(height)を表す単位みたいです。 と言っても意味がわからないので具体的に調べると viewportの1/100の値がそれぞれ1vw、1vhってことなんですね。

画面サイズいっぱいのサイトを作る機会がもうすぐあるので丁度いい単位にたどり着きました。 100vwと100vhに指定すれば画面サイズと同じサイズに設定できるわけです。

これを使ってサイトが表示された時点のブラウザの縦幅を取得して その分だけ画面いっぱいにヒーローイメージを表示してみましょう。

ブラウザを伸縮させるとリアルタイムに背景画像の縦幅が可変します。

それではコードを作っていきます。

HTML

[html] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>フルスクリーンで表示</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <section class="flexbox bg_photo01"> <h2>ブラウザの縦幅の分だけ</h2> <h3>画面いっぱいに大きな画像が表示されるよ。</h3> </section> <section class="flexbox bg_photo02"> <p>2つ目の背景</p> <p>です</p> </section> <section class="flexbox bg_photo03"> <p>いくつもセクションは作れるよ</p> <p>便利。</p> </section> </body> </html> [/html]

CSS

[css] @charset "UTF-8"; body { padding: 0px; margin: 0px; overflow-x: hidden; overflow-y: scroll; } section { width: 100vw; height: 100vh; } @media screen and (max-width: 320px) and (max-width: 480px) { .box { width: 320px; height: 480px; } } .flexbox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .bg_photo01 { background-image: url(http://bistro.site/img/neko01.jpg); background-size: cover; background-position: center; } .bg_photo02 { background-image: url(http://bistro.site/img/neko02.jpg); background-size: cover; background-position: center; } .bg_photo03 { background-image: url(http://bistro.site/img/neko03.jpg); background-size: cover; background-position: center; } p { color: #FFF; } [/css]

こんな感じにしてみました! 是非ブラウザを伸縮しまくってスクロールしてみてください。

Demo

flexboxを使ってるのでほとんどのブラウザは対応していると思います。 flexbox対応状況