Firefox:Firefoxで画面キャプチャを撮れるアドオン

Firefox画面キャプチャを撮れるアドオンPearl Crescent Page Saver Basic」をご紹介します。

firefox_pearl_1

WEB開発者だと画面キャプチャを撮ることがよくあります。
プリントスクリーンでも良いのですが、縦長のページの画面キャプチャを撮りたい時など切れてしまいます。

Firefoxのアドオン「Pearl Crescent Page Saver Basic」を使用すれば、縦長のページもクリックするだけでスクリーンショットを撮ることができます。

操作も簡単で使いやすいのでおすすめです。

Pearl Crescent Page Saver Basic 2.8


「Pearl Crescent Page Saver Basic」インストール

1.メニューの「ツール」から「アドオン」を選択します。

firefox_pearl_2

2.検索で「Pearl Crescent Page Saver Basic」を入力し検索します。

firefox_pearl_3

3.「Pearl Crescent Page Saver Basic 2.8」が表示されるので「インストール」ボタンをクリックしインストールします。

firefox_pearl_4

firefox_pearl_5

4.「インストール」クリック後、「今すぐ再起動する」をクリックします。

firefox_pearl_6

5.再起動するとアイコンが表示され、使用できるようになります。

firefox_pearl_7


アイコンをクリックするだけで表示しているページのスクリーンショットを撮ることができます。
アイコン横のメニューで「表示部分のみ画像として保存」や「ページ全体を画像として保存」なども選択できるので便利です。

また、オプションでファイル名や保存フォルダの設定、画像の形式なども設定することが可能です。

CPI:CPIでサーバ移転やドメインが切れた場合のFTP接続

CPIサーバのマルチドメインで契約していたドメインが切れてしまった際にFTPに接続することができないということがありました。

サーバ内のファイルを参照したかったので、色々と接続しようと試してみたけれどなかなかうまくいかずにいました。

しかし、色々と調べていくとCPIのオンラインヘルプに載ってました。。。

cpi_ftp

サーバ移転時などドメインが設定されていない場合はIPアドレスでアクセスするようです。

今後、サーバ移転時などで必要になってくるので、忘れないようにメモっておきます。

http://document.secure.jp/ftp/ftp_setup/ftp_setup_faq.php

ドメインが切れたものでもIPアドレスを使用してFTPで接続したら、サーバに入ることができました。

ヘルプなどはしっかり確認するべきですね。

jQuery:フォームの値を取得・設定する方法

jQueryフォームのテキストやセレクト、ラジオボタンなどのvalueの値を取得したり、設定したい場合があります。
jQueryval()を使用すれば、簡単に値を取得・設定することが可能です。


val()

指定したフォームのvalue属性を操作する際に使用します。
引数を指定した場合は値を設定し、valueの値を取得する場合は引数なしで呼び出します。

$("").val();

フォームの値を取得する

下記はボタン押下時にテキストに入力された値を取得する場合の処理です。

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // ボタンをクリックした場合
    $("#btn").click(function () {
        // フォームの値を取得
        str = $("#hoge").val();
        alert(str);
    });
});
</script>

HTML

<input type="text" name="hoge" id="hoge" value="" />
<input type="button" id="btn" name="btn" value="取得" />

フォームの値を設定する

下記はボタン押下時にテキストに値を設定する場合の処理です。

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // ボタンをクリックした場合
    $("#btn").click(function () {
        var str = "設定する値";
        // フォームの値を設定
        $("#hoge").val(str);
    });
});
</script>

HTML

<input type="text" name="hoge" id="hoge" value="" />
<input type="button" id="btn" name="btn" value="設定" />

選択した値によって別のフォームを変えたりできるので、色々な場面で便利です。

WordPress:tableタグを使用した時に複数の改行(br)が入る対処法

WordPressの投稿ページでtableタグを使用して表を作成した際に、テーブルの前に複数の改行タグbr)が入ってしまいました。

wordpress_table_br1

テキストとテーブルの間に改行タグを記述しているわけではないので、調べてみるとソースが下記のように出力されていました。

wordpress_table_br2

tableタグ内に不要なbrタグが改行するごとに入っていた為、出力時にテーブルの前に複数の改行が入ってしまったようです。

今回は、このような現象が起きた場合の改行を入れない簡単な対処法をメモします。


tableタグを使用した時に改行させない対処法

WordPressのエディター内でtableタグを書く際に、下記のようにエディター内で改行させないで記述します。

<p>test</p>
<table><tr><td>test</td><td>test</td></tr></table>

しかし、ソースがとても見にくいです。

これでも改行を入れないように対応はできますが、ソースを修正する際に大変なので下記の方法で対処しました。


style.cssに下記のコードを記述します。
「display: none;」でdiv内のbrを非表示にしています。

CSS

div.deleteBr br {
	display: none;
}

エディターに記述する際に「class=”deleteBr”」で指定したdivタグ内にtableタグを記述します。

HTML

<p>test</p>
<div class="deleteBr">
    <table>
        <tr>
            <td>test</td>
            <td>test</td>
        </tr>
    </table>
</div>

divタグ内のbrを非表示にするので改行されずに表示されます。
また、表内にbrを使用する場合はCSSを追加する必要があります。

他にいい方法がある場合は教えていただければ嬉しいです。