#author("2020-11-19T14:53:10+00:00","default:Lang","Lang")
#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」フォルダ内に入れてください。

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

なお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(このサイトの現在の設定) [#iaef6c36]

CSSファイルに以下のテキストを追記してください。~
font-size から white-space までの行がアスキーアートの表示に大きく関わっている部分なので、編集の際は十分注意して下さい。

 /* aapro.inc.php */
 p.aapro {
 	font-size:16px;
 	font-family:'Mona','IPAMonaPGothic','IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','MS Pゴシック',sans-serif;  /* 5ちゃんねるwiki (https://info.5ch.net/index.php/アスキーアート)より引用 */
 	line-height:110%;
 	width:auto;
 	white-space:nowrap;
 	color:black;
 	background-color:#F0F0F0;
 	padding:.5em;
 	border-top:#DDD 1px solid;
 	border-bottom:#888 1px solid;
 	border-left:#DDD 1px solid;
 	border-right:#888 1px solid;
 	margin-left:1em;
 	margin-right:1em;
 }

***方法2 [#w23294eb]
CSSファイルの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 の行をコメントアウトするか削除してください。

それと、以下のテキストを追記してください。~
font-size から white-space までの行がアスキーアートの表示に大きく関わっている部分なので、編集の際は十分注意して下さい。
 /* aapro.inc.php */
 p.aapro {
 	font-size:100%;
 	line-height:110%;
  	width:auto;
 	white-space:nowrap;
 	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;
 }

***方法3 [#r49e5b7c]

Internet Explorer 6 対応版です。非推奨。CSSが PHP ファイルである必要があります。

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 の行をコメントアウトするか削除してください。

それと、以下のテキストを追加してください。~
font-size から white-space までの行がアスキーアートの表示に大きく関わっている部分なので、編集の際は十分注意して下さい。

 /* 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;
 }

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

:例文|
''&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]

''2020/11/19 更新''

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

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

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

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;
 }

それからCSSファイルに以下のテキストを追加してください。~
font-size から white-space までの行がアスキーアートの表示に大きく関わっている部分なので、編集の際は十分注意して下さい。

 /* aapro.inc.php */
 p.aapro {
 	font-size:16px;
 	font-family:'Mona','IPAMonaPGothic','IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','MS Pゴシック',sans-serif;  /* 5ちゃんねるwiki (https://info.5ch.net/index.php/アスキーアート)より引用 */
 	line-height:110%;
 	width:auto;
 	white-space:nowrap;
 	color:black;
 	background-color:#F0F0F0;
 	padding:.5em;
 	border-top:#DDD 1px solid;
 	border-bottom:#888 1px solid;
 	border-left:#DDD 1px solid;
 	border-right:#888 1px solid;
 	margin-left:1em;
 	margin-right:1em;
 }
//
//同様に、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;
// }

//**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なので他人が書き込んだレスも自由に編集できてしまいます。

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


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