Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

テンプレート編集プレビューでトップページ以外(個別、JavaScriptオフ等)を表示

最終更新日 2010年10月23日 / 履歴

プルダウン

ボタン

 テンプレートのプレビューでトップページ以外を確認するスクリプト(ブックマークレット)です。プルダウンとボタンのどちらかを利用します。ボタンの方が使いやすいかもしれません。


 プレビューバーを表示するバージョンは、FC2ブログスマートフォンテンプレート編集 プレビュー用スクリプトからインストールしてください。また、同バージョン(FC2tmpPreviewBfix、FC2tmpPreviewPfix)を既にインストールしている場合は、無効にするか、アンインストールしてください。

利用方法 : ブックマークレット(IEなど Greasemonkeyを利用しない)

 お気に入りに登録して使用します。『プルダウン』と『ボタン』のどちらかのリンクを(右)クリックして、お気に入り(ブックマーク)に追加します。試すだけであれば、ショートカット(URL)のコピーをします。

Bookmarklet : FC2tmpPd(プルダウン) / FC2tmpBn(ボタン)

 [環境設定][テンプレートの管理]ページを開き、お気に入りに追加された上記リンクをクリックすると各種プレビューボタンが表示されます。リンクをクリックするときはJavaScriptオンの状態でなければなりません。オンにするのはテンプレートの管理ページにアクセスする前でも後でも構いません。

 プレビューページの見方については各ボタンの説明をご覧ください。

 ブラウザにFirefoxやChrome、Operaを使用しているときは、Greasemonkey向けのスクリプトを利用することを推奨します。

利用方法 : Greasemonkey(Firefox、Chrome、Opera向け)※推奨

 ブラウザにFirefoxやChrome、Operaを使用しているときは、『Greasemonkey』用のスクリプトを利用します。対象ページでスクリプトが起動します。Firefoxの場合は、JavaScriptオフの状態でも機能します。

 FirefoxでGreasemonkeyをインストールしていない場合は、アドオンからインストールします。インストール後、ブラウザを再起動するとユーザスクリプトをインストールできるようになります。推奨テキストエディタには『TeraPad』『EmEditor』『秀丸』などのexeファイルを指定します。エディタの変更などについては使い方をご参考ください。

 Firefoxは『プルダウン』と『ボタン』のどちらかを(左)クリックします。

Greasemonkey : プルダウン / ボタン

 インストール完了後、ブログ管理ページの[環境設定][テンプレートの管理]ページを開くとプレビューボタンが追加されています。

 Google Chromeはリンクを(右)クリックして「リンク先を保存」を選択して適当な所にファイルを保存。ブラウザメニューの[ツール][拡張機能]で拡張機能ページを開いて、保存したファイルを拡張機能ページ内にドラッグ&ドロップします。

 Operaはリンクを(右)クリックして「リンク先のコンテンツを保存」を選択します。保存先は、ブラウザメニューの[ツール][設定][詳細設定][コンテンツ-JavaScriptを有効にする][JavaScriptオプション]の「ユーザーJavaScriptフォルダ」を指定します。フォルダが指定されていない場合は、適当な場所に『userscript』といった名前のフォルダを作成し、それを指定します。そして、改めて保存します。

各ボタンの説明

[update]ボタン

 更新後のページを別ウインドウで開く[更新]ボタンです。JavaScriptがオンのときに有効になります。JavaScriptオフの状態でテンプレート編集ページにアクセスしたときに使用する[更新]ボタンです。

 更新する度にブックマークレットを読み込むのが面倒なときや管理サーバが不安定なときの保険として利用できます。

 更新後のページに「テンプレートのHTML、CSSを更新しました。」のメッセージが表示されていれば更新は完了です。編集を続けるときは、最初に編集していたウインドウに戻って編集します。更新後のページが重いときは更新後のページを閉じます

[name]ボタン

 ver0.2 で追加。編集している現在のウインドウで更新する[更新]ボタンです。元からある[更新]ボタンと同じです。テンプレートの名前を変更するときに使います。通常の更新はできるかぎり[update]で行います。JavaScriptがオンのときに有効になります。ページが更新されるのでブックマークレットを利用している場合は再度起動する必要があります。

[index]ボタン

 プレビューボタンと同じです。トップページのプレビューを表示します。このボタンはJavaScriptオフで編集ページにアクセスしたときにプレビューボタンの代わりに使用します。オンでも使用できます。

個別ページのプレビュー

(プルダウン)

  1. プルダウンで[no]を選択。
  2. [のテキストボックス]に表示したいページの番号を入れて[preview]ボタンをクリック
    [10]→[preview] blog-entry-10.html を表示

(ボタン)

  1. [のテキストボックス]に表示したいページの番号を入れて[no]ボタンをクリック
    [10]→[no] blog-entry-10.html を表示
ページ(page)のプレビュー

(プルダウン)

  1. プルダウンで[page]を選択。
  2. [のテキストボックス]に表示したいページの番号を入れて[preview]ボタンをクリック
    [2]→[preview] page-2.html を表示

(ボタン)

  1. [のテキストボックス]に表示したいページの番号を入れて[page]ボタンをクリック
    [2]→[page] page-2.html を表示
カテゴリページのプレビュー

(プルダウン)

  1. プルダウンで[cat]を選択。
  2. [のテキストボックス]に表示したいカテゴリの番号を入れて[preview]ボタンをクリック
    [1]→[preview] blog-category-1.html を表示
    ページ数を指定するときは、[のテキストボックス]に表示したいページ数を入れます。
    [1][3]→[preview] category1-3.html を表示(カテゴリ番号1の3ページ目)

(ボタン)

  1. [のテキストボックス]に表示したいカテゴリの番号を入れて[cat]ボタンをクリック
    [1]→[cat] blog-category-1.html を表示
    ページ数を指定するときは、[のテキストボックス]に表示したいページ数を入れます。
    [1][3]→[cat] category1-3.html を表示(カテゴリ番号1の3ページ目)
年月日ページのプレビュー

(プルダウン)

  1. プルダウンで[date]を選択。
  2. [のテキストボックス]に表示したい年月日を入れて[preview]ボタンをクリック
    [201001]→[preview] blog-date-201001.html を表示(2010年1月)
    [20100101]→[preview] blog-date-20100101.html を表示(2010年1月1日)
    ページ数を指定するときは、[のテキストボックス]に表示したいページ数を入れます。
    [201001][3]→[preview] blog-date-201001-3.html を表示(2010年1月の3ページ目)

(ボタン)

  1. [のテキストボックス]に表示したい年月日を入れて[date]ボタンをクリック
    [201001]→[date] blog-date-201001.html を表示(2010年1月)
    [20100101]→[date] blog-date-20100101.html を表示(2010年1月1日)
    ページ数を指定するときは、[のテキストボックス]に表示したいページ数を入れます。
    [201001][3]→[date] blog-date-201001-3.html を表示(2010年1月の3ページ目)
ユーザタグページのプレビュー

(プルダウン)

  1. プルダウンで[tag]を選択。
  2. [のテキストボックス]に表示したいタグを入れて[preview]ボタンをクリック
    [news]→[preview] ?tag=news を表示
    ページ数を指定するときは、[のテキストボックス]に表示したいページ数を入れます。
    [news][3]→[preview] ?tag=news&page=3 を表示(newsタグの3ページ目)

(ボタン)

  1. [のテキストボックス]に表示したいタグを入れて[tag]ボタンをクリック
    [news]→[tag] ?tag=news を表示
    ページ数を指定するときは、[のテキストボックス]に表示したいページ数を入れます。
    [news][3]→[tag] ?tag=news&page=3 を表示(newsタグの3ページ目)
各ページのJavaScriptオフページをプレビュー

 直前に表示したページがプレビューされます。

  1. オフで表示したいページをJavaScriptオンでプレビューする
  2. JavaScriptをオフにする
  3. [off]ボタンをクリック

 別のページも確認するときは、JavaScriptをオンにしてから、1~3の手順を繰り返します。トップページのオフプレビューは1で[index]ボタンをクリックします。

検索ページのプレビュー

 検索ページへの広告導入により、現在、プレビューできません。

テンプレート編集ページが重いときは

 JavaScriptオフの状態でテンプレートの編集ページにアクセスします。するとiframeなどが生成されなくなり、動作が軽くなります。

 ページの読み込みが完了したらJavaScriptをオンにし、ブックマークレットを起動させます(お気に入りに登録したリンクをクリック)。

 既存の[更新][プレビュー]ボタンは使えませんが、後から追加されたボタンはすべて機能します。

 更新するときは[update]ボタンをクリックします。クリックするときはJavaScriptがオンでなければなりません。更新後のページは別のウインドウで開きます。

 「テンプレートのHTML、CSSを更新しました。」のメッセージを確認します。更新後のページが重いときは更新後のページを閉じます。閉じなかったときは次に更新したときにそのウインドウで上書き更新されます。

 編集を続ける場合は編集していたウインドウに戻り、作業を続けます。終了する場合は他の管理ページに移動するなどしてください。

 更新メッセージが表示されないときは元のウインドウに戻り、編集したテンプレート記述をコピーして、編集ページをJavaScriptオンで別のウインドウに開き、貼り付けて更新してください。

※Firefoxを使用している場合は、Greasemonkey向けのスクリプトを利用します。JavaScriptをオンにしなくても動作します。

更新履歴など

動作確認(Win) : IE6-8、Firefox2,3、Opera10、chrome4-5、Safari4

 使用は自己責任でお願いします。

 記事やコードの転載・再配布はご遠慮ください。改造はご自由にどうぞ。

 質問や要望・不具合などはコメントかTwitterにお願いします。

  • 【更新履歴】
  • 2010 10-23 - [修正]Greasemonkey版のみ。Chromeでの誤作動を修正。スクリプトの内容については変更ありません。
  • 2010 10-08 - [更新ver1.0]広告の関係でプレビューできなくなった検索ページを外しました。携帯モードを付加しました。noとページ指定を分割しました(ページ数の指定が可能に)。既存のスクリプトをアンインストール・削除後、インストールし直します。ChromeをGreasemonkeyで統一しました。携帯テンプレートではユーザータグは機能しません。
  • 2010 04-03 18:15 - Greasemonkey用のスクリプトのみ変更。サーバー番号を編集しなくてもそのまま使えるようにしました。動作などの変更はありません。再インストールの必要はありませんが、サーバー番号の変更・追加などが面倒な方は、以前のスクリプトをアンインストール後、再度インストールしてください。
  • 2010 03-09 23:31 - ver0.2公開。テンプレートの名前を変更しやすいように同じウインドウで更新できる[name]ボタンを追加しました。ページが更新されるのでブックマークレットを利用している場合は再度起動させてください。テンプレートの名前を変更するときにだけご使用ください。通常の更新は[update]で行います。
関連記事
  1. comment
  2. tatsu 2012-12-24 19:57 No.1660 #-URL

    テンプレートのプレビューブックマークレット、Firefoxで本当に便利に使わさせてもらってます。有難う御座います。

    一つ質問なんですが、記事投稿する時のプレビューで通常はエントリーページが表示されますが、私のテンプレートはエントリーページとトップページがカラム変更していて、記事タイトルなどの見えかたが違う仕様にしています。

    投稿前にトップページをプレビューを確認しておかないと都合がわるく、投降後にタイトルを修正することが度々あります。スクリプト(ブックマークレット)はつくることは可能でしょうか。

  3. Pdy 2013-01-07 18:16 No.1687 #-URLhttp://paro2day.blog122.fc2.com/blog-entry-1037.html

    遅くなり申し訳ないです。こんにちは。

    パラメータが機能しないため、テンプレートのように記事編集のプレビュー先をトップページなどに変更することはできません。
    プレビュー用のテンプレートを作成すればできないことはないと思いますが(個別ページのコード部分をトップページと同じコードにしたテンプレートを別に用意するなど)、テンプレートを変更する度に調整が必要だったり、スクリプトを多用しているテンプレートだと正常に表示されないケースがでてきそうです。

    記事タイトル程度のちょっとした文量の反映であればトップページを開いてブラウザの開発ツールなどで過去記事のタイトルを新しい記事のタイトルに編集して確認するのが手っ取り早いかもしれません。

    http://paro2day.blog122.fc2.com/blog-entry-1037.html
    表示中のページを編集するブックマークレットをやっつけで作りました。
    (1) 新しい記事のタイトルをコピーする
    (2) 別タブでブログトップページを開く
    (3) トップページでブックマークレットを起動
    (4) 適当な過去記事タイトルのテキストを選択
    (5) コピーした新記事タイトルを貼り付け
    ※トップページでのタイトル表示を重視する場合は(4)で見栄えを確かめながらタイトルを決定。

  4. tatsu 2013-01-07 21:30 No.1688 #-URL

    変な質問して申し訳ございませんでした。大変ご迷惑をお掛けした感じでコメントしてから反省してました。

    [E]dit-t、使用させて頂きましたらすごく便利です。何時も、50文字くらいの記事タイトルが多く、更新後トップページを見ると、読点、改行、などで記事ぺージと見栄えが違い読みにくく感じることが多く更新後修正するのが不便でした。

    多分 [E]dit-tは毎回使うと思います。各ページカラムを変更していたり、記事ページタイトルにh1タグ使っている方などはこれは表示確認に便利だと思います。本当にお手数をおかけしました。

  5. paruparu 2013-02-14 12:15 No.1768 #-URLhttp://arinogotokuatumarite.blog19.fc2.com/

    こんにちは。 今更ながら こちらの Greasemonkey版のスクリプトを Sleipnir3(Chrome) にインストールして使わせていただくことにしました。 ありがとうございます。

    それで、記事とは直接関係ないことで申し訳ないのですが、Chrome ではテンプレ適応前のプレビュー時 ?preview で、javascript が無効な状態でしか確認ができない仕様になっているようなのですが、これは Chromeの仕様なので仕方がないことなのでしょうか。。

    自分でも調べてみたものの、方法は見つからず。。 もし何か方法をご存じでしたら教えて頂けないかなと思いコメントさせていただきました。

  6. PARO 2013-02-15 22:32 No.1775 #-URL

    こんにちは。
    それはChromeのセキュリティ対策による仕様ですね。
    記事内に書いたスクリプト要素も記事プレビューで動作しないはずです。
    「<script>alert('YAHOO!!')</script>」
    回避方法はいくつかあるのですが時間のある時に拡張機能でも作ってみます。
    そっち系のは作ったことがないのでどうなるかわかりませんが。

    プラグイン内などで動作することを利用するのも回避方法の一つです。

  7. paruparu 2013-02-17 06:53 No.1780 #-URL

    > 回避方法はいくつかあるのですが時間のある時に拡張機能でも作ってみます。

    全く分からないので、気長に待たせて頂きます。
    それまでは確認したい時だけ 他のブラウザを使うようにしたいと思います。
    Chromeのセキュリティ対策 ← 最近この 「他のブラウザではOKなのに...」 という仕様に色々つまづいてます。。

  8. PARO 2013-02-27 00:41 No.1843 #-URLhttp://paro2day.blog122.fc2.com/blog-entry-1077.html

    作りましたっ。
    動作確認はGoogle Chrome 25です。
    本家Chromeでないといくつか機能が制限されるかもしれません。
    使う時だけ拡張機能を有効にして終わったら無効にする感じでも。

  9. paruparu 2013-03-01 16:00 No.1852 #-URL

    http://paro2day.blog122.fc2.com/blog-entry-1077.html
    に載せてもらった方法でスクリプトも動作するようになりました! いつもありがとうございます。

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/526-e0309390

  1. trackback