Director's Cut - art project team Blog - » メモ http://blog.art-p.com ウェブディレクターの技術的な備忘録 Fri, 16 Dec 2011 10:40:42 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 twitterAPIを利用して複数のタイムラインを表示 http://blog.art-p.com/%e3%83%a1%e3%83%a2/twitterapi%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e8%a4%87%e6%95%b0%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%a0%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a1%a8%e7%a4%ba/ http://blog.art-p.com/%e3%83%a1%e3%83%a2/twitterapi%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e8%a4%87%e6%95%b0%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%a0%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a1%a8%e7%a4%ba/#comments Wed, 13 Apr 2011 09:12:24 +0000 art project team http://blog.art-p.com/?p=668 ホームページなどにtwitterのタイムラインを表示するさい、大抵は一つだけのJQueryプラグインですが、複数のタイムラインを表示することができます。

一つはA jQuery TwitterTickerというプラグインを利用すればできます。
ただし、これは一つのボックスに複数のユーザーのつぶやきを表示させるというもの。

もし、上記のようなものではなく、ユーザーごとのタイムラインボックスが複数欲しいという場合の対処法。


A jQuery TwitterTickerを参考にいじりました。
といっても、jquery.mousewheel.js、jScrollPane.jsがあれば別に上記のものを使わなくてもいいのですが。。

コードは下記のような感じ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$(function(){
  var tweetUsers = [
                      ['art project team', 'artprojectteam', 'http://art-p.com/'],
                      ['フェスティバ!!', 'festiva55', 'http://www.festiva.biz/']
                    ];
  $('#twitterArray').slideDown("slow");

  for(var i=0; i<tweetUsers.length; i++){
    $('#twitterArray').append(
        '<div id="tweet-'+i+'" class="tweetArea">'
        +'<div class="tweetIcon"><img src="common/images/twitter_icon/'+tweetUsers[i][1]+'.gif" width="32" height="32" alt="'+tweetUsers[i][0]+'"></div>'
        +'<div class="tweetUser">'
        +'<h3><a href="'+tweetUsers[i][2]+'" target="_blank">'+tweetUsers[i][0]+'</a></h3>'
        +'<h4><a href="http://twitter.com/'+tweetUsers[i][1]+'" target="_blank">@'+tweetUsers[i][1]+'</a></h4>'
        +'</div>'
        +'<div class="tweetConpane"><div class="tweetBox"><ol></ol></div></div>'
        +'</div>'
    );
    getTweet(tweetUsers[i][1], i);
  };
});

/** ツイートを取得 **/
function getTweet(account, i){
  $.getJSON("http://search.twitter.com/search.json?q=from:"+account+"&rpp=50&callback=?",
      function(data){
        for(var j=0; j<data.results.length; j++){
          var text = data.results[j].text;
          text = text.replace(/(s?https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:@&=+$,%#]+)/gi,'<a href="$1" target="_blank">$1</a>');
          text = text.replace(/#(\w+)/gi,'<a href="http://twitter.com/search?q=%23$1" target="_blank">#$1</a>');
          text = text.replace(/@(\w+)/gi,'<a href="http://twitter.com/$1" target="_blank">@$1</a>');

          $('#tweet-'+i+' .tweetBox ol').append(
              '<li>'
              +text
              +'<br><span class="date">'+data.results[j].created_at+'</span>'
              +'</li>'
          );
          $('#tweet-'+i+' .tweetBox').jScrollPane();
        }

      }
  );
}

JSON形式で取得したデータをループさせてid=”twitterArray”の中に表示するというものです。
あと、リンク(http://)がある場合は自動的にリンクタグにするという処理も付け加えています。

q=from:xxx
の場合はアカウント(@xxx)を取得するようになります。
q=xxx
の場合はxxxという文字列を含むものを取得するということになります。
この辺のオプションはこことかここを参考にするとよいです。

]]> http://blog.art-p.com/%e3%83%a1%e3%83%a2/twitterapi%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e8%a4%87%e6%95%b0%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%a0%e3%83%a9%e3%82%a4%e3%83%b3%e3%82%92%e8%a1%a8%e7%a4%ba/feed/ 0 Doctrineでデータ取得する際に文字化けを直す方法。 http://blog.art-p.com/%e3%83%a1%e3%83%a2/doctrine%e3%81%a7%e3%83%87%e3%83%bc%e3%82%bf%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ab%e6%96%87%e5%ad%97%e5%8c%96%e3%81%91%e3%82%92%e7%9b%b4%e3%81%99%e6%96%b9%e6%b3%95%e3%80%82/ http://blog.art-p.com/%e3%83%a1%e3%83%a2/doctrine%e3%81%a7%e3%83%87%e3%83%bc%e3%82%bf%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ab%e6%96%87%e5%ad%97%e5%8c%96%e3%81%91%e3%82%92%e7%9b%b4%e3%81%99%e6%96%b9%e6%b3%95%e3%80%82/#comments Sat, 10 Jul 2010 06:27:14 +0000 art project team http://blog.art-p.com/?p=563 自分用のメモ
Doctrineを使用してDBに接続して、SQLを発行したときに文字化けするので、文字化けを解消する方法。

1
$db = Doctrine_Maneger::connection("mysql://username:password@host/datamesename")->setCharset("utf8");

上記でUTF8でデータを取得することが可能。

]]> http://blog.art-p.com/%e3%83%a1%e3%83%a2/doctrine%e3%81%a7%e3%83%87%e3%83%bc%e3%82%bf%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ab%e6%96%87%e5%ad%97%e5%8c%96%e3%81%91%e3%82%92%e7%9b%b4%e3%81%99%e6%96%b9%e6%b3%95%e3%80%82/feed/ 0 ZendFrameworkでDB接続メモ http://blog.art-p.com/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%a0/zendframework%e3%81%a7db%e6%8e%a5%e7%b6%9a%e3%83%a1%e3%83%a2/ http://blog.art-p.com/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%a0/zendframework%e3%81%a7db%e6%8e%a5%e7%b6%9a%e3%83%a1%e3%83%a2/#comments Tue, 22 Jun 2010 07:42:51 +0000 art project team http://blog.art-p.com/?p=551 ZendFrameworkは自由度が高いせいかいろいろ自分で設定しなきゃいけないんのですが、とりあえずDB接続のめも。
いちいちファイルごとにホストネームとか指定するのは現実的ではないので、application.iniとBootstrap.phpでの接続方法。

application.iniにデータベースの設定情報を記述。

application/configs/application.ini

1
2
3
4
5
6
7
[production]
db.adapter = "PDO_MYSQL"
db.params.host = "localhost"
db.params.username = "root"
db.params.password = "xxxx"
db.params.dbname = "xxxx"
db.params.charset = "utf8"

ホスト名などはサーバごとに違うので注意。ローカルの場合はたいてい「localhost」でいけるはず。
dbnameはデータベース名。

application/Bootstrap.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
  protected function _initDb()
  {
    try{
      $options = new Zend_Config($this->getOptions());
      $dbConfig = $options->db;
      //データベース設定を取得
      $dbConect = Zend_Db::factory($dbConfig->adapter, $dbConfig->params); 
      Zend_Registry::set('db', $dbConect);
      Zend_Db_Table::setDefaultAdapter($dbConect);

      //データベースに接続
      $dbConect->getConnection();
    }catch(Exception $e){
      //エラー時の処理
      die($e->getMessage());
    }
  }
}

これでデータベースに接続できたので間違いないだろう。
エラー処理を本番環境と開発環境で分けたい場合はエラー処理の所を

1
2
3
4
5
if('production' == APPLICATION_ENV){
  //本番環境でのエラーメッセージ
}else{
  //開発環境でのエラーメッセージ
}

とすればいい。
1行目の振り分けはpublic/.htaccessに記述している
SetEnv APPLICATION_ENV xxxxxxxxx
のこと。(xxxxxxxxには production か development が入る)

いろいろググった結果なので、もしもっといい方法があれば教えていただけると助かります。
ZendFrameworkの本を買おうかな。。。

]]> http://blog.art-p.com/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%a0/zendframework%e3%81%a7db%e6%8e%a5%e7%b6%9a%e3%83%a1%e3%83%a2/feed/ 0 ヘテムルでのZend Framework導入めも http://blog.art-p.com/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%a0/%e3%83%98%e3%83%86%e3%83%a0%e3%83%ab%e3%81%a7%e3%81%aezend-framework%e5%b0%8e%e5%85%a5%e3%82%81%e3%82%82/ http://blog.art-p.com/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%a0/%e3%83%98%e3%83%86%e3%83%a0%e3%83%ab%e3%81%a7%e3%81%aezend-framework%e5%b0%8e%e5%85%a5%e3%82%81%e3%82%82/#comments Mon, 21 Jun 2010 05:59:05 +0000 art project team http://blog.art-p.com/?p=542 個人的なメモですが・・・
ヘテムルでZend Frameworkを導入する時のメモ。

ZendFrameworkのライブラリ郡(本家からDLしたファイル)をwebとかappsとかある所にフォルダを作ってぶち込む
↓
web/適当なフォルダに(applicationとかpublicフォルダ)を入れる。
↓
.htaccess にphp5で動くように「AddHandler php5-script .php」を記述
↓
index.phpに
$path = “/home/sites/heteml/(自分のユーザー)/ZendFramework/library”;
set_include_path(get_include_path() . PATH_SEPARATOR . $path);
と書く。
↓
ヘテムルのコンパネ画面でドメインの設定をweb/適当なフォルダ/public にすれば、一応見れる。

多分これで大丈夫。
今の所見れてるので大丈夫だろう。。。

ディレクトリ構成はこんな感じ
apps/
zendframework/
└library/
web/
└適当なフォルダ
      ├application
      ├public(ここにドメイン設定をした)
      ├などなど

]]> http://blog.art-p.com/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%a0/%e3%83%98%e3%83%86%e3%83%a0%e3%83%ab%e3%81%a7%e3%81%aezend-framework%e5%b0%8e%e5%85%a5%e3%82%81%e3%82%82/feed/ 1 ワードプレスのグローバル変数 http://blog.art-p.com/%e3%83%a1%e3%83%a2/%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e5%a4%89%e6%95%b0/ http://blog.art-p.com/%e3%83%a1%e3%83%a2/%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e5%a4%89%e6%95%b0/#comments Wed, 16 Jun 2010 11:33:39 +0000 art project team http://blog.art-p.com/?p=527 ワードプレスにもグローバル変数があるので結構使う変数を表示。
場所によってはグローバル変数を使うことをオススメします。
※ワードプレス2系の時点です。

■すべてのページで使える

$is_gecko：ブラウザがGecko系(Firefoxなど)の場合「1」が入る
$is_winIE：ブラウザがWindows版のIEの場合「1」が入る
$is_macIE：ブラウザがMac系のIEの場合「1」が入る
$is_opera：ブラウザがOperaの場合「1」が入る
$user_ID：閲覧者がログインしている場合、閲覧者のユーザーIDが入る
$user_login：閲覧者がログインしている場合、閲覧者のユーザー名が入る

■ シングルページ、独立ページ、メディアページ

$id：現在のコンテンツIDが入る(ループ内の場合は処理中のコンテンツIDが入る)
$cat：カテゴリーIDが入る
$tag_id：タグIDが入る
$author：ユーザーIDが入る

■コメント

$comments：現在開いているコンテンツもしくはページのコメントとコメントに関するデータが入る

他にもありますが、割と使うのは上記かな～。

]]> http://blog.art-p.com/%e3%83%a1%e3%83%a2/%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e5%a4%89%e6%95%b0/feed/ 0 アイコン素材サイト http://blog.art-p.com/%e3%83%a1%e3%83%a2/%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e7%b4%a0%e6%9d%90%e3%82%b5%e3%82%a4%e3%83%88/ http://blog.art-p.com/%e3%83%a1%e3%83%a2/%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e7%b4%a0%e6%9d%90%e3%82%b5%e3%82%a4%e3%83%88/#comments Sat, 12 Jun 2010 09:25:15 +0000 art project team http://blog.art-p.com/?p=522 ちょっとしたアイコンが欲しいというときに便利なサイト。
Iconfinder

様々な場面で使えますが、使用する際には画像の権利に注意してください。

]]> http://blog.art-p.com/%e3%83%a1%e3%83%a2/%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e7%b4%a0%e6%9d%90%e3%82%b5%e3%82%a4%e3%83%88/feed/ 0 Flex4でのカレンダーをちょっとカスタマイズ http://blog.art-p.com/%e3%83%a1%e3%83%a2/flex4%e3%81%a7%e3%81%ae%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%82%92%e3%81%a1%e3%82%87%e3%81%a3%e3%81%a8%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba/ http://blog.art-p.com/%e3%83%a1%e3%83%a2/flex4%e3%81%a7%e3%81%ae%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%82%92%e3%81%a1%e3%82%87%e3%81%a3%e3%81%a8%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba/#comments Wed, 09 Jun 2010 10:05:46 +0000 art project team http://blog.art-p.com/?p=506 Flex4環境でAir開発。
カレンダースクリプトをちょっとカスタマイズ。


デフォルトだと月名や週名が英語で、一ヶ月ごとにしか移動できないけど、それを日本語にする方法。

1
2
3
4
5
6
7
<mx:DateChooser id="calendar" width="100%" height="100%"
 monthNames="['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']"
 monthSymbol="月"
 dayNames="['日', '月', '火', '水', '木', '金', '土']"
 yearNavigationEnabled="true"
 yearSymbol="年"
>

これで、日本語カレンダーになります。
Flex4でしかできないので注意。

]]> http://blog.art-p.com/%e3%83%a1%e3%83%a2/flex4%e3%81%a7%e3%81%ae%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%82%92%e3%81%a1%e3%82%87%e3%81%a3%e3%81%a8%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba/feed/ 0 mxmlで独自インターフェースにする場合 http://blog.art-p.com/%e3%83%a1%e3%83%a2/mxml%e3%81%a7%e7%8b%ac%e8%87%aa%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a7%e3%83%bc%e3%82%b9%e3%81%ab%e3%81%99%e3%82%8b%e5%a0%b4%e5%90%88/ http://blog.art-p.com/%e3%83%a1%e3%83%a2/mxml%e3%81%a7%e7%8b%ac%e8%87%aa%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a7%e3%83%bc%e3%82%b9%e3%81%ab%e3%81%99%e3%82%8b%e5%a0%b4%e5%90%88/#comments Tue, 08 Jun 2010 10:01:36 +0000 art project team http://blog.art-p.com/?p=503 Flex4でシステムクロームを使用しない場合にウィンドウが動かない場合の対処法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml  version="1.0" encoding="UTF-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                   xmlns:s="library://ns.adobe.com/flex/spark"
                                   xmlns:mx="library://ns.adobe.com/flex/mx"
                                   mouseDown="moveWindow(event)">
  <fx:Script>
    import mx.core.*;
    import flash.display.*;
    import flash.events.*;

    private function moveWindow(evt:MouseEvent):void {
      stage.nativeWindow.startMove();
    }
  </fx:Script>
</s:WindowedApplication>

パッケージのインポートはいらないかも(忘れた…)
これで、ウィンドウを動かすことができます。

]]> http://blog.art-p.com/%e3%83%a1%e3%83%a2/mxml%e3%81%a7%e7%8b%ac%e8%87%aa%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%95%e3%82%a7%e3%83%bc%e3%82%b9%e3%81%ab%e3%81%99%e3%82%8b%e5%a0%b4%e5%90%88/feed/ 0 テーブルに罫線をつける http://blog.art-p.com/%e3%83%a1%e3%83%a2/%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%ab%e7%bd%ab%e7%b7%9a%e3%82%92%e3%81%a4%e3%81%91%e3%82%8b/ http://blog.art-p.com/%e3%83%a1%e3%83%a2/%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%ab%e7%bd%ab%e7%b7%9a%e3%82%92%e3%81%a4%e3%81%91%e3%82%8b/#comments Wed, 19 May 2010 23:43:33 +0000 art project team http://blog.art-p.com/?p=466 <table>タグに罫線をつける時に気をつけるメモ。
すべてのセルに罫線をつける時は、<th><td>につければいいが、上下もしくは左右のみにつける時は<tr>につければいいと思ったけど、IE7では反映されなかったりするので、結局<th><td>に書く必要がある。
例：

1
2
3
4
th, td {
  border-top: 2px dotted #ccc;
  border-bottom: 2px dotted #ccc;
}
]]> http://blog.art-p.com/%e3%83%a1%e3%83%a2/%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%ab%e7%bd%ab%e7%b7%9a%e3%82%92%e3%81%a4%e3%81%91%e3%82%8b/feed/ 0 JQueryのロールオーバーに関するあれこれ http://blog.art-p.com/%e3%83%a1%e3%83%a2/jquery%e3%81%ae%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e3%81%82%e3%82%8c%e3%81%93%e3%82%8c/ http://blog.art-p.com/%e3%83%a1%e3%83%a2/jquery%e3%81%ae%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e3%81%82%e3%82%8c%e3%81%93%e3%82%8c/#comments Fri, 14 May 2010 04:59:04 +0000 art project team http://blog.art-p.com/?p=451 JQueryを使用してrollover.jsを使ってロールオーバーを作成してて、Firefoxでブラウザの戻るを押すと、マウスが乗っていなくてもロールオーバーしたままなので困った。
とりあえず、ググったらはてなに情報があったので参考にして回避。

要はimgタグをすべてreplaceで置換をしてロードさせればいいみたい。

JavaScriptの記述

1
2
3
4
5
6
7
8
9
10
11
function resetRollover() {
  if(document.getElementsByTagName) {
    var images = document.getElementsByTagName("img");
    for(var i=0; i < images.length; i++) {
      if(images[i].getAttribute("src").match("_on.")) {
    images[i].setAttribute("src", images[i].getAttribute("src").replace("_on.", "_off."));
        //ロールオーバーのときのみ"_on."をつける場合は"_off."を"."に変えればOK
      }
    }
  }
}

次にbodyに

1
<body onpageshow="resetRollover();">

と書くことで回避できる模様。

ただ、このままだと最初から「_on」がついているファイルもなってしまうので、それを除く場合は、
imgタグにclass=”rollover”をつけて、

1
2
3
4
5
6
7
8
function resetRollover() {
  var images = $('img.rollover');
  for(var i = 0; i < images.length; i++){
    if(images[i].getAttribute("src").match("_on.")) {
      images[i].setAttribute("src", images[i].getAttribute("src").replace("_on.", "_off."));
    }
  }
}

とすることで、<img class=”rollover”>のファイルのみを拾ってきます。

ちなみに自分がよく使用するロールオーバーのスクリプト。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
  var postfix = '_on';
  $('img.rollover').not('[src*="' + postfix + '."]').each(function(){
    var img = $(this);
    var src = img.attr('src');
    var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.'));
    $('<img>').attr('src', src_on);
    img.hover(
        function(){
          img.attr('src', src_on);
        },
        function(){
          img.attr('src', src);
        }
    );
  });
});

上記の場合はimgタグにclass=”rollover”をつけたものを対象にしてますが、img.rollover部分を.rollover a imgなどと指定するとブロック単位で指定可能。

]]> http://blog.art-p.com/%e3%83%a1%e3%83%a2/jquery%e3%81%ae%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%ab%e9%96%a2%e3%81%99%e3%82%8b%e3%81%82%e3%82%8c%e3%81%93%e3%82%8c/feed/ 1