ラベル - このブログの使い方 の投稿を表示しています。 すべての投稿を表示
ラベル - このブログの使い方 の投稿を表示しています。 すべての投稿を表示

2009年4月19日日曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

話し方

なんかコメント欄で話すのだるくなったから、手軽に話せるチャット機能を導入しちゃいました。
こんなの。
下のほーにスクロールしていけば見つかります。
これからは基本こっちで話そう

続きを読む...

2009年3月17日火曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

「続きを読む」の作り方。

新しく「続きを読む」というのを作れるようにした。

「続きを読む」っていうのは、記事が長くなるときなどに要約だけ表示させといて、「続きを読む」をクリックすると全部読めるようにするやつ。みんな知ってるよね。
どうやればいいかは「続きを読む」から。

投稿するときに出てくる画面には二つのタブがある。「HTMLの編集」と、「作成」だ。
「続きを読む」を作成するときはまず「HTMLの編集」をみてほしい。


要約
<span class="fullpost">
残りの本文
</span>

このようにして欲しい。要するに、続きを<span>で囲むのだ。
これは投稿テンプレートとして書いておくから、利用してくれたらいい。
「続きを読む」としたくないときはこのタグを消せばいい。
それだけで「続きを読む」という風にできる。

続きを読む...

2009年3月14日土曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

このブログの基本的な使い方 (3)

今回はこれから利用していこうと思うサービスを紹介する。
とりあえず上記すべてのアカウントを作っておくことをオススメする。

YouTubeはもちろんあのお馴染み動画共有サイト。

vimeoも動画共有サイト。YouTubeほどの知名度・動画数はないけど、YouTubeよりアート寄りで、画質がいい。サイトのデザインもかっこいい。
動画を投稿に組み込むときはこっちを使ってほしい。
例えばこんな感じ。

Flickrも超有名な写真共有サイトだから説明はいらないと思う。
基本的に静止画の作品はここにストックすることにしようと思う。

Dropboxはオンラインストレージサービス。たとえばBlenderのソースファイルをこのブログからダウンロードさせたいなら、これにファイルをアップしてURLを取得してリンクさせるといい。

linoはオンライン付箋サイト。アイデアとかをいっぱい書き出す(ブレーンストーミング)ときとかに使おうと思う。

facebookは超有名なSNS。ここにもグループを作った。

続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

このブログの基本的な使い方 (2)

このブログの基本的な使い方 (1)』ではソースコードの色付けの方法を紹介した。

今回はこのブログの機能について説明する。
こっちを(1)にすべきだったかもしれないけど、まあいいや。
このブログの各機能はそれぞれアフォーダンスを持っているけど、分からない人がいるといけないので簡単な説明と、こういう風に使っていこうという方向性を示そうと思う。


エントリ投稿の使い方
どんなとき投稿すればいいのか
  • 新しい作品や試作品を作ったとき
  • 分からないことがあって、みんなに教えてほしい/考えてほしいとき
  • 何かアイデアが思いついて、みんなに知らせたいとき
  • その他いいたいことがあるとき
作品のソースコードはそのまま書いてもいいし、ファイルへのリンクを載せるだけでもいい。
どのオンラインストレージサービスを利用するかは『このブログの基本的な使い方 (3)』で紹介する予定だ。

ラベルについて
投稿を作成する際に「この投稿のラベル」という欄でラベルを追加することができる。
これは記事に関係の深いことを単語とか一言で表したもので、関連のある項目ごとに記事を整理することができる。

「,」(コンマ)で区切ることで複数のラベルを設定できる。
ただ、むやみにラベルを増やさないでほしい。煩雑になるから。
「この投稿のラベル」の横に「すべて表示」というリンクボタンがある。これをクリックすると今まで作成してきたラベルがすべて表示される。基本的に似た内容のラベルは作らないように先にここを確認してから、どうしても必要なときだけラベルを追加しても構わない。

コメント欄の使い方
これは普通にそのエントリへの感想でもいいし、意見、提案など議論の場となったらいいと思う。
有用な情報へのリンク、分からないこと、質問など色々書いていけばいい。

記事への評価
このブログに導入した機能の一つに『outbrain』がある。これは直感的な方法で「5段階」評価ができる。


続きを読む...
このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

このブログの基本的な使い方 (1)

ソースコードを載せる時は
このサイトに行って(Bookmarkしておくといいと思う)、フォームにコードをコピペして「変換」ボタンを押すだけ。
すると下のテキストボックスにHTML用に変換されたものが出てくるのでそれを投稿のとき[HTMLの編集]タブから好きなところにコピペすればコードに色とかがついて出てくる。
テストも兼ねて試しにやってみる。

まず

PFont font;

color bgc = color(0);

boolean announce = true;

int tLength =50;
int eLength =260;

float Cx=mouseX;
float Cy=mouseY;

float[] tX = new float[tLength];
float[] tY = new float[tLength];
float[] tSpx = new float[tLength];
float[] tSpy = new float[tLength];
float[] tAcx = new float[tLength];
float[] tAcy = new float[tLength];
float[] tScale = new float[tLength];
float[] textsize = new float[tLength];

float[] eX = new float[eLength];
float[] eY = new float[eLength];
float[] eSpx = new float[eLength];
float[] eSpy = new float[eLength];
float[] eAcx = new float[eLength];
float[] eAcy = new float[eLength];
float[] eScale = new float[eLength];
float[] Radius = new float[eLength];

float r = 100;

void setup() {
size(900,600);
colorMode(HSB,100);
background(0);
smooth();
frameRate(20);

font = loadFont("SansSerif-48.vlw");
textFont(font);
textAlign(CENTER);

//arrays
for(int i=0; i targetX) tAcx[i] = -tAcx[i];
tAcy[i] = eScale[i] * sq(distX);
if(tY[i] > targetY) tAcy[i] = -tAcy[i];

tSpx[i] += tAcx[i]/10;
tSpy[i] += tAcy[i]/10;
tX[i] = tX[i] + tSpx[i];
tY[i] = tY[i] + tSpy[i];
}

//****************************************************************************
//ellipse attraction
//****************************************************************************
void ellipseAttraction(int i,float targetX,float targetY) {
float distX = eX[i] - targetX;
float distY = eY[i] - targetY;
eAcx[i] = eScale[i] * sq(distX);
if(eX[i] > targetX) eAcx[i] = -eAcx[i];
eAcy[i] = eScale[i] * sq(distX);
if(eY[i] > targetY) eAcy[i] = -eAcy[i];

eSpx[i] += eAcx[i]/10;
eSpy[i] += eAcy[i]/10;
eX[i] = eX[i] + eSpx[i];
eY[i] = eY[i] + eSpy[i];
}

//****************************************************************************
//fadeToBgc
//****************************************************************************
void fadeToBgc() {
rectMode(CORNER);
noStroke();
fill(bgc,50);
rect(0,0,width,height);
}

//****************************************************************************
//acctions
//****************************************************************************
int c = 40;

void mousePressed() {
c = int(random(79));
for(int i=0; i< xs1="width;" xs2="width;" xs3="width;" xs4="width;"> width) xs5 += sp5;
else xs5=width;
}

というコードがざっとあるとする。
これはProcessingのプログラムだから一回試してみて。
汚いコードだけど。だいぶ前に作ったやつだから許してね
これを例のサイトに行って変換してくる。
PFont font;

color bgc = color(0);

boolean announce = true;

int tLength =50;
int eLength =260;

float Cx=mouseX;
float Cy=mouseY;

float[] tX = new float[tLength];
float[] tY = new float[tLength];
float[] tSpx = new float[tLength];
float[] tSpy = new float[tLength];
float[] tAcx = new float[tLength];
float[] tAcy = new float[tLength];
float[] tScale = new float[tLength];
float[] textsize = new float[tLength];

float[] eX = new float[eLength];
float[] eY = new float[eLength];
float[] eSpx = new float[eLength];
float[] eSpy = new float[eLength];
float[] eAcx = new float[eLength];
float[] eAcy = new float[eLength];
float[] eScale = new float[eLength];
float[] Radius = new float[eLength];

float r = 100;

void setup() {
size(900,600);
colorMode(HSB,100);
background(0);
smooth();
frameRate(20);

font = loadFont("SansSerif-48.vlw");
textFont(font);
textAlign(CENTER);

//arrays
for(int i=0; i<tLength; i++) {
textsize[i] = int(random(10,30));
tScale[i] = random(0.0004,0.0005);
tAcx[i] = tAcy[i] = 0;
tSpx[i] = random(-1,1);
tSpy[i] = random(-1,1);

tX[i] = width/2 + r*cos(radians(random(i*6)));
tY[i] = height/2+ r*sin(radians(random(i*6)));
}

for(int j=0; j<eLength; j++) {
Radius[j] = random(20,40);
eScale[j] = random(0.0004,0.0005);
eAcx[j] = eAcy[j] = 0;
eSpx[j] = random(-1,1);
eSpy[j] = random(-1,1);

eX[j] = random(width/2 + r*cos(radians(360) ) );
eY[j] = random(height/2+ r*sin(radians(360) ) );
}
}

//****************************************************************************
//draw
//****************************************************************************

void draw() {
fadeToBgc();

for(int i=0; i<eLength; i++) {
ellipseAttraction(i,mouseX,mouseY);
fill(random(c,c+20),99,99,40);
ellipse(eX[i],eY[i],Radius[i],Radius[i]);
}

for(int j=0; j<tLength; j++) {
textAttraction(j,mouseX,mouseY);
textSize(textsize[j]);
fill(99,60);
text("E0838",tX[j],tY[j]);
}

if(announce){
announce();
if(fade<fadeMax) fade = fade*1.1 + 0.2;
}else {
xs1 = -100;
xs2 = -100;
xs3 = -100;
xs4 = -100;
xs5 = width + 1000;
}
}

//****************************************************************************
//text attraction
//****************************************************************************
void textAttraction(int i,float targetX,float targetY) {
float distX = tX[i] - targetX;
float distY = tY[i] - targetY;
tAcx[i] = tScale[i] * sq(distX);
if(tX[i] > targetX) tAcx[i] = -tAcx[i];
tAcy[i] = eScale[i] * sq(distX);
if(tY[i] > targetY) tAcy[i] = -tAcy[i];

tSpx[i] += tAcx[i]/10;
tSpy[i] += tAcy[i]/10;
tX[i] = tX[i] + tSpx[i];
tY[i] = tY[i] + tSpy[i];
}

//****************************************************************************
//ellipse attraction
//****************************************************************************
void ellipseAttraction(int i,float targetX,float targetY) {
float distX = eX[i] - targetX;
float distY = eY[i] - targetY;
eAcx[i] = eScale[i] * sq(distX);
if(eX[i] > targetX) eAcx[i] = -eAcx[i];
eAcy[i] = eScale[i] * sq(distX);
if(eY[i] > targetY) eAcy[i] = -eAcy[i];

eSpx[i] += eAcx[i]/10;
eSpy[i] += eAcy[i]/10;
eX[i] = eX[i] + eSpx[i];
eY[i] = eY[i] + eSpy[i];
}

//****************************************************************************
//fadeToBgc
//****************************************************************************
void fadeToBgc() {
rectMode(CORNER);
noStroke();
fill(bgc,50);
rect(0,0,width,height);
}

//****************************************************************************
//acctions
//****************************************************************************
int c = 40;

void mousePressed() {
c = int(random(79));
for(int i=0; i<tLength; i++) {
tX[i] = mouseX;
tY[i] = mouseY;
}
for(int j=0; j<eLength; j++) {
eX[j] = mouseX;
eY[j] = mouseY;
}
}

void keyPressed() {
switch(key){
case 's':
announce = true;
break;
case 'h':
announce = false;
break;

case'0':
obicolor = 0;
break;
case'1':
obicolor = 10;
break;
case'2':
obicolor = 20;
break;
case'3':
obicolor = 30;
break;
case'4':
obicolor = 40;
break;
case'5':
obicolor = 50;
break;
case'6':
obicolor = 60;
break;
case'7':
obicolor = 70;
break;
case'8':
obicolor = 80;
break;
case'9':
obicolor = 90;
break;
}
}

//****************************************************************************
//announce
//****************************************************************************

float fade=0;
float fadeMax = 40;
float obihaba = 200;

float xs1 = -100;
float xs2 = -100;
float xs3 = -100;
float xs4 = -100;

float xs5 = width+2000;

float sp1 = random(3,7);
float sp2 = random(3,7);
float sp3 = random(3,7);
float sp4 = random(3,7);

float sp5 = random(-7,-3);

int obicolor = 0;

float yPos;
float yDiff;

float speed = 0.1;

void speed(){
yDiff = (yPos - mouseY)*speed;

yPos -= yDiff;
}

void announce() {
speed();

rectMode(CORNER);
noStroke();
fill(obicolor,99,99,fade);
rect(0,yPos - obihaba/2,width,obihaba);
float obi2 = obihaba + 23;
fill(obicolor,99,79,fade/2);
rect(0,yPos - obi2/2,width,obi2);


//making UI

String s1 = "Type 'h' to hide this announce.";
String s2 = "Type 's' to see this announce again.";
String s3 = "Type '0~9' to change color of announce band.";
String s4 = "0 is Red, 4 is Green, 6 is Blue, 8 is Purple,9 is Pink.";

String s5 = "Welcome to TaKUMA YOSHiTANi's homepage.";

textAlign(RIGHT);
textSize(40);
fill(obicolor,99,99,fade+10);
text("Announce",width,yPos - 99);

moveStrings();

textSize(12);
fill(99,89);
text(s1,xs1,yPos - 80);
text(s2,xs2,yPos - 50);
text(s3,xs3,yPos - 20);
text(s4,xs4,yPos + 10);

textSize(30);
text(s5,xs5,yPos + 70);
}

void moveStrings() {
if(xs1 < width) xs1 += sp1;
else xs1=width;

if(xs2 < width) xs2 += sp2;
else xs2=width;

if(xs3 < width) xs3 += sp3;
else xs3=width;

if(xs4 < width) xs4 += sp4;
else xs4=width;


if(xs5 > width) xs5 += sp5;
else xs5=width;
}

どうだろう?色が付いているのが分かると思う。
基本的な使い方 (1) ではソースコードの色付けを紹介しました

続きを読む...

on vimeoon Flickron Facebookon lino