2013年2月28日木曜日

ツイッター表示　2013年2月暫定　CSS３ぱたぱた付

ラベル: , , , ,


ツイッターのAPIの変更によりつぶやきが表示されなくなったという…のが2012年。

意味はまったくわかってないのだが、これまでのやり方ではできなくなって変更したが…

今日、偶然だけど他のこといじっていたら出なくなった… orz　え～早い！でも3月だって言うてたし…

もうダメだ～と思い、javaでいいのないかなと探してみたら、Chirp.js が可愛かった。



で、ツイート年数回の奥野先生はこれでいいのですが（これも3月にまた変更するのかな？）

Chrip.jsは　テキストの長さを調整することができない。　う～ん。これは取得したものをおかしいけど、phpでつめて…とか思ったりして。

でも、根本的対応をしていかないといけないらしい。
アプリとして登録が必要らしいが…。

こちらの方は賢い方のようです。
1は暫定で…
ちゃんと登録して認証されたもので作ったらしい。

もう　OAuth 認証って何？　トークンって何？　友達の名前はとおる君だよ！という感じなんですけど。

とりあえず、なんか、@制御が使えなくなったらしく…。書き直したらうまく表示できたが…。
暫定は…



<?php

$filename="https://api.twitter.com/1/statuses/user_timeline/kenkouin.xml?count=5&include_rts=1callback=?";

$xml=simplexml_load_file($filename);
$i= 0;
if($xml){
foreach($xml ->status as $item){
if(++$i>4) break;
$text = (string)$item->text;
$id = (string)$item->id;
$text = mb_strimwidth($text,0,48);
print ("<p><a href=https://twitter.com/kenkouin/status/".$id.">".$text." ...</a></p>");
}}
else {
   print "メンテナンス中です";
}

?>
知りませんでした。simple_xml のエラー処理。　if（ファイル名）なんて書き方があるんだなと。

賢くなったわ。
でも、最近私の心はPHPよりもjava script に走っているのだが…。でも、この方が書いているのを見てら長すぎて…やっていけない気持ちになってしまった。

お＝っす　認証調べなきゃ…。

ありました　何とか3月中にやらないと…もうめんどくさすぎる。　感謝します！

それにしても…技術の進歩がもうハンパないな。　これはもう乗り遅れるぞ！と思ってしまう。書いて書いて書きまくっていかないと絶対にできなくなるなと思うことしきり。　参考こちらも


この画像を使って、ホバーで鳥をパタパタさせることができるアニメーション
↑
ここの記事も動かなくなって　どうも　animation: 名前 時間 steps(数, end)　0 infinite;　と書くと動いた　0がいらないみたい。　参考はここ。

これは大変な時代になってきたなと。楽しいけど…。@keyframes とか何なん？
悪いけどペンギンの背景画像はどのブラウザでやってもうまく色は変わりませんでしたが…。私の持ってる全部のブラウザでペンギンちゃんは悩ましく動きました。

でもこっちのはIE10とfirefoxで無事色変わる。　

これなんて読みにくいけど！　もっと使えるサンプル希望！でももう使えているのはわかった。

いや～～。どうしよう。

ブロガーで動くかやってみる…

<div class="twitter-bird step"></div>
↓
こっちは <div class="twitter-bird no-step"></div>

IE10動くけどfirefox 動かない…
.twitter-bird {
background-image: url(画像のパス);
cursor: pointer;
display: inline-block;
height: 150px;
width: 150px;
}

.twitter-bird.no-step {
margin-right: 50px;
}

.twitter-bird.no-step:hover {
-webkit-animation: fly 0.2s infinite;
-moz-animation: fly 0.2s infinite;
animation: fly 0.2s infinite;
}

.twitter-bird.step:hover {
-webkit-animation: fly 0.2s steps(3)  infinite;
-moz-animation: fly 0.2s steps(3)  infinite;
animation: fly 0.2s steps(3)  infinite;
}

@-webkit-keyframes fly {
from { background-position: 0 0; }
    to { background-position: -450px 0; }
}

@-moz-keyframes fly {
from { background-position: 0 0; }
    to { background-position: -450px 0; }
}

@keyframes fly {
from { background-position: 0 0; }
    to { background-position: -450px 0; }
}
これをアドバンスのcssに追加してみました。

オシャレなサイトをいろいろ見れる…

この記事にめぐりあって思わず刺激を受けました。
awwwards あ～私にこのような仕事ができる日がくるんだろうか。
とりあえず角丸ができる　border-radius とかを取り入れていきましょうな。

肩こりだったので、思いついて左マウスに変えて,かれこれ5年近くおかげでかなり肩こりが楽だと思っていたのですが、この頃はすっかり左マウスに慣れてしまい、逆に左ばかりを使うようになったため、おもいついて右にトラックボールを追加して２刀流を目指しています。でもまだまだ工夫が必要のようです。肩や手首が痛いともう勉強できないですね。腰痛も結構な感じになっているので…。椅子も…

もう難しいことはかんがえないようにして、なるべく買うことを考えようと思うこの頃。

ちなみに簡単に　jquery で　幅とか変更する方法。なるへそ。


// 普通に https://twitter.com/settings/widgets で生成されるスクリプト
<a class="twitter-timeline" data-dnt=true href="https://twitter.com/search?q=%23samuraism" data-widget-id="生成されたID">#samuraism に関するツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

// jQueryとsetTimeoutの組み合わせで無理矢理幅を変更するところ
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        function setWidgetWidth() {
            if ($("#twitter-widget-1").length > 0) {
                // ↓ ここを書き換えれば好きにカスタマイズできる
                $("#twitter-widget-1")[0].width = "300px";
                // ↑ ここを書き換えれば好きにカスタマイズできる
            } else {
                setTimeout(setWidgetWidth, 500);
            }
        }
        setWidgetWidth();
    </script>

HTML5化する魔法のjs見つけました。


<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)

　約束しないと、送信できません。再度の場合はリロードが必要です。


0 コメント :

コメントを投稿

コメントありがとうございます。


サイト内検索


View My Stats