#contents
*アスキーアート表示プラグインとは? [#ea812e09]
**基本情報 [#d8f4cb40]
:プラグイン名|aapro

:種別|ブロック型プラグイン

:書式|
''#aapro{{''~
&color(blue){アスキーアート1行目};~
&color(blue){アスキーアート2行目};~
  &color(blue){・};~
  &color(blue){・};~
  &color(blue){・};~
&color(blue){アスキーアート最後の行};~
''}}''

:概要|プロポーショナルフォントで描かれたアスキーアートをPukiWikiできれいに表示するプラグインです。

**詳細 [#q2c4f4fe]
このプラグインは[[sue445さんのアスキーアート出力プラグイン>MarronWiki:Plugins]]を改造した物です。~
オリジナルのプラグインはWindowsに特化しているらしくMacではうまく表示されないので改造しました。~
主に2ちゃんねるのアスキーアートをターゲットにしています。

[[IPAモナーフォント:http://www.geocities.jp/ipa_mona/]]にも対応。なので MS Pゴシックを手に入れることができない環境(Linux など)でもOK。

v(バージョン)1.4.6以上のPukiWikiで利用可能。ソフトウェアライセンスは[[GNU GPL 2:http://www.opensource.jp/gpl/gpl.ja.html]]です。

ちなみに "aapro" の名前の由来は、~
''A''SCII ''a''rt drawn with a ''pro''portional font プロポーショナルフォントで描かれたアスキーアート)

**リリース情報 [#q846a6b4]
|バージョン|リリース年月日|概要|h
|1.01|2006-09-05|初リリース|
|1.02|2007-01-11|URLを自動的にリンクに変換する機能を追加|
|1.03|2008-02-17|バグフィックス版。[[pukiwiki.dev:BugTrack2/29#zd28eeb6]]に従い定数名を修正しました。機能に変更はありません。|
|1.04|2008-09-15|以前のバージョンにあった、横に長いAAを貼るとレイアウトが崩れる問題を回避|

#br
//**注意事項 [#da8690a8]
//***v1.03以前 [#z4ebc207]
//オリジナルである[[sue445さんのアスキーアート出力プラグイン>MarronWiki:Plugins]]にはない次のような欠点があります。
//
//「貼り付けたアスキーアートの右端がウェブブラウザのウィンドウからはみ出してしまうとき、~
//アスキーアートの行の内容がウィンドウの幅に合わせて自動的に折り返される。~
//その結果、レイアウトが崩れる」
//
//この場合は自作のページ幅設定プラグインを併用して対処するなどしてください。
//***v1.04 [#w4a06ad6]
//上記のレイアウト崩れの問題を回避するための機能を追加しましたが''ブラウザによってはこの機能が働きません''。
//
//例:Internet Explorer 5.01 のような旧型や、スタイルシートの処理を無効にしているブラウザ
//
//現在はこのようなブラウザはほとんど使われていないので無視してもかまわないと私は考えていますが~
//それらを考慮する場合は、ページ幅設定プラグインの併用などの対策を。
//
//なお、レイアウト崩れ問題は[[オリジナルのプラグイン>MarronWiki:Plugins]]では起こらないので~
//Windowsユーザ向けのサイトの場合はそちらを利用する事をお薦めします。
//
//
// 2015/11/21 もう不要だと思われる説明なのでコメントアウト
//
*使用例 [#gb600ff7]
 #aapro{{
         _,,:-ー''" ̄ ̄ ̄ `ヽ、
      ,r'"           `ヽ.
  __,,::r'7" ::.              ヽ_
  ゙l  |  ::              ゙) 7
   | ヽ`l ::              /ノ )
  .| ヾミ,l _;;-==ェ;、   ,,,,,,,,,,,,,,,_ ヒ-彡|
   〉"l,_l "-ー:ェェヮ;::)  f';;_-ェェ-ニ ゙レr-{
   | ヽ"::::''   ̄´.::;i,  i `'' ̄    r';' }
  . ゙N l ::.  ....:;イ;:'  l 、     ,l,フ ノ
  . |_i"ヽ;:...:::/ ゙'''=-='''´`ヽ.  /i l"
    .| ::゙l  ::´~===' '===''` ,il" .|'".
     .{  ::| 、 :: `::=====::" , il   |
    /ト、 :|. ゙l;:        ,i' ,l' ノト、
  / .| \ゝ、゙l;:      ,,/;;,ノ;r'" :| \
 '"   |   `''-、`'ー--─'";;-'''"   ,|   \_
 }}

     ↓


#aapro{{
        _,,:-ー''" ̄ ̄ ̄ `ヽ、
     ,r'"           `ヽ.
 __,,::r'7" ::.              ヽ_
 ゙l  |  ::              ゙) 7
  | ヽ`l ::              /ノ )
 .| ヾミ,l _;;-==ェ;、   ,,,,,,,,,,,,,,,_ ヒ-彡|
  〉"l,_l "-ー:ェェヮ;::)  f';;_-ェェ-ニ ゙レr-{
  | ヽ"::::''   ̄´.::;i,  i `'' ̄    r';' }
 . ゙N l ::.  ....:;イ;:'  l 、     ,l,フ ノ
 . |_i"ヽ;:...:::/ ゙'''=-='''´`ヽ.  /i l"
   .| ::゙l  ::´~===' '===''` ,il" .|'".
    .{  ::| 、 :: `::=====::" , il   |
   /ト、 :|. ゙l;:        ,i' ,l' ノト、
 / .| \ゝ、゙l;:      ,,/;;,ノ;r'" :| \
'"   |   `''-、`'ー--─'";;-'''"   ,|   \_
}}

#br

実体参照も使えます。
 #aapro{{
 ♠ ♦ ♥ ♣
 }}

     ↓

#aapro{{
♠ ♦ ♥ ♣
}}

URLは自動的にリンクに変換されます。~
プラグインの設定によって自動リンクを許可しないようにすることもできます。
#aapro{{
このサイトのURL
 http://warota.web5.jp/

先頭のhを抜いたURLはリンクされない
 ttp://warota.web5.jp/
}}

*使用上の注意点 [#q64fdadb]
**その1 [#if370d8f]
アスキーアートの中に
 }}
が含まれているとエラーとなります(Wikiの仕様)。~
この場合、最初と最後の中括弧の数を増やせば、正しく表示する事が出来ます。
#br
エラーの例
エラーの例
 #aapro{{
   /゙ ゙.";ヽゞ'-、、
  .jミノ,ノノ~ ̄""''ヽミ!
  i ノハー′     .iミ!
  iミ! ,--、_ ,_,,,..、、.i;;l
  }iト  ィェァ} (ェoァ j}}
   レl  .ノ,!_!、   j-'
    l  /_二'_、〉 .ij
 -ー;丶、  ̄  ノ;ー-、,
 ;;;;;;;;;;/;;;\ニ//;;ヽ;;;;;;;;;;
 ;;;;;;;;;;ヽヽ .};;{ /;;;;;/;;;;;;;;;;;
 }}
     ↓

#ref(error.png,nolink)

#br
対処法
 #aapro{{{{
   /゙ ゙.";ヽゞ'-、、
  .jミノ,ノノ~ ̄""''ヽミ!
  i ノハー′     .iミ!
  iミ! ,--、_ ,_,,,..、、.i;;l
  }iト  ィェァ} (ェoァ j}}
   レl  .ノ,!_!、   j-'
    l  /_二'_、〉 .ij
 -ー;丶、  ̄  ノ;ー-、,
 ;;;;;;;;;;/;;;\ニ//;;ヽ;;;;;;;;;;
 ;;;;;;;;;;ヽヽ .};;{ /;;;;;/;;;;;;;;;;;
 }}}}
     ↓
#aapro{{{{
  /゙ ゙.";ヽゞ'-、、
 .jミノ,ノノ~ ̄""''ヽミ!
 i ノハー′     .iミ!
 iミ! ,--、_ ,_,,,..、、.i;;l
 }iト  ィェァ} (ェoァ j}}
  レl  .ノ,!_!、   j-'
   l  /_二'_、〉 .ij
-ー;丶、  ̄  ノ;ー-、,
;;;;;;;;;;/;;;\ニ//;;ヽ;;;;;;;;;;
;;;;;;;;;;ヽヽ .};;{ /;;;;;/;;;;;;;;;;;
}}}}

**その2 [#gcbeed00]
AAに機種依存文字が含まれていると文字化けすることがあります。~
似たような文字に置き換えてください。

//**その3 [#f56fb021]
//上記の[[注意事項>#da8690a8]]に関することも必要に応じて書き加えて下さい。
//
//:例文|
//横幅の大きいAAを貼付けるとAAの行の内容が自動的に折り返されてしまう事があります。~
//そういう場合はページ幅設定プラグインを併用してください。
//
// 2015/11/21 もう不要だと思われる説明なのでコメントアウト
//
*インストールの手順 [#ydcdc085]
**プラグインファイルの追加 [#c1a8b8a6]
#ref(aapro.inc.php.zip)~
このファイルをダウンロード・解凍して「plugin」フォルダ内に入れてください。

EUC-JPでエンコーディングしていますので、UTF-8版をお使いの方はテキストエディタなどでエンコーディングを変換してください。変換しなくても一応動きます。

なおv1.03とv1.04の内容はほとんど変わらないので、v1.03からv1.04へアップグレードする場合は、プラグインファイルの更新は必要ではありません。

**PukiWiki設定ファイルの編集 [#fb54a641]
[[MarronWiki:Plugins]]より引用
>デフォルトでは複数行引数はOFFになっているので、pukiwiki.ini.phpの56行目の以下のところで1になっている部分を0に変えてください。
 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 1); // 1 = Disabled

**スタイルシートの編集 [#zb0b0bd0]
***v1.03 以前から v1.04 へのアップグレード [#o34ed842]
v1.03 以前から v1.04 へアップグレードする場合は skin/pukiwiki.css.php の p.aapro に次の2つの宣言を書き加えて下さい。
 	white-space:nowrap;
 	width:auto;
これで終わりです。

***方法1 [#w23294eb]
skin/pukiwiki.css.php の40行目辺りに body,tdの 設定項目があります。
 body,td {
 	color:black;
 	background-color:white;
 	margin-left:2%;
 	margin-right:2%;
 	font-size:90%;
 	font-family:verdana, arial, helvetica, Sans-Serif;
 }
ここの font-size とfont-family の行をコメントアウトするか削除してください。~
それから、以下のテキストを追加してください。
 /* aapro.inc.php */
 p.aapro {
 	font-size:100%;
 	white-space:nowrap;
 	width:auto;
 	line-height:110%;
 	border-top:#DDD 1px solid;
 	border-bottom:#888 1px solid;
 	border-left:#DDD 1px solid;
 	border-right:#888 1px solid;
 	padding:.5em;
 	margin-left:1em;
 	margin-right:1em;
 	color:black;
 	background-color:#EEE;
 }
必要に応じて宣言ブロックの内容を編集してもかまいませんが、font-size から line-height までの4行は~
アスキーアートの表示に大きく関わっている部分なので変更する場合は十分注意して下さい。

***方法2 [#r49e5b7c]

上記の「方法1」では body の font-size を変更していますが、そうするとサイトのレイアウトが大きく変わり、読みづらくなることがあります。~
font-size を変えたくない場合はこの方法を使ってください。

skin/pukiwiki.css.php の40行目辺りに body, td の設定項目があります。

 body,td {
 	color:black;
 	background-color:white;
 	margin-left:2%;
 	margin-right:2%;
 	font-size:90%;
 	font-family:verdana, arial, helvetica, Sans-Serif;
 }

ここの font-family の行をコメントアウトするか削除してください。~
それから、以下のテキストを追加してください。

 /* aapro.inc.php */
 p.aapro {
 <?php   if (preg_match('/MSIE [4-6].+Win/', $_SERVER['HTTP_USER_AGENT'])) { ?>
 	font-size:small;
 <?php   } else { ?>
 	font-size:medium;
 <?php	}?>
 	white-space:nowrap;
 	width:auto;
 	line-height:110%;
 	border-top:#DDD 1px solid;
 	border-bottom:#888 1px solid;
 	border-left:#DDD 1px solid;
 	border-right:#888 1px solid;
 	padding:.5em;
 	margin-left:1em;
 	margin-right:1em;
 	color:black;
 	background-color:#EEE;
 }
必要に応じて宣言ブロックの内容を編集してもかまいませんが、line-height までの8行は~
アスキーアートの表示に大きく関わっている部分なので変更する場合は十分注意して下さい。

これを使用する際には、ブラウザのユーザーエージェントを偽装している人に問題が発生する場合があるので~
ユーザーエージェントを変えるようにアナウンスする必要があるでしょう。

:例文|
''&color(red){注意};:ウェブブラウザのユーザーエージェントを偽装している方へ''~
このサイトではアスキーアートをきれいに表示する為に、
ウェブブラウザの種類によってアスキーアートの文字サイズの最適化を行っております。~
そのため、Opera や FireFox 等のブラウザで、ユーザーエージェントを IE に偽装している場合に
アスキーアートの文字サイズが本来の設定よりも小さく表示される事があります。~
また、IE コンポーネントブラウザにおいてユーザーエージェントを「IE 系でない」ように偽装している場合にも
同様の問題が発生するかもしれません。~
このサイトを閲覧される際にはユーザーエージェントの設定を元に戻してください。

#br

:*補足説明|
p.aapro のプロパティ "font-size" の値をキーワード "medium"(標準の大きさ)で指定する事で
body や他の親要素の font-size の値に依存せずにAAを表示できるはずですが、
IE 6.0 以前でPukiWikiをブラウズするときには "small" がブラウザ標準のフォントサイズになる
((すなわち "font-size" の値を "medium" に設定すると、IEでは標準の文字サイズの約1.2倍の大きさで表示されてしまう))
という困った仕様があるので、ブラウザが IE 6.0 以前の場合は "font-size" の値を "small" となるようにしなければいけません。
この条件分岐を行ったのが上記のコードです。~
''追記:''IEコンポーネントブラウザの中に、ユーザーエージェントの値に「MSIE」を含まない(意図的に隠す場合が多いらしい)
ものがあるそうなので、上記の説明文にそのことについてのアナウンスを追記しておきます。

*プラグインの設定 [#e8538f6d]
デフォルトでは、AA中のURLは自動的にリンクに変換されます。~
自動リンクを許可しない場合は、aapro.inc.phpファイルの15行目辺りにある「URLの自動リンクを許可するかどうかの設定」を編集してください。

*Monobook skin へのインストール [#h55d559b]
ここではMonobook skin を使用している場合のプラグイン導入法を説明します。~
%%以下の説明は「スタイルシートの編集」の「方法2」に該当します。%%~
以前の方法ではFireFoxでうまく動作しなかったようなので改善しました。

なお、動作テストはまだ十分には行えておりませんので、悪しからず。

また、ページ幅設定プラグインは Monobook skin では動作しません。

** プラグインファイルの追加 [#fad5b52f]
同上
**PukiWiki設定ファイルの編集 [#mc873ae5]
同上
**スタイルシートの編集 [#jfcc523f]
monobook.cssを複製して、2つのファイル「monobook_oldie.css」「monobook_other.css」を作成してください。

それから新しいファイルの両方を次のように編集します。

 body {
 -	font: x-small sans-serif;
 +	font-size: x-small;
 	background: #f9f9f9 url(headbg.jpg) 0 0 no-repeat;
 	color: black;
 }
 
 /* IE6 + EUC */
 * html body {
 -	font: xx-small Arial, sans-serif;
 +	font-size: xx-small;
 }
 
 /* IE7 + EUC */
 *+html body {
 -	font: x-small Arial, sans-serif;
 +	font-size: x-small;
 }
 
 /* Opera8 */
 *+html > /**/body {
 -	font: x-small sans-serif;
 +	font-size: x-small;
 }

次に、monobook_oldie.css に以下のテキストを追加してください。

 /* aapro.inc.php */
 p.aapro {
 	font-size:small;
 	white-space:nowrap;
 	width:auto;
 	line-height:110%;
 	border-top:#DDD 1px solid;
 	border-bottom:#888 1px solid;
 	border-left:#DDD 1px solid;
 	border-right:#888 1px solid;
 	padding:.5em;
 	margin-left:1em;
 	margin-right:1em;
 	color:black;
 	background-color:#EEE;
 }

また、monobook_other.css に以下のテキストを追加してください。

 /* aapro.inc.php */
 p.aapro {
 	font-size:medium;
 	white-space:nowrap;
 	width:auto;
 	line-height:110%;
 	border-top:#DDD 1px solid;
 	border-bottom:#888 1px solid;
 	border-left:#DDD 1px solid;
 	border-right:#888 1px solid;
 	padding:.5em;
 	margin-left:1em;
 	margin-right:1em;
 	color:black;
 	background-color:#EEE;
 }
必要に応じて p.aapro の宣言ブロックの内容を編集してもかまいませんが、font-size から line-height までの4行は~
アスキーアートの表示に大きく関わっている部分なので変更する場合は十分注意して下さい。

**monobook.skin.phpの編集 [#h17b6133]
 - <link rel="stylesheet" type="text/css" media="screen" href="<?php echo SKIN_DIR ?>monobook/monobook.css" />
 + <link rel="stylesheet" type="text/css" media="screen" href="<?php echo SKIN_DIR ?>monobook/<?php
 +if (preg_match('/MSIE [4-6].+Win/', $_SERVER['HTTP_USER_AGENT'])){ ?>monobook_oldie.css<?php } else { ?>monobook_other.css<?php } ?>" />


*コメント [#g0146bf6]

PukiWikiなので他人が書き込んだレスも自由に編集できてしまいます。
管理人に確実に知らせたい事があれば[[メールフォーム:http://warota.web5.jp/postmail/postmail.html]]をご利用下さい。

'''SPAM対策のため、投稿にIDとパスワードの入力が必要です。'''
-ID : Lang
-パスワード : hisabisaniwarota
#pcomment(,10,reply)

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS