投稿する際の投稿時間の設定

「投稿を作成」画面の投稿記事記入欄左下の「投稿オプション」をクリックすると、以下の画像のように「閲覧者のコメント」と「投稿日と投稿時刻」の設定が可能になります。


・「閲覧者のコメント」については「許可（初期設定）」にしておいてコメント可能にしておいて下さい。

・「投稿日と投稿時刻」については、投稿日や時刻を指定して投稿することが可能です。

記入されている投稿日によって、このブログの投稿記事の表示される順番が変わります。
通常は、投稿記事を記入し最初に保存された時間が、自動的にその記事の投稿時刻となります。
投稿記事は、最新の投稿日ほどページの前（あるいは上）に表示されます。
投稿してから、新たに記事の表示順番を変えたいときなどに設定すると便利です。

また、「すぐに保存」だけを押して（「投稿を公開」ボタンを押さずに）記事内容を保存すれば、記事の公開を保留あるいは非表示に設定できます。その際に、一番下にある「投稿のリストに戻る」（上画像）をクリックすれば、以下のような画面が現れ、その投稿記事は「下書き」状態として保存されていることが確認できます。
画面左の「編集」をクリックすれば、続けて記事内容を編集し直すことができます。


あるいは、前述の「投稿日と投稿時刻」を将来的な日時に設定し、「投稿を公開」ボタンを押すことで以下の画面のように「予定」として保存され、その後設定した日時がくると自動的に公開表示されることになります。


再度「編集」をクリックすれば、いつでも記事内容と同様に日時の設定も編集し直すことができます。
記事を削除するには投稿リスト画面左側の「削除」をクリックして下さい。

Processingのプログラムをブログ上で表示する方法

Processingでプログラムした内容をWeb上で表示する際の出力方法（applet）があります。
Processingのメニューバー「File>Export Applet」を選択するとそのプログラムのスケッチフォルダ内に「applet」というフォルダが出来上がり、その中に「.jar」、「.java」、「.pde」「index.html」、「loading.gif」という最低でも５つのファイルが出来上がります。通常のWebサイトに表示するには、これら全てをサーバへアップロードすればいいのですが、このブログ（blogger）では「.jar」ファイルがアップロードできないため、少し工夫が必要となります。

以下は、「freehand」（建築発明工作ゼミより）というファイル名のProcessingのプログラムをappletで出力し、できあがった「freehand.jar」ファイルだけを用いてこのブログに表示させる方法です。この場合、appletフォルダ内には「freehand.jar」、「freehand.java」、「freehand.pde」「index.html」、「loading.gif」の５つのファイルが含まれています。

・無料ホームページなどを利用してアップロード可能なサーバを用意。
　（今回の場合、FC2無料ホームページを利用：http://web.fc2.com）
・そのサーバへ「freehand.jar」ファイルだけアップロードする。
　（アップロードファイルのパス：http://kousakudata.web.fc2.com/freehand/freehand.jar）
・アップロード先のパスをメモしておく。
・ブログの投稿欄に、以下のように
　　width:画面幅（プログラム内の画面サイズ、今回の場合：400）
　　height:画面高さ（プログラム内の画面サイズ、今回の場合：300）
　　code:ファイル名
　　archive:ファイルのパス
　を指定して記入する。
　codeは「.java」ファイル内のjavaのクラス名（Processingで保存した際のファイル名と同じ）。
　archiveは、「.jar」ファイルのアップロード先のパスです。
　以下がブログ投稿欄へ記入する内容です。

<applet width="400" height="300" code="freehand" archive="http://kousakudata.web.fc2.com/freehand/freehand.jar">
</applet>

あるいは、「.jar」を含むディレクトリをcodebaseとして追加し（↑より↓の方がいいみたいです：追記）、

<applet width="400" height="300" codebase="http://kousakudata.web.fc2.com/freehand" code="freehand" archive="freehand.jar">
</applet>

複数の「.jar」ファイルがある場合は「archive」の部分を「,」コンマで区切って、

archive="aaa.jar, bbb.jar, ccc.jar"

となります。


以下が表示例です。白い矩形内をマウスでドラッグすると手描きの線が描けるプログラムです。「e」キーを押すと白紙にもどります。

このプログラムのソース：

void setup(){
  size(400,300);   //画面サイズ幅400、高さ300
  smooth();        //滑らかな描画（アンチエイリアス）
  background(255); //背景色を255（白）に設定
}

void draw(){
  //特になし
}

//マウスドラッグ中のプログラム
void mouseDragged(){
  line(pmouseX,pmouseY,mouseX,mouseY); //線を描画
}

//キーが押された時のプログラム
void keyPressed(){ 
  if(key=='e'){      //もしキーが「e」なら
    background(255); //背景色を白で塗り直す
  }
}

このプログラム自体の説明はこちら。

尚、全てのコマンドやライブラリがapplet出力に対応しているとは限らないので、ProcessingのReference内の各コマンド（関数：例えばline()など）のページへ行って「Usage」欄をチェックして下さい。「Usage」に「Web & Application」と書かれてあれば、Web上でも独立したアプリケーションとしても出力可能ですが、「Application」だけであれば、Web用のappletとしては出力できません。

練習でつくってみたプログラムや、試しに書いてみたというようなプログラムでも構わないので、appletで出力してブログへアップしてみて下さい。

投稿の際のヒント

プログラムのコードを投稿する際のヒント（記事内に特定の文字や記号を使う場合）
ブログに記事を投稿する際に「HTMLの編集」と「作成」という二つの記入モードがありますが、以下の説明は「HTMLの編集」を選んで記入する際のヒントです。

以下はArduinoにおけるサーボのソース（建築発明工作ゼミより）ですが、以下の内容を直接記入して投稿するとブログでは表示上問題が出てきます。

#include <Servo.h>
Servo servo;

void setup(){
  servo.attach(3);
}

void loop(){
  float val=analogRead(0)*0.176;
  servo.write(int(val));
  Servo::refresh();
}

まず、ソース内一行目の「<」と「>」は、このままだとHTMLのタグ記号として扱われるので、「<」を「&lt;」に「>」を「&gt;」に置き換える必要があります。そのままだと表示されないかエラーがでることがあります。

変更前：
#include <Servo.h>

変更後：
#include &lt;Servo.h&gt;

また、「x<a」のような場合も置き換えて下さい。あるいは、「<」記号のあとに半角スペースを挿入して下さい。

変更前：
x<a

変更後：
x&lt;a
あるいは
x < a


次に、void setup(){...}やvoid draw(){...}で囲まれたなかの行頭を右にずらして表示させるには、HTMLタグの<pre>...</pre>を使って以下のように全体を囲んでおきます。そうすれば複数の半角スペースで右にずらされたまま表示されます。

投稿の記入例：

<pre>
#include &lt;Servo.h&gt;
Servo servo;

void setup(){
  servo.attach(3);
}

void loop(){
  float val=analogRead(0)*0.176;
  servo.write(int(val));
  Servo::refresh();
}
</pre>

<pre>...</pre>を使わないで記入すると以下のように、すべての行が左寄りになってしまいます。

#include &lt;Servo.h&gt;
Servo servo;

void setup(){
servo.attach(3);
}

void loop(){
float val=analogRead(0)*0.176;
servo.write(int(val));
Servo::refresh();
}

行頭を右にずらす方法として、通常半角のスペース（あるいはタブ）を使いますが、行頭に半角のスペースを挿入しても左に寄せられてしまいます。そのかわりとして全角のスペースを挿入する方法がありますが、通常の文章であれば問題ないけれども、プログラムのソースコードなどに使うと、半角のスペースのかわりに全角のスペースが挿入されているため、表示されているソースをコピー＆ペーストして使う際にエラーが出てきます。見た目にはどちらもスペースなので分かりにくいエラーとなってしまいます。

追記：（kotobukiさんのコメントから）
Arduino 0016からはTools>Copy as HTMLで、ソースをクリップボードにHTMLフォーマットでコピーできるようになりました。
以下は「Copy as HTML」機能を使ってコピー＆ペーストした表示例。
一行目の「<」と「>」は「&lt;」と「&gt;」に要変更。

 
#include <Servo.h>
Servo servo;

void setup(){
  servo.attach(3);
}

void loop(){
  float val=analogRead(0)*0.176;
  servo.write(int(val));
  Servo::refresh();
}