2013年6月30日日曜日

【AWS】OpenPNE3.6のインストール環境構築

前回までの工程で、CentOSで動くEC2インスタンス作成しました。

続いて、作成したEC2インスタンスにOpenPNEをインストールする工程です。

① yumを更新
PuTTYなどを使用して、作成したEC2インスタンスにアクセスします。
下記コマンドを実行してyumを更新します。
yum update

② リポジトリを登録
OpenPNE公式サイトに載っているコマンド
rpm -ivh http://nog.dino.co.jp/dist/centos/5/dino/noarch/dino-release-1.0-1.noarch.rpm
を実行しましたが、残念ながらミドルウェアのセットアップでエラーがでてしまいました。
・・・自分だけ?
なので、今回はremiリポジトリを使用しました。
rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm

③OpenPNE用のミドルウェアをインストール
登録したremiリポジトリからミドルウェアをインストールします。
yum -y --enablerepo=remi install httpd mysql-server postfix aspell curl gmp libxslt wget httpd-devel php php-cli php-common php-devel php-pear php-gd php-mbstring php-pdo php-mysql php-pgsql php-xml php-xmlrpc php-mcrypt

これで、OpenPNEをインストールする環境は構築できました。
実は②でつまずいて、ここまでに3時間を費やしています(^^;
環境構築は・・・キライですw

ちなみに、リポジトリからインストールできるphpのバージョン情報などは
事前に調べることができます。

yum --enablerepo=remi info php


remiでインストールできるバージョンは5.4.16ですね。

次回は、OpenPNEのインストールを行おうと思います!





2013年6月25日火曜日

【jQueryMobile】特定ボタンのaction時の背景色を変える

アコーディオンを使用した際に、ヘッダ部分が自動的にボタンになるのはありがたいのですが
ボタンがactiveな時の背景色も、他のコントロールと同じスタイルが適用されます。

そこで、アコーディオンのヘッダボタンactive時の背景色を変更してみました。

アコーディオンを使用するとヘッダ部分は自動的にボタンになるため

<div data-role="collapsible" data-collapsed="false">
  <h3></h3>
<div>

と定義したものは、下記のように<a>タグが挿入され、ボタンのようになります。
<div data-role="collapsible" data-collapsed="false">
  <h3>
    <a href="#">
  </h3>
<div>

ボタンがactive状態のスタイルは<a>タグの「ui-btn-active」クラスによって
指定されています。
なので、若干強引ですが<h3>に対してクラスを設定して
そのクラスの子要素の「ui-btn-active」に対してスタイルを適用します。

例)
<div data-role="collapsible" data-collapsed="false">
  <h3 class="hdrClass"></h3>
<div>

この場合、h3に「hdrClass」というクラスを指定したので
後はスタイルシートに

.hdrClass .ui-btn-active{
}

もしくは

.hdrClass > .ui-btn-active{
}

というように設定して、背景色を適用すればactive時の背景色を
変更することができます。

2013年6月19日水曜日

jQuery Mobile1.3に変更後に「DateBox」が動かなくなった場合

jQueryMobileのPanelを使用する必要があるため、1.3verに変更したところ
無事にPanelは実装できたのですが、残念ながらカレンダーを表示するのに
使用していた、「DateBox」プラグインが動かない。
テキストボックスをクリックしても、カレンダーが表示されなくなってしまいました。
よくある?1歩進んで2歩下がる状態です。

どうやら、DateBoxのjavaScriptでエラーがあり、カレンダーが表示できない模様。

とりあえず、DateBoxプラグインのサイトから
最新バージョンを取得し、入れ替えたところ
正常に動作するようになりました。

jQueryMobileにアイコンを追加

facebookや、youtubeのようなメニューをjQueryMobileのPanelで実装しました。

がしかし、横三本ボーダーのようなアイコンがありません。。。

どうしようかなぁ~っと色々検索したところ、下記のサイトが良さそうです。

andyMatthews.net

このサイトの左メニュー 
projects>jQuery Mobile Icon Pack の画面内にある
「Download from Github」から
ZipファイルをDLすることができます。

使用方法はZipファイルを解凍し、作成しているサイトの
CSSを置く場所に以下の3つを設置します。
・fontフォルダ
・imagesフォルダ
・jqm-icon-pack-fa.css

次に、htmlで「jqm-icon-pack-fa.css」を読み込みます。

後はアイコンを使用させたい箇所に 
data-icon="smile" 
と追加すれば、アイコンが表示されます。

各アイコンの名称は
projects>jQuery Mobile Icon Pack
の「Font Awesome Icons」から確認することができます。

ちなみに、僕が欲しかった横三本ボーダアイコンは  
data-icon="reorder" 
で表示できました。

2013年6月16日日曜日

【jQuery】画像を切替後にズームを行う。

Twitterアプリのログイン前画面のような
画像が切り替わり、その後ちょっと画面がズームする動きに挑戦してみました。

まず、画像の切替については、下記サイトの方法で実現。
jQueryで画像がクロスフェードするシンプルな画像ビューアー(自動再生)を作成する方法

次に画像切替後に、画像のズームです。
①画像の拡大
$(setImg + ' :first-child').animate({width:'150%',height:'150%',top:'-25%',left:'-25%'},zoomSpeed);
②次に表示する画像の大きさを初期化
$(setImg + ' :first-child').css({width:'100%',height:'100%',top:'0px',left:'0px'});

画像の拡大では、width、heightでそれぞれ拡大率を指定しています。
top、leftの指定は、拡大を画像の中心から行うため、表示位置を変更しています。
例えば、元々100%で表示していて、今回のように拡大率を150%にした場合
拡大した倍率の差を2で割った値がtop、leftの指定になります。
(150%-100%) / 2 = 25%

②では、①で拡大して非表示になっている画像が、次に表示される時に
元の大きさ、位置で表示されるように初期化を行っています。

ソース全体ではこのようになりました。

<script type="text/javascript">
$(function(){
    var setImg = '#example';
    var fadeSpeed = 1000;
    var switchSpeed = 5000;
    var zoomSpeed = 2000;

    // 全てのイメージを非表示
    $(setImg).children('img').css({opacity:'0'});
   
    // 最初のImgを表示
    $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

    // 画像の表示・非表示を切り替え

    setInterval(function(){
        // 画像の切替
        $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
        // 画像の拡大
        $(setImg + ' :first-child').animate({width:'150%',height:'150%',top:'-25%',left:'-25%'},zoomSpeed);
        // 次に表示する画像の大きさを初期化
        $(setImg + ' :first-child').css({width:'100%',height:'100%',top:'0px',left:'0px'});

    },switchSpeed);
});
</script>

<div id="example">
  <img src="/images/Sample.jpg" />
  <img src="/images/Sample2.jpg" />
</div>

スマホで見ると、画面を拡大するときにチラつくのが気になりますね。
ん~今後の改善ポイントですね。

【JavaScript】ある要素の2番目の子要素を非表示にする

例えば、以下のソースの、2番目のimgタグを非表示したい場合
<div id="example">
  <img src="sample.jpg" alt="" />
  <img src="sample2.jpg" alt="" />
</div>

JavaScriptを使用して、画面ロード時に非表示にすることができます。
<script type="text/javascript">
$(function(){
    var setImg = '#example';
    $(setImg + ' :first-child').next('img').css({opacity:'0'});
});
</script>

2013年6月11日火曜日

【AWS】EC2でCentOS6を使うために

OpenPNE3.6をEC2のサーバにインストールすることになり
CentOSがのっかったEC2サーバを構築することに。

普段からLinuxを使わず、かつAWSの超初心者としては、かなり×2 てこずりましたが
以下、構築の手順になります。

新しいインスタンスを Classic Wizardで作成します。


② AWS Marketplaceを選択します。





③ CentOSで検索します。


④ 検索結果から任意のバージョンを選択します。(今回はCentOS6 x86_64 with Updatesを選択)


⑤ 表示された画面の「1-Click Launch」タグで
    EC2 Instance Type、Security Group、Key Pairの設定を行います。
    また、画面右の表では料金も確認できます。
    なお、t1.microで$0.027/hrと有料の表記となっていますが
    私はアカウントを作って、1年未満のため現時点では無料で使用できています。
    ※料金がかかる場合もあるかもしれないので、自己責任でお願いします。
   設定が完了したら、Accept Terms & Launch with 1-Clickをクリックしてください。


⑥ 下記の画面が表示されたら、インスタンスが作成されています。

⑦ CentOSで作成したインスタンスが起動しています。
  初期状態ではインスタンス名が空なので、適宜名前を入力します。
  

これで、EC2でCentOSのインスタンスを使えるようになりました!
まとめると、短い工程でしたが自分にとっては難しかったです。


次回はOpenPNEをインストールする環境を構築します。


2013年6月9日日曜日

【OpenPNE】ログイン時に失敗する場合の対処(member/login/authMode/MailAddress was not found on this server.)

OpenPNEのインストールが完了し、ログインしたところ

member/login/authMode/MailAddress was not found on this server.

というエラーが・・・。

調べたところ、以下のいずれかの設定が誤っているもよう。
①apacheの設定ファイル(httpd.conf) 
②OpenPNEルート/webの.htaccess
 
apacheの設定ファイルでは、ドキュメントルートの
AllowOverrideが「All」になっている必要があるのですが
確認したところ、「none」になっていました。。。
 
<Directory "ドキュメントルート">
    AllowOverride All
</Directory>

誤:
<Directory "ドキュメントルート">
    AllowOverride None
</Directory>

②は正しく設定されていたので、今回は①を修正後に
ログインしたところ、正常にログインできました。

まだまだ、勉強が必要ですねぇ~。




【EC2-CentOS】シンボリックリンクでアクセスできない(Symbolic link not allowed or link target not accessible)

EC2にOpenPNEをインストール。

ここまでは、順調だったのだがシンボリックリンクをはってブラウザから
アクセスしたところ
Symbolic link not allowed or link target not accessible
となりアクセスできず。。。

リンク先のディレクトリの権限を確認したけど、特に問題ないっぽい。

試しに、SELinuxを無効(setenforce 0)にしたところ
サイトにアクセスできるようになりました!

ん~ただ、ちゃんとした理由が分からないので、問題の切り分けとして
SELinuxを一時的に無効にするのはありかなぁ~っと。

と、モヤモヤしますが、とりあえず今回はここまでで。