7月, 2012年

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

では、締め!

Facebook