‘管理人ブログ’

Viewportについて

2012-07-27

スマートフォンごとに違う画面サイズをそれぞれの画面サイズに合わせるのがviewportです viewportはMETAタグで指定を行います。

ちなみにIPHONEのviewportの初期値は横幅980pxに設定されています。 そのためviewportの指定がないHTMLを表示させると非常に文字が小さくなってしまいます。

viewportの記述例

<meta name="viewport" content="プロパディ1=値1, プロパディ2=値2 ...">

 

※viewportで指定できるプロパディ
width 幅。デフォルトは980px。範囲は200pxから10000pxまで。device-widthを指定できる。
height 高さ。デフォルト値は980px。範囲は223pxから10000pxまで。device-heightを指定できる。
initial-scale 初期スケール。デフォルトはWebページを可視エリアにフィットさせる。
範囲はminimum-scaleとmaximum-scaleから測定される
minimum-scale 最小スケール。デフォルトは0.25。範囲は0から10.0まで。
maximum-scale 最大スケール。範囲は0から10.0まで。
user-scalable ユーザーが拡大・縮小できるかどうかをyes/noで指定

記述例

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=3.0" />

以上です。

オリジナルタブで最新情報をレイアウトしてくれるfacebookアプリRSS for Pages

2012-07-08

これいいですね!

これはRSS情報をウォールに投稿するのではなく、オリジナルタブで最新情報をレイアウトしてくれるfacebookアプリです!

実際の表示はこんな感じです。

佐渡島net

こんな感じで自分のホームページのRSS情報一覧ページが出来上がります。

設定画面で1ページの表示数、ウォールに投稿するか等を設定できます。

導入方法

http://apps.facebook.com/involver_tdvjasdb/facebook_pages/landing

FacebookのRSS for Pages

上記のページより

Click here to installをおしてインストール。

すると次のページに推移します。

「RSS for Pages」を追加しますか

ここでタブを作成したいfacebookページを選択し、RSS for Pagesを追加するを押します。

すると会社名、電話番号を入力するページに推移します。

RSS for Pages

会社名、電話番号を入力し、 にチェックを入れSaveChangesを押せば完了です。

会社名、電話番号はすべて必須項目です。

以上で作業完了です。

佐渡島netページ

こんな感じでタブが追加されます。

WordPressにソーシャルボタンを設置する

2012-07-04

WordPressでのソーシャルボタンの設置方法

WP Social Bookmarking Light等のプラグインを使って設置してもいいのですが余計なプラグインは使いたくないのでプラグインを使わない方法。

下記コードをヘッダー(header.php)またはフッター(footer.php)に貼り付ける。

※ (ppId=***************の*にはFacebookのAppIDを入れる。

<!-- Facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=***************";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<!-- Google+ -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
 
<!-- はてなブックマーク -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
 
<!-- Twitter -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 
<!-- Evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

functions.php に下記のコードを貼る

// ソーシャルボタン
function socialbutton()
{ ?>
    <ul >
        <li class="hatebuButton"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
        <li class="tweetButton"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="" data-lang="ja" >ツイート</a></li>
        <li class="likeButton"><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="72" data-show-faces="false"></div></li>
        <li class="gplusButton"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
        <li class="EvernoteButton"><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a></li>
    </ul>
<?php }

ソーシャルボタンを貼り付けたい位置に下記コードを貼る。(single.phpなど)
<!-- ソーシャルボタン -->
<div class="socialbutton">
<?php socialbutton(); ?>
</div>

ソーシャルボタン用のCSSをstyle.cssなどに追加
/* ソーシャルボタン */
div.socialbutton ul{
margin: 0;
padding: 0;
}
div.socialbutton li{
list-style-type: none;
float: left;
margin-right: 10px;
}

以上です。

WordPressを使ってできることorできそうなこと

2012-07-02

今日は私が検証してきた事とこれから検証していこうと思っていることについて書きます。

題名の通りWordPressを使ってできることorできそうなことです。

 

できること

 

  1. 1.もちろんブログ機能ですね。(画像ギャラリー等のフォトブログ機能も可能)
  2. 2.当サイトでも構築している店舗などの紹介[口コミサイト](各種プラグインやAPI使用)
  3. 3.ネットショップ(プラグイン使用:WP e-commerceWP Simple CartWelcartGetShoppedYAK for WordPress
  4. 4.不動産サイト(不動産プラグイン使用
  5. 5.SNSサイト(SNSプラグインBuddy Press使用)
  6. 6.マルチサイト機能を使った、多ユーザー参加型ブログサイト

 

できそうなこと

 

  1. 1.マルチサイト機能を使った楽天市場のような大型ショッピングモール

 

こんなところですかね。

上から順番に説明していきます。

 

1.ブログ機能

こちらは標準で装備されている機能ですね。

さらにWordPress 3.1以降から搭載されたギャラリー機能を使えば画像ギャラリーも簡単に作れるので画像ギャラリーに特化したサイトも簡単に構築できます。

 

2.お店紹介[口コミサイト]

こちらは少し知識が必要ですが構築は可能です。

詳しい説明は後程ブログで書きますね。

 

3.ネットショップ

こちらもプラグインを導入すれば簡単に構築可能です。

私はWelcartしか使ったことないので他のプラグインについては説明できませんがWelcartではかなり自由度の高いショップを構築できます。

こちらも後程ブログにて詳しく書こうと思います。

 

4.不動産サイト

こちらも提供元:nendebで配布しているプラグインを導入すればかなり高機能な不動産サイトが構築できるようです。

私はまだ使ったことがないので、いずれ使ってみたいと思います。

 

5.SNSサイト

こちらもBuddy Pressで配布しているプラグイン導入で構築できます。

こちらもまだ未検証なので近いうちに検証してみます。

 

6.マルチサイト機能を使った多ユーザー参加型ブログサイト

こちらはWordpressに装備されているマルチサイト機能を使ってアメブロや楽天ブログのような色々なユーザーが使えるブログサイトを構築できます。

ただ、こちらはまだ実装されて間もないので、色々と不安要素もあるようです。

 

私が考える不安要素

  • プラグインの取り扱い
  • テーマの取り扱い
  • データベース肥大化によるサーバー負荷の問題
  • セキュリティーの問題

これらはできそうなことのマルチサイト機能を使った楽天市場のような大型ショッピングモールにも当てはまります。

 

これらの詳しいことはまた別ブログで書きます。

それでもまだまだWordpressには可能性があるので、今後いろいろ検証していきたいと思います。

CMSについて考えてみる

2012-07-01

眠れないんでCMSについて少し考えてみた。
CMSって言われるとなに?って感じですよね?

CMSで検索するとコンテンツ.マネージメント.システムの略ですみたいのがヒットします。

だぁかぁら!

コンテンツ.マネージメント.システムってなによ!

って事ですなw

はっきり言って私もうまく説明できませんw

簡単にいうとホームページの更新を簡単にするシステムみたいな事。
ブログ、ネットショップ、ポータルサイトを簡単に作れるって事ですな。

ただ、CMSを扱うには結構知識がいります。それじゃ簡単にサイト作れないじゃん的な感じですなw

最低限必要な知識はHTML、FTPの取り扱い。(SSHが扱えれば尚よし)、あとはサーバーに関する最低限の知識。

でも、これらは全部Google先生に聞けばなんとかなっちゃうと私は思います。

なんせ私がそうですからw

なにが言いたいんだ俺…w

では本題。

CMSについて。

今まで私が扱って来たCMSはWordPressxoopscubeECーCUBEjoomlaconcrete5OPENPNEMYNETSGEEKLOGといくつかに手をだしてみました(^_^;)

この他にもまだ山のように種類があります。

基本的に今上げたCMSはオープンソース[無料]です。

では、これらを使うとなにができるかって説明するために、大雑把に分類すると

ECーCUBE

ネットショップに特化してます。
最新版ではWordPressとの連携もとれるようになっていますし、スマホにも対応しています。プラグイン機能も実装されたようです。
ただ最新版は少しインストールが難しくなっているように感じました。

OPENPNE、MyNETS

mixiのようなSNSが構築できます。
ただ残念ながら、MyNETSは動きが止まっているようです。

XOOPS、joomla、Geeklog

ポータルサイトが構築できます。
モジュールを組み込む事によって様々なサイトを構築できます。

concrete5

視覚的にサイトの更新が行えるCMS。

WordPress

ブログサイトを構築できます。
様々なプラグインを組み込むことで多種多様なサイトを構築できます。
今や日本ではNO1のCMSではないでしょうか?

というようにCMSにも色々あります。
私がCMSを弄り始めた頃(7、8年前)には全てのCMSの使用用途がはっきりしていました。でも現在はそれがはっきりしていないように感じます。

ですので、最初にどのCMSを選べばいいのか迷ってしまう気がします。

今までの私の経験をお話すると、まず1番始めに使い始めたのがXOOPSです。

当時はかなり注目度も高く多用途に渡るモジュール開発も進んでいて、なんでもできる感じをうけました。

次に出会ったのがOPENPNEです。

これはmixiブームの真っ只中にあったので、SNSを構築したいというユーザーがかなりいました。その中で出会ったのがMyNETSです。これはOPENPNEから派生したCMSで、当時OPENPNEより先に携帯に対応した事で注目を集めました。このCMSの開発プロジェクトに私もたずさわっていました。

それらを弄っている間にjoomlaやgeeklog、concrete5、WordPressも触り程度でいじってました。

で、最近よく弄ってたのがECーCUBEです。これはネットショップを構築するのにはかなりよくできていて、2.1x系からはスマホにも対応したので、ちょうど会社のショップを作るのに向いているCMSだと感じ使い始めました。

が、2.12系にアップグレードしようとした所、そこでつまづきました、サーバーの仕様によるものだとはわかったのですが、広く浅くなスキルしかない私には手におえそうにないのと、めんどくさいのとで、弄るのを放棄…

と、いうことで、久しぶりにWordPressでも弄ってみたんですが、久しぶりにさわってみて、その進化ぶりに驚きましたw

はっきりいってなんでもできる!

私が前に弄っていた頃とはもうまるで別人!

こんなにあかぬけちゃったのね!

今までXOOPSに固執してた自分が恥ずかしい…

時間を返して(T ^ T)

まぁ勉強にはなりました。

ってなわけで、あっさり方向転換。
WordPressを極めよう!

と思い、佐渡島NETもあっけなくWordPress化!

はっきり言ってもぅ佐渡の情報発信できてません(T ^ T)

私の趣味の為のサイトになってますw
すいません(^_^;)

まぁ、私が佐渡に帰って来た時はほとんど情報発信サイトがなかったので、始めた佐渡島NETですが、今やうちなんかよりしっかりした情報を発信してるサイトもかなりあるんで、もぅお役御免かなぁって思ってあっけなくデータも削除しちゃいました(^_^;)

逆に古い情報流してもあれなんで…

まぁ最低限の情報発信で、あとは趣味に使って行こうかと…

なんだか、話がとびとびですなw

文字書くのがめっぽう苦手なもんで…

WordPressを避けてたのはそうゆうところにもあったのです。
そう!
ブログ書くのが苦手なのです!

なにせ私が始めていじってたころは本当にブログを書く為のCMSだったもので…まさかこんな変貌を遂げていようとわ。

やはりなにか一つに固執してはいけませんね。

視野は広く持たなくては。

…でこのブログはどうやって締めくくればいいんだ?

なにを書きたかったんだろ?

久しぶりに文字一杯書いたら忘れてしまったw

ようするにWordPress最高って事で(^_^;)

次はもっとちゃんと書けるように頑張りますw

では、締め!

WoresPress プラグインtubepressでエラー

2012-06-26

WordPressのプラグインTubePressをインストールし、テストしてみたところ「DOMDocument class not found」とエラーが出たので、解決策を書き残しておきます。

 

 

 

 

ちなみにうちのサイトが稼働しているサーバーはラピッドサイトのVPS-Lプランです。

  1. ますSSHでログインしてrootになる。
  2. cd  cd /usr/local/php5/etc/
  3. extensions.iniを編集 (pico-w  extensions.ini)


<pre>;Unix Extensions
extension=spl.so
extension=simplexml.so
extension=session.so
extension=iconv.so
extension=bcmath.so
extension=bz2.so
extension=calendar.so
;extension=chasen.so
extension=ctype.so
extension=curl.so
;extension=dba.so
;extension=dbase.so
;extension=dom.so
extension=exif.so
;extension=ftp.so
extension=gd.so
extension=gettext.so
;extension=gmp.so
extension=hash.so
;extension=imap.so
;extension=json.so
;extension=kakasi.so
extension=mbstring.so
extension=mcrypt.so
extension=mhash.so
extension=mysql.so
;extension=mysqli.so
;extension=namazu.so
;extension=oci8.so
extension=openssl.so
;extension=pdo.so
;extension=pdo_mysql.so
;extension=pdo_oci.so
;extension=pdo_pgsql.so
;extension=pdo_sqlite.so
;extension=pgsql.so
;extension=posix.so
;extension=pspell.so
;extension=soap.so
;extension=sockets.so
;extension=sqlite.so
;extension=tokenizer.so
extension=xml.so
;extension=xmlreader.so
;extension=xmlrpc.so
;extension=xmlwriter.so
;extension=xsl.so
extension=zip.so
extension=zlib.so

のなかの
;extension=dom.so
をコメントアウト
extension=dom.so

で、アパッチ再起動

restart_apache

これでOK。

動画

OGP (Open Graph Protocol)について

2012-06-24

さて、今日の覚書

OGP (Open Graph Protocolってなんとなく耳にしてたんですがいままであんま気にせずにいました。

今回サイトをリニューアルするにあたって少し勉強したんで書き残しときます。

OGPとは簡単に言うとこのウェブページは何のことを書いているのかという情報を、プログラムから読めるように HTML に付加する記述方法のことらしいです。

私なりの解釈をすると最近よく見かけるソーシャルボタンありますよね?

facebookのいいねやシェアボタンとかtwitterのtweetボタンみたいなやつです。

OGPってのはそれらのボタンを押したときに正確な情報をfacebookやらtwitterやらに渡すために書く情報のことみたいです^^;

今現在はそういったソーシャルメディアが生活やビジネスの中で欠かせなくなってきているのでOGPはしっかり書いておいた方がいいと私は感じました。

具体的な書き方

書き方は非常に簡単です。

まず当サイトのOGPはこんな感じです。

<meta property="<a>og:title</a>" content="<a>佐渡島.NET | 佐渡のニュースや情報を発信中、国内旅行はぜひ佐渡へ</a>">
<meta property="<a>og:type</a>" content="<a>website</a>">
<meta property="<a>og:description</a>" content="<a>佐渡のニュースや情報を発信中、国内旅行はぜひ佐渡へ</a>">
<meta property="<a>og:url</a>" content="<a>http://sadogasima.net/</a>">
<meta property="<a>og:image</a>" content="<a>http://sadogasima.net/images/sado.jpg</a>">
<meta property="<a>og:site_name</a>" content="<a>佐渡島NET</a>">
<meta property="<a>og:email</a>" content="<a>mail@sadogasima.net</a>">
<meta property="<a>og:phone_number</a>" content="<a>080-3323-9112</a>">

みておわかりいただけるように<meta property=”<a>og:****</a>” content=”***</a>”>のような形のメタ情報を書くだけです。

簡単に説明すると

og:type
このウェブページが何のページであるかを記述(必須)
og:title
このウェブページが記述しているモノの名前(必須)
og:image
このウェブページが記述しているモノの画像(必須)
og:url
このウェブページの正式な URL(必須)
og:description
このウェブページの説明
og:site_name
このウェブページが何かのサイトに所属する場合そのサイト名
og:email, og:phone_number
という感じです。
このほかにも音声や動画を添付するときのOGPもあります。

あとwordpressで書くときはheader.phpに


<meta property="og:title" content="<?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;</p>
<p>wp_title( '|', true, 'right' );</p>
<p>// Add the blog name.
bloginfo( 'name' );</p>
<p>// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";</p>
<p>// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?>">
<meta property="og:description" content="<?php echo trim(wp_title('', false)); if(wp_title('', false)) { echo ' - '; } bloginfo('description'); ?>">
<meta property="og:url" content="<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>">

のように記述すれば、title、description、urlは各ページごとに取得してくれます。

Welcartにイプシロン決済モジュールを導入する

2012-06-23

WordPressのモジュールWelcartにイプシロン決済モジュールを導入した時の覚書

まずは決済モジュールのあるディレクトリーの場所変更(アップグレード対策)

元のパス wordpressの置いてあるパス/wp-content/plugins/usc-e-shop/settlement/

からアップグレードに影響されない場所 wordpressの置いてあるパス/wp-content/settlement/に移動

次に管理画面のシステム設定の決済モジュールパスを先ほど設置したwordpressの置いてあるパス/wp-content/settlement/に変更

決済モジュールパス変更

 

次にwordpressの置いてあるパス/wp-content/settlement/内のをテキepsilon_sample_ja.phpストエディターで開き

38行目付近の

// 契約番号(8桁) オンライン登録時に発行された契約番号を入力してください。
$contract_code = “00000000”;

を自分の契約コードに書き換える。

書き換えたものをepsilon.phpにリネームして同じ場所へアップロード。

次にイプシロンの管理画面を開き

イプシロン

設定>決済システムの接続設定を選択します。

決済システムの接続設定ではまずはテスト環境を選択して運用前に必ずテストしましょう。

テスト環境画面が開いたら先ほどと同じように、設定>決済システムの接続設定を選択します。

イプシロン管理画面テスト環境

次に1~5までを設定します。

  1. オーダー情報発信元ホスト情報: 自分のホスト情報を登録します。
  2. 決済完了後のリダイレクト先:ショップトップページのURL
  3. [戻る]ボタンの戻り先URL:ショップトップページのURL/index.php?page_id=カートページのID&confirm=0
  4. エラー発生時の戻り先URL:ショップトップページのURL/index.php?page_id=カートページのID&acting=epsilon&acting_return=0
  5. タイムアウト情報送信先URL:ショップトップページのURL/index.php?page_id=カートページのID&acting=epsilon&acting_return=0

以上を登録したら。

welcartの管理画面に戻り、welcartの基本設定から支払い方法を追加しましょう。

支払い方追加

決済モジュール欄にはepsilon.phpと記述します。

次に一度ショップにアクセスしご自分でクレジット決済で買い物をしてみましょう。

正しく設定されていれば実際に買い物ができます。

正常に動作したら次は本番環境に先ほどと同じように設定をしていきます。

まずはepsilon.phpの50行目付近の

// インターフェイスURL(初期値はテスト環境用URL。本稼動の際は本番環境用URLに変更が必要。)
$interface_url = ‘https://beta.epsilon.jp/cgi-bin/order/receive_order3.cgi';

を本番環境用に書き換えます。

// インターフェイスURL(初期値はテスト環境用URL。本稼動の際は本番環境用URLに変更が必要。)
$interface_url = ‘https://secure.epsilon.jp/cgi-bin/order/receive_order3.cgi';

次にイプシロンの管理画面に行き先ほどと同じように必要事項を登録します。

イプシロン管理画面本番環境

ーで

きます情

  1. オーダー情報発信元ホスト情報: 自分のホスト情報を登録します。
  2. 決済完了後のリダイレクト先:ショップトップページのURL
  3. [戻る]ボタンの戻り先URL:ショップトップページのURL/index.php?page_id=カートページのID&confirm=0
  4. エラー発生時の戻り先URL:ショップトップページのURL/index.php?page_id=カートページのID&acting=epsilon&acting_return=0
  5. タイムアウト情報送信先URL:ショップトップページのURL/index.php?page_id=カートページのID&acting=epsilon&acting_return=0

以上で完了です。

報発信元ホスト情報せいじょ

カスタムフィールドの値にRSSのURLを登録し出力する方法

2012-06-19

まずはカスタムフィールドにRSSのURLを登録できるようにする。

設定>カスタムフィールドテンプレートから

テンプレートコンテンツ欄に


[rss]
type = text
size = 35
label = RSS

 

を追加

そして表示したいテンプレートに

<ul><?php  include_once(ABSPATH . WPINC . '/feed.php');$blog_rss2 =  get_post_meta($post->ID,"rss",true);$rss = fetch_feed($blog_rss2);  $maxitems = $rss->get_item_quantity(5);  $rss_items = $rss->get_items(0, $maxitems);  if ($maxitems == 0) :  ?>  <li><?php _e('データがありません。'); ?></li>  <?php else:    foreach($rss_items as $item) :  ?>  <li>    <?php echo $item->get_date('Y.m.d').'&nbsp;-&nbsp;'; ?><a href="<?php echo $item->get_permalink(); ?>" target="blank"><?php echo $item->get_title(); ?></a>  </li>  <?php    endforeach;  endif;?></ul>

を記述でOK

外部RSS表示カスタマイズ


SSHでWordPressインストール

2012-06-18
  1. wget http://ja.wordpress.org/wordpress-*.*-ja.tar.gz(*部分はバージョンによって異なります)
  2. tar xvf wordpress-*.*-ja.tar.gz -pで解凍
  3. rm -r  wordpress-*.*-ja.tar.gz  で削除

でファイルの展開は完了

  1. $ chown -R ユーザー名 ディレクトリ名で所有権変更

あとはブラウザにアクセスしてインストール!

 

 

« Older Entries

Facebook