Home > 2007年11月

2007年11月

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

User JavaScriptの練習 - canvas要素でページ上に線を引く

Opera User JavaScriptを分からん人間が練習してます。

canvas要素を使ってページに線を引くスクリプト

ページを開くと、ページ上に適当に線を引く。

// ==UserScript==
// @include *
// @exclude
// ==/UserScript==


document.addEventListener('load', function() {

    // canvas要素の作成
    var canvas = document.createElement('canvas');
    var height = window.getComputedStyle(document.body, '').getPropertyValue('height');
    var width = window.getComputedStyle(document.body, '').getPropertyValue('width');
    canvas.setAttribute('height', height);
    canvas.setAttribute('width', width);
    // canvas要素の CSS
    canvas.style.cssText = 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'z-index: 100;';
    document.body.appendChild(canvas);

    // 描画コンテクストを得る
    var context = canvas.getContext('2d');
    // 色を指定
    context.strokeStyle = 'red';
    // 線を引く
    context.beginPath();
    context.moveTo( 100, 100);
    // 座標をランダムに決める
    for ( var i=0; i < 9; i++ ) {
        context.lineTo( Math.floor(Math.random() * parseInt( width)),
                        Math.floor(Math.random() * parseInt( height)));
    }
    context.closePath();
    context.stroke();
}, false);

canvas要素をページ上にする

canvas.style.cssText = 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'z-index: 100;';
strokeStyle
図形の輪郭の色を指定
fillStyle
図形を塗る色を指定

線の座標はページの範囲内をランダムに指定している。

Math.floor(Math.random() * parseInt( width))
Math.floor(Math.random() * parseInt( height))

参考にしたサイト

User JavaScriptの練習 - canvas要素の初歩

Opera User JavaScriptを分からん人間が練習してます。

canvas要素で線を引いてみる

canvas要素
<canvas id="canvas" width="400" height="400"></canvas>

User JavaScriptで canvas要素を作成するとこんな感じ。

var canvas = document.createElement('canvas');
canvas.setAttribute( 'width', 400);
canvas.setAttribute( 'height', 400);
document.appendChild( canvas)

canvas要素だけでは描画されない。

getContextメソッドによって 描画コンテクストを得られる。描画機能にアクセスできるようになる。

var context = canvas.getContext('2d');
矩形を描く

SVG とは異なり、canvas は一つの原始図形 - 矩形 - のみをサポートしています。 他の全ての図形は一つ以上のパスを組み合わせて作らなくてはなりません。幸いなことに、とても複雑な図形を作ることが可能なパスを描く関数のコレクションがあります。

Canvas tutorial:Drawing shapes - MDC

strokeRect( x, y, width, height)
輪郭の描かれた矩形を描く。
fillRect( x, y, width, height)
塗られた矩形を描く。
clearRect( x, y, width, height)
指定された領域を消去する。
パスを使う
beginPath()
パスを開始する。
closePath()
パスを閉じる。始点と最後の点を直線で結ぶ。
moveTo( x, y)
座標を移動する。何も描画されない。
lineTo( x, y)
直線を描く。

最後に stroke または fill メソッドによって実際に canvasに描画される。

stroke()
輪郭の描かれた図形を描く。
fill()
輪郭のない単色の図形を描く。

ページに矩形と線を描くスクリプト

ページを開くと、ページの一番上に矩形と線を描く。

// ==UserScript==
// @include *
// @exclude
// ==/UserScript==


document.addEventListener('load', function() {

    // canvas要素の作成
    var canvas = document.createElement('canvas');
    canvas.setAttribute( 'width', 300);
    canvas.setAttribute( 'height', 200);
    canvas.style.border = 'thin green solid';
    document.body.insertBefore( canvas, document.body.firstChild );

    // 描画コンテクストを得る
    var context = canvas.getContext('2d');

    // 矩形を描く
    context.fillRect(50,50,100,100);
    // 線を引く
    context.beginPath();
    context.moveTo( 200, 50);
    context.lineTo( 200, 150);
    context.lineTo( 250, 50);
    context.lineTo( 250, 150);
    context.stroke();
}, false);

canvas要素で描いた矩形と線

スクリプトを実行して canvas要素に描かれた矩形と線。

参考にしたサイト

User JavaScriptの練習 - 要素の表示・非表示のスイッチ

Operaで役に立たない User JavaScriptを書いています。

要素の表示・非表示を切り替えるスイッチを作る

Operaのホームページの画像に表示・非表示のスイッチを付けた。そのスイッチをクリックすると画像の表示・非表示を切り替える。

// ==UserScript==
// @include http://www.opera.com/*
// @include http://jp.opera.com/*
// @exclude 
// ==/UserScript==

document.addEventListener('load', function() {
    // 画像を取得
    topImage = document.getElementById('contentstart').nextSibling.firstChild.firstChild;
    // スイッチの要素を作成
    var switchImage= document.createElement('div');
    switchImage.style.cssText = 'padding: 6px;' + 'margin: 6px;' + 'background-color: white;' +
        'color: black;' + 'font: 20px sans-serif;';
    var txt = document.createTextNode( '+');
    switchImage.appendChild(txt);
    topImage.parentNode.insertBefore( switchImage, topImage );
    topImage.style.display = 'none';

    // スイッチの動作
    switchImage.addEventListener('click', function() {
        if ( topImage.style.display ) {
            topImage.style.display = '';
        } else {
            topImage.style.display = 'none';
        }
        event.preventDefault();
    }, false);
}, false);

画像を取り出す。

topImage = document.getElementById('contentstart').nextSibling.firstChild.firstChild;

表示・非表示するスイッチを付けた画像を全部隠すのではなく、一部を残して隠す

非表示した画像の一部を残して、何があるのかを示す。

画像の縦の長さを短くするだけでは、比率が変わるだけで画像は消えない。

画像を囲む要素を作り、その要素の長さを変えることで、画像の見える部分の長さを変えられる。

// ==UserScript==
// @include http://www.opera.com/*
// @include http://jp.opera.com/*
// @exclude 
// ==/UserScript==

document.addEventListener('load', function() {
    // 画像を取得
    topImage = document.getElementById('contentstart').nextSibling.firstChild.firstChild;
    // スイッチの要素を作成
    var switchImage= document.createElement('div');
    switchImage.style.cssText = 'padding: 6px;' + 'margin: 6px;' + 'background-color: white;' +
        'color: black;' + 'font: 20px sans-serif;';
    var txt = document.createTextNode( '+');
    switchImage.appendChild(txt);
    topImage.parentNode.insertBefore( switchImage, topImage );

    // 画像を囲む要素を作成
    var closeImage = document.createElement('div');
    var topImageHeight = topImage.height;
    var closeHeight = '80px';
    closeImage.style.height = closeHeight;
    closeImage.style.overflow = 'hidden';
    closeImage.style.border = 'thin solid red';
    topImage.parentNode.insertBefore( closeImage, topImage );
    closeImage.appendChild( topImage );

    // スイッチの動作
    switchImage.addEventListener('mouseover', function() {
        if ( closeImage.style.height == closeHeight ) {
            closeImage.style.height = topImageHeight;
        } else {
            closeImage.style.height = closeHeight;
        }
    }, false);
}, false);
closeImage.style.overflow = 'hidden';

にしておかないと、画像がはみ出して、下の要素と重なる。

画像の表示・非表示のスイッチを付けたOperaのページ

赤い枠に囲まれたのが一部を残して非表示にした画像。画像の上にある「+」が画像の表示・非表示を切り替えるスイッチ。

FC2ブログのカテゴリの記事一覧を表示

  • 2007-11-18 (Sun)
  • blog

カテゴリページにカテゴリの記事一覧を表示するようにテンプレートを編集した

ここのブログのテンプレートは公式テンプレート sharpgreenです。

カテゴリページとは、メニューのカテゴリのリンクをクリックすると開くページです。URIは「http://(ブログのドメイン名)/blog-category-(カテゴリナンバー).html」となる(例 http://karafuto50.blog117.fc2.com/blog-category-2.html)。

カスタマイズする前のカテゴリページは記事がそのまま表示されて、全体を見通せないから、カテゴリの記事タイトルのリストを表示するようにしてみた。

テンプレートの HTMLの編集
<!-- ▼カテゴリページでの一覧ここから --> 
<!--category_area--> 
<div class="category_area"> 
<h3><%sub_title> の記事一覧</h3> 
<ul> 
<!--topentry--> 
<li><%topentry_year>/<%topentry_month>/<%topentry_day>&nbsp;<a href="<%topentry_link>" title="<%topentry_title>へ"><%topentry_title></a></li> 
<!--/topentry--> 
</ul> 
</div> 
<!--/category_area--> 
<!-- /カテゴリページでの一覧ここまで△ -->

上記の HTMLを<!--topentry-->の上に挿入しました。

それからカテゴリページではカテゴリの記事一覧だけを表示して、記事自体を表示したくないので、挿入した HTMLの下の「<!--topentry-->~<!--/topentry-->」を「<!--not_category_area-->~<!--/not_category_area-->」で挟んだ。

テンプレートの CSSの編集

カテゴリページ用にスタイルを追加した。

div.category_area h3 {
  text-align: center;
  margin-bottom: 1.5em;
}
div.category_area li {
  font-size : 110%;
  margin: 0.5em 0;
}
表示記事数の設定

いつも表示される記事数しか記事のリストは出ないと思っていたが、新管理画面では環境設定>ブログの設定>記事の設定で、最新記事一覧、記事(ページ別)、記事(月別)、記事(カテゴリ別)、記事(検索結果)、記事(タグ検索結果)ごとに表示件数が変えられるようになっていた。

しかし、カテゴリの記事の表示件数が旧管理画面の設定に戻っていることがある。(旧管理画面にログインした後だけだと思ったが、そうでもないようだ。)

参考にしたサイト

FC2ブログの月別アーカイブの記事一覧を表示

  • 2007-11-18 (Sun)
  • blog

月別アーカイブページに月別の記事一覧を表示するようにテンプレートを編集した

ブログのテンプレートは公式テンプレート sharpgreenを使用しています。

テンプレートの変数以外は FC2ブログのカテゴリの記事一覧表示 とほとんど同じです。

URIは「http://(ブログのドメイン名)/blog-date-(年月番号).html」となる。(例 http://karafuto50.blog117.fc2.com/blog-date-200709.html)

テンプレートの HTMLの編集
<!-- ▼月別ページでの一覧ここから --> 
<!--date_area--> 
<div class="date_area"> 
<h3><%now_year>年<%now_month>月の記事一覧</h3>
<ul> 
<!--topentry--> 
<li><%topentry_year>/<%topentry_month>/<%topentry_day>&nbsp;<a href="<%topentry_link>" title="<%topentry_title>へ"><%topentry_title></a></li> 
<!--/topentry--> 
</ul> 
</div> 
<!--/date_area--> 
<!-- /月別ページでの一覧ここまで△ -->

上記を<!--topentry-->の上に挿入しました。

それから月別の記事一覧を表示している時は記事自体を表示しないように、挿入した HTMLの下の「<!--topentry-->~<!--/topentry-->」を「<!--not_date_area-->~<!--/not_date_area-->」で挟んだ。

テンプレートの CSSの編集

月別アーカイブページ用にスタイルを追加した。

div.date_area h3 {
  text-align: center;
  margin-bottom: 1.5em;
}
div.date_area li {
  font-size : 110%;
  margin: 0.5em 0;
}
表示記事数の設定

新管理画面>環境設定>ブログの設定>記事の設定の「記事(月別)」に表示件数を好きな数(1~99)に設定して、更新する。

カテゴリの記事一覧やブログ内検索のリストだと記事の表示件数が旧管理画面の設定に戻っていることがあるが、今のところ月別アーカイブの記事一覧の場合は表示件数が旧管理画面の設定に戻ることはない。

参考にしたサイト

Home > 2007年11月

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。