シングスブログ

中小企業のマーケティングやブランディングのコンサルティング。事業開発 (ビジネスモデルの開発)、デジタルマーケティングやウェブサイト改善など事業の持続的・長期的な成長・発展に貢献できるサービスを提供しています。

ホーム JavaScript 2 ページ目

カテゴリー: JavaScript

Twitterのツイートをウェブサイトやブログに表示するJavaScript × JSON

公開日: 更新日: 投稿者: thingsym

Twitterのツイートをウェブサイトやブログに表示するには、ウィジェットを貼り付ける方法がありますが、JavaScript × JSON を使ってTwitterのツイートを表示する方法も。

こんな感じに。


    やり方は、Twitterのユーザー名と表示件数 (count) を設定した

    http://twitter.com/statuses/user_timeline/ユーザー名.json?
callback=twitterCallback2&count=5

    を含む以下の三行のソースを貼り付けるだけ。

    <ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザー名.json?
callback=twitterCallback2&count=5"></script>

    JavaScriptファイルをダウンロードして表示項目を変えたり、スタイルシートでデザインできたりとカスタマイズも自在にできる。

    プログラムのコードに色を付けるライブラリ「google-code-prettify」を導入

    公開日: 更新日: 投稿者: thingsym

    HTMLページに表示したプログラムのコードに色を付けるライブラリ「google-code-prettify」を導入。サンプルをみると、CやJavaをはじめ、HTML、XML、CSS、Javascript、Ruby、PHP、Perl、Python、SQLなどCやBash、XMLライクの言語に対応。

    導入方法は、こちらを参考に。

    まず、ソースコードをダウンロードして、prettify.css と prettify.js をftpでサーバにアップロード。

    そして、アップロードしたライブラリをサーバのパスにあわせてHTMLのHEAD要素内に記述。

    <link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

    BODY要素にも。

    <body onload="prettyPrint()">

    以下はIEと相性が悪いようだ。何かとバッティングしてエラーをはき出す。(追記2009-11-11)

    または、イベントリスナーで呼び出す場合。

    <script type="text/javascript">
try{
  window.addEventListener("load",prettyPrint,false);
}catch(e){
// IE
  window.attachEvent("onload",prettyPrint);
}
</script>

    あるいは、直接呼び出しで。

    <script type="text/javascript">
prettyPrint();
</script>

    使い方はいたって簡単。preとcodeタグにclass名「prettyprint」を付けるだけで色を付けてくれる。

    早速、色分けてくれた。

    最近の投稿

    カテゴリー

    アーカイブ

    検索

    Copyright © 2002 - 2024 シングス All rights reserved.