Archive for the ‘WEB’ Category

最近の色々

水曜日, 5月 12th, 2010

ここ一ヵ月色々ありましたが、

新しい仕事をするよになって、ようやく

htmlやらcssやらをモフモフすることを生業とすることに成功しました。

flashもこれから、仕事としてやっていくにあたって、勉強会に何個か参加しました。

・67works Geeks

・Progression本読み会

えー、撃沈でした。

日本でも有数なflasherさんたちに混じったのですが、なんのこっちゃ。

情けないことに、おしっこちびりそうになりました。

「本気で取り組む」っていうよりも「仕事に還元」出来るようにならんといかんなぁ、

そう感じてます。

webで飯を食う、わけですから、「稼ぐ」人間でありたいと切に、切々と。

新しいこと?というか、仲間でサイトを立ち上げました。

iLDK

今のところはみんなのブログだけですけど、なんかおもろいことがあればコンテンツとして

どんどん出して行こうと思っています。

自分自身のサイトではweb関連、iLDKでは自分の周りのことだったり、もっと「誰にでも近い」ことを、

自分の中で仕分けながらやって行こうと思います。

はい。

そういうことです。

progression、初めてちゃんと組んでいるけど、楽しいです。難しいですが。

progression本、買っていない人は、買いましょう。flashするのなら、必須。

正規表現のお勉強

日曜日, 4月 11th, 2010

twitterからRSSをひっぱってきてモフモフする時って、

ブログからひっぱってくる時と事情が違う。

一緒なんだけども、「@….」「#….」とかね、タイムラインではリンクになってますよね。

今回はPHPでTwitterからRSSでひっぱってきて、@も#も全部リンクにすることが出来るかなぁ、という勉強。

正規表現は難しい。というかややこしい。僕にとって。

わかりやすいサイトを教えてもらったので、参考にそこを読む。

さるにもわかる正規表現

まずはXML_RSSでRSSを取得しパース

1
2
$tweet=&new XML_RSS($tweet_url);
$tweet->parse();

getItems()で中身を取り出す

1
2
3
4
5
6
7
8
9
10
11
12
13
14
foreach($tweet->getItems() as $item){  
    $item['description']=mb_convert_encoding($item['description'],'UTF-8','auto');
    $item['description']=mb_substr($item['description'],6);
    $pat=array("/(https?)(:\/\/[[:alnum:]\+\$\;\?\.%,!#~*\/:@&=_-]+)/i");
    $_user=array("/(@)([[:alnum:]_]+)/");
    $_search=array("/(#)([[:alnum:]_]+)/");
    $replacements = array("<a href=\"\\1\\2\">\\1\\2</a>");
    $replacements2 = array("\\1<a href=\"http://twitter.com/\\2\">\\2</a>");
    $replacements3 = array("<a href=\"http://twitter.com/search?q=%23\\2\">\\1\\2</a>");
    $item['description']= preg_replace($pat, $replacements, $item['description']);
    $item['description']= preg_replace($_user, $replacements2, $item['description']);
    $item['description']= preg_replace($_search, $replacements3, $item['description']);
    $item['list']="<li class=\"grid twitter_li\">";
}

色々調べながらやってみました。時間かかったけど。

$pat、$_user、$_searchがマッチさせたい文字列です。

1
$pat=array("/(https?)(:\/\/[[:alnum:]\+\$\;\?\.%,!#~*\/:@&=_-]+)/i");

各項目内の[:alnum:]はアルファベット・数字全部、()は文字列のグループ化。

「?」は「直前の文字が1つ、もしくは0つ」ということみたいです。

(https?)、はつまり「httpかhttps」がマッチ、ということになります。

[]は「[]ないどれか1つ」で、+は「最低1つ直前の文字があることで同じ文字の繰り返し」ですか。

ふー

「同じ文字の繰り返し」なのですが、[]内の文字の繰り返し、っていうことになるのですね。

$replacementsは置き換える文字列です。

1
$replacements = array("<a href=\"\\1\\2\">\\1\\2</a>");

「\”」は”のエスケープで、「\\1\\2」はグループ化された$patの文字列部分をあらわしています。

なので

1
http://www.takasumi-nagai.com/

があるとしたら、

1
2
(http) \\1
(://www.takasumi-nagai.com/) \\2

ということになる(ぼんやりしかわかってないけど・・・)

なんしか、これで出来ました。

難しいですね。正規表現。

私のサイトトップで実装してます。

ちゃんと動いているみたいですね。

良かった。

text-size

火曜日, 3月 30th, 2010

テキストサイズをボタンをポチポチ押して

大きくしたり小さくしたりするスクリプトを

勉強がてら作ってみる

jQueryを使用しているので、リンクを貼っていること前提です

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    var count = 2 ;
    var textsize=["0.8em","0.9em","1em","1.2em","1.4em"] ;
    $('#big').click(function(){
        count++:
        $('サイズ変更したい要素やid,class名').css("font-size",textsize[count]);
        if(count>4){
        count=4;
        }
    });
    $('#small').click(function(){
        count--:
        $('サイズ変更したい要素やid,class名').css("font-size",textsize[count]);
        if(count<0){
        count=0;
        }
    });
});
// ]]></script>

#bigやら#smallやらは任意のアンカーにつけてくだされ

1
2
<a id="big" href="#">文字を大きくするよ</a>
<a id="small" href="#">文字を小さくするよ</a>

みたいに。

で、変数countに「2」を最初に入れているのは、ブラウザ読み込み時のデフォ

文字サイズはtextsizeに配列でぶちこんでいるので、その場所(=1em)を指定しています

クリックでcountの数値を増やしたり減らしたりして、配列から文字サイズを変えています

if文は、やたらめったにクリックされると「count=100」とかになってしまうと、文字サイズを小さく変更するまで大変!

ということで、countの数値を配列数に収めてます(0~4の間っすね)

ラクチンポン

ちなみに、WORDPRESSやらでは「$」を使用するとうまく動作しないことがしばしばあるので、

私は「$」ではなく「jQuery」を使うようにしてます。

1
jQuery(document).ready(function(){

と。

BOLTS HARDWARE STORE

火曜日, 3月 9th, 2010

はい、制作しました。

BOLTS HARDWARE STORE

京都の金物屋さんです。

金物って何?と思われる方もいらっしゃるでしょうけど、

僕がどうのこうの言うよりも、まずは行って見て下さい。

サイト上には店主の思いがつまっています。

言葉足らずなところも多々ありますが、ちょっとでも興味を持ってもらい、

着地としては、「金物」という1つの概念的なものを分かってもらいたい。

もちろん「売れる」ってことは必要ですが、

店主の「金物をもっと知って欲しい」という気持ちの強い方です。

元々、Pacific Furniture Serviceで販売から設計まで多岐に活躍されていた方なので、

金物以外でも内装やらインテリアやらのことも詳しい。

きさく。

是非、京都に行く際、立ち寄ってみたい場所の1つにしてもらえると嬉しいです。

bolts hardware store

jQueryで高さの調整

金曜日, 3月 5th, 2010

コンテンツ量が少なく、footerが上にきてしまっている

というときjQueryを使ってきちんと下部に表示するようなスクリプトを書いてみた。

htmlはdiv#header、div#main、div#footerという構成を前提にします。

これら3つの高さがウィンドウサイズより小さかった時に、#mainの大きさを指定するっていうこと。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
jQuery(document).ready(function(){
  var winHeight = jQuery(window).height();
  var headHeight = jQuery('#header').height();
  var mainHeight = jQuery('#main').height();
  var footHeight = jQuery('#footer').height();
 
  var fullHeight=mainHeight+headHeight+footHeight;
 
  if (fullHeight <= winHeight) {
   var wrapHeight = winHeight-headHeight-footHeight;
   jQuery(function() {
    jQuery('#main').height(wrapHeight);
   });
  }
});
</script>

うむ。

どうして「$」じゃないかって?

それは、「エラーになった」からです。

コンフリクトっていうんでしょうか。

他のプラグインではいけてるっぽいんですが。

でも、まー、うまくいってるから良しとします。

1つの手段として、有効であれば・・・

timestamp

日曜日, 2月 14th, 2010

自サイトの整理とかしていて、新しくしようとしていて、

作ったサイトとかブログとかツイッターとか、全部1つのページにしちゃおうと、

このブログと同じグリッドで行こうと、何やかんやしていて、形にはなった。

ほんで、twitterの「about….ago」をつけたいなぁ、と思いつけてみる。

PEARのXML_RSSを使用(ってかこれしか使えない)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//TWITTERの呟きを取得
$tweet_url="(RSSのURL)";
$tweet=&new XML_RSS($tweet_url);
$tweet->parse();

foreach($tweet->getItems() as $key=>$item02){

    //つぶやきからどれくらいの時間が経ったのか表示する
    $past=$item02['pubdate'];
    $past=time()-strtotime($past);
    if($past<60){
        $item02['pubdate']="about 1 minite ago";
    }else if($past<3600){
        $item02['pubdate']="about ".round($past/60) ." minites ago";
    }else if($past<7200){
        $item02['pubdate']="about 1 hour ago";
    }else if($past<86400){
        $item02['pubdate']="about ".round($past/3600) ." hours ago";
    }else if($past<172800){
        $item02['pubdate']="about 1 day ago";
    }else{
        $item02['pubdate']="about ".round($past/86400)."days ago";
    }
}

タイムスタンプを力技で「分」「時間」「日」にするっていう。

もっとスマートなやり方があるんだろうけど、まだわからないし、表示が出来たっていう達成感。

私のサイトで確認してみて下さい

twitterでは「half a minute」とか「less than a minute」とかあるけど省略。

必要ないですからね。

xml_rss

土曜日, 2月 6th, 2010

自分のブログの記事を、まぁどこぞに出力するものを書いてみようということで、pearのXML_RSSをどどーんと使ってみる。

まずはレンタルサーバーにXML_RSSが入っているか、phpinfo()で調べてみると、まぁ入ってない。

なおかつ、プラグインをアップすることさえ出来ない(っぽい)

漁ってみると、「PEARのディレクトリ作って、.htaccessでパスをとおしてやる」ことにたどりつく。ありがとうございます。

ftpで好きなディレクトリ(パスがとおるところね)にPEARディレクトリを作るか、ローカルからそのままぶち込む

.htaccessで

1
2
3
<IfModule mod_php5.c>
php_value include_path ".;/(フルパス)/PEAR"
</IfModule>

で好きなプラグインをぶち込む。

1
2
3
4
5
6
7
8
9
10
<?php
require_once("XML/RSS.php");
$blog=&new XML_RSS("http://www.takasumi-nagai.com/blog/feed/rss2");
$blog->parse();
foreach($blog->getItems() as $item){
$time_s=strtotime($item['pubdate']);
$time=date(Y年m月d日,$time_s);
echo "<p>".$time." <a href=\"".$item['link']."\">".$item['title']."</a><br/>".$item['description']."</p>";
}
?>

でpostした日時・タイトル・リンク・ディスクリプションを。

twitterのRSSでも使えるんだろうな。

忘れないようにしようっと。

<?php
require_once(“XML/RSS.php”);
$blog=&new XML_RSS(“http://www.takasumi-nagai.com/blog/feed/rss2″);
$blog->parse();
foreach($blog->getItems() as $item){
$time_s=strtotime($item['pubdate']);
$time=date(Y年m月d日,$time_s);
echo “<p>”.$time.” <a href=\”".$item['link'].”\”>”.$item['title'].”</a><br/>”.$item['description'].”</p>”;
}
?>

もういろいろだ

水曜日, 1月 27th, 2010

twitter

google wave

まだまだ色々とコミュニケーションツールはあるのだろう

「…なう」みたいなやつ。

とりあえず、上記2つはおさえたよ。

google waveの使い方、まったくわからんけどね!!

いや、まいった。

smarty

月曜日, 1月 25th, 2010

って初心者には、ややこしいよね。

っていまさらながらに思う。

だけども、フレームワークっていうのは、必要だものね。楽だもの。

progressionとかcakePHPとか、wordpressとか、CMSとか、

ある程度の知識はあったほうがいい(ないと出来ないってことたくさんあるなぁ)。

「簡単にできる」ようになることは、とてもいいことだけども、

「誰でもできる」ってなると、食いっぱぐれてしまう方もいらっしゃるのだろう。

WEBだけに限らず、どの分野でも同じか。

さて、どうしたものか。

sincethen

火曜日, 1月 19th, 2010

あれから、どのくらい経ったのか・・・

を「見る」スクリプトです。

trick7というブログの作者さんが作った、とてもユニークなブログパーツ。

さて、何を計ろう・・・

ちなみに、このパーツがはられているところ(自分だろうが他人のブログだろうが・・・)

クリックしてからの経過時間が見れるそうですよ。

うーむ。面白い。