s21gブログに、過去に書いた記事をまとめて紹介する記事を書くための機能を実装しました。

記事の新規作成画面(下図)から検索を行う事で、 検索結果の記事のタイトルとリンクを生成します。

ss

よろしくお願いします。

posted by Png genki on Thu 8 Jan 2009 at 17:37

追記 PDF生成が重いようなので、backgroundで処理するように変更しました。
PDFで閲覧するためには、

  • 既存の記事について
    更新するとPDFが生成されます(キューに入り、生成処理終了後に記事表示するとPDF URLへのリンクが表示されます)
  • 2008年10月以降の記事について
    順次PDF生成処理を行っていきますのでしばらくお待ちください
  • 今後の作成される記事について
    作成・更新ごとにPDF生成されるようになっています。

gem prawn、plugin prawntoを使って実現しています。

条件:BlueCloth形式で書かれた記事であること

書いた記事を(意図したとおりに)PDFで表示させるには、ピュアなBlueCloth形式で記述する必要があります。BlueCloth形式を選択して記述していても、HTMLタグを含む記事についてはPDFで表示した場合、HTMLタグがそのまま表示されてしまいます。

制限:仕様

  • HTMLタグは(展開されずに)そのまま表示されます
  • 画像はJPG, PNGのみ(prawnの制限)
  • リンクは下記のように展開されます(PDFのリンクアイテムにはなりません)
    • [title](link先URL) => title(link先URL)
    • <URL> => URL
  • 太字(**で囲まれたもの)は通常の文字として展開されます
  • 表中の||、==は空のセルになります(マージされません)

制限:バグ

現状下記のような制限があります。

  • 長いタイトルの記事だと、タイトルが切れてしまう
  • 画像が表示されない場合がある
  • [math]タグを使ってのformulaの数式画像が表示されない
  • その他
posted by Png satoko on Wed 22 Oct 2008 at 11:31

今回はブログ左上に表示されるアイコンの設定の仕方について説明します。

ログインをしていただき、右上にあるsettingsをクリックします。

mihon1.PNG
Accountの画面の左側にある灰色の長方形の下にある「Upload」をクリックします。
「blog.s21g.comでアップロードするファイルを選択します」というウインドウが表示されるので、アイコンにしたい画像を選択します。
わずかな時間の後で、画像が表示されます。

これでアイコンが表示されるようになります。

posted by Png mari on Thu 14 Aug 2008 at 02:05

使い方の追加です。

投稿した記事のタイトルをクリックすると、その記事のみが表示されるようになります。
その際のサイドバーに表示される「Menu」について説明します。

Post New Article」は新しい記事の投稿画面に移ります。
Edit This Article」は表示されている記事の編集画面になります。本文やタイトル、タグなどの修正、追加の際にご使用ください。
編集すると、編集した投稿時間は変更した日時に変わります。ただし、記事の順番は変わりません。

Send Trackback」はトラックバックを送ることができます。「Ping URLs」の欄にトラックバックのURLを記入して、「Send Ping」をクリックしてください。
本文の長さは最大255bytesです。

Back to Draft」は下書きに戻り、タイトルが灰色になります。「Edit This Article」で編集画面になるので、日付の横にある「Draft」のチェックをはずして「Post」をクリックすれば投稿は再び公開されます。

Delete This Article」をクリックすると、本当に削除しても良いか尋ねる小さなウインドウが現れて、「OK」を押すと記事は削除されます。

posted by Png mari on Thu 31 Jul 2008 at 00:12

ブログの使い方を書いていきます。
s21gブログはどなたでもご自由にお使いになれるブログです。お気軽にご使用ください。
専門的なところは任せて、基本的な使い方の説明をしたいと思います。
本当に基本的なものなので、読まれる必要のない方がほとんどです。

まず、s21gのブログを使ってもいいと思ってくださいましたら、ブログ右上にあります「signup」をクリックしてください。
お好きなID、パスワード、メールアドレスを記入していただくと、専用ページが作成されます。
ブログ右上にあります「settings」をクリックしていただきます。
Fullname」の入力は本名、お好きな名前、ID等何度も構いません。この名前は表示されます。入力は任意です。
Email address」を入力してください(すでに入力されている方もいます)。
Mobile email address」の入力は任意となっています。
メールアドレスは非公開です。
アイコンを表示させたい場合には「Upload」をクリックしてください。

右側にあるメニューについて説明します。
Edit Account」は「settings」をクリックするとはじめに表示されるページです。
Setup Your Blog」では、ブログのタイトル、自己紹介、自己紹介欄に表示されるキーワードを入力することができます。
API And IM」は作り途中なので、まだ何も出来ません。
settings」ページでのアイコンはデフォルトのものから変えられないそうです。

ここまででページ設定は完了になります。
さて、次はブログ本文を投稿してみましょう。
settings」の隣にIDが出ているので、それをクリックします。
右側の「Menu」の下の「Post New Article」をクリックします。
Title」「Body」は説明するまでもなくそのままです。Previewで仮の投稿画面になります。
改行は反映されません。タグなどをお使いください。
画像は一つの記事に一つの画像まで添付できます。
投稿の日付は自由に変えることができます。「Draft」のチェックをはずして「Post」を押していただければ投稿できます。「Draft」のチェックをしたままだと仮投稿となり、公開されません。仮投稿ではタイトルが灰色になってます。
Syntax」「Code highlight filter」は投稿の手助けしてくれるページです。
その下にある「Tags」はクリックしたら投稿欄の「Tags」に反映されるというわけでもなく、ただの見本のようです。参考にされてください。

posted by Png mari on Tue 29 Jul 2008 at 22:59

続いては、作表の仕方を紹介します。 このブログシステムは、BlueStoleを参考にして作った作表機能があります。

BlueStole - BlueCloth Wrapper

Ruby の Markdown ライブラリ、 BlueCloth に幾つかの機能を付け足した私家拡張版です。

こんな感じに RTtool を使った作表を行うことが出来ます。

Rendering Algorithm
WhatWhoWhen
Ray TracingWhitted1980
Path TracingKajiya1986
Photon MappingJensen1995
Metropolis Light TransportVeach1997

ソースはこんな感じです。

   1  |caption=Rendering Algorithm
   2  |
   3  |What                      , Who    , When
   4  |
   5  |Ray Tracing               , Whitted, 1980
   6  |Path Tracing              , Kajiya , 1986
   7  |Photon Mapping            , Jensen , 1995
   8  |Metropolis Light Transport, Veach  , 1997

Rttoolを使っているので、以下のようにちょっと複雑な表も作成可能です。

AlphaBravo
CharlieEcho
Delta

ソースはこんな感じです。

   1  |Alpha,==,Bravo
   2  |Charlie,Echo,||
   3  |||,Delta,==

また、このようにCaptionとHeader部分は省略可能です。

posted by Png genki on Tue 29 Jul 2008 at 08:40

このブログシステムには、いままで外向けのドキュメントが無かったのですが、(潜在)アカウント数が徐々に増えてきた事もあり、利用法を書いておこうと思います。

とりあえずわかりにくい所から。 Syntax Highlightつきでソースコードを書くときは、

ruby>>
class Foo
  def foo; puts "bar" end
end
<<ruby

のように、lang>> <<langで囲んで行頭から書きます。 結果はこの通り。

   1  class Foo
   2    def foo; puts "bar" end
   3  end

langに使えるのは、UltraVioleteで利用可能なもの全てです。 よく使いそうな rails、js、shell もショートカットを用意しています。

あとは、以下のように数式もかけます。

[math]
f(x)=\frac{1}{x}
[/math]

結果は以下の通り。


f(x)=\frac{1}{x}

この2つはコメントを書くときにも有効です。

posted by Png genki on Mon 28 Jul 2008 at 00:01
Contents
まとめ記事作成補助機能を作りました
s21gブログの記事がPDFで閲覧できるようになりました
s21gブログの使い方(5) ~アイコンの設定の仕方~
s21gブログの使い方(4)
s21gブログの使い方(3)
s21gブログの使い方(2)
s21gブログの使い方(1)
Comments
瀧内元気: MacOS版は以下にあります * [genki/ViMouse](https://githu... '23-1
KingofSmack: Here also good reads for this mobile applicatio... '14-5
Spencer: You don't have to re-compile it, this version w... '14-4
staiano: Any chance we can get a recompile for 10.9? '14-1
dsjf: https://gist.github.com/6bf1bf2c3cbb5eb6e7a7 これ... '13-1
Services from s21g
twpro(ツイプロ)
Twitterプロフィールを快適検索
地価2009
土地の値段を調べてみよう
MyRestaurant
自分だけのレストラン手帳
Formula
ブログに数式を埋め込める数式コミュニティ