リード開発メモ

大阪のソフトウェア会社です。 技術的な事柄についてのメモとしてブログを始めます。

未分類

ショートカットにアイコンを設定する

最近、同じプログラムを複数立ち上げることが多い。プログラムは設定ファイルによって動作を変えてあるのだが、そのときタスクバーに同じアイコンが並び、見分けがつかなくて困っていた。

今さらながら、こういう場合はプログラムへのショートカットを作り、ショートカットにアイコンを設定すればいいことに気づいた。プログラムの起動は常にショートカット経由で行うことで、タスクバーには同じプログラムだが違うアイコンが並ぶ。

ショートカットのアイコンの設定は、ショートカットで右クリックし、[プロパティ] を選んで、[ショートカット]タブの[アイコンの変更]ボタンから行う。

アイコン画像は既存のものを利用してもいいが、自分で作ることもできる。
アイコン画像の作成方法は、
  1. Windows 標準のペイントなどでビットマップ画像を作成し、拡張子を ico に変える。
  2. 専用ツールでアイコンファイルを作成(拡張子 ico)。
のどちらか。

1. の方法はお手軽だが、透過色は設定できない。また、左上(座標0,0)に使った色が黒になってしまうようだ。気になるなら枠線を付けるなどうまくデザインで逃げるしかない。

2. は GIMP を使うのがおすすめ。画像作成とアイコンファイルの出力が GIMP  だけでできる。
GIMP で透過色を設定するのは、[色]メニュー - [色を透明度に] から。
また、アイコンファイルの出力は、[ファイル]メニュー - [エクスポート] をクリックし、右下にあるコンボボックスで[Microsoft Windows アイコン(*.ico) ] を選んで、[エクスポート]ボタンを押す。

以上。

jQuery Ajax 「もっと見る」ボタンの処理

jQuery Ajax を使って「もっと見る」ボタンの処理を行う。

まず、クライアント側。

<!DOCTYPE html>
<head>
    <title>jQuery Ajax でコンテンツをロードする</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function (){
            $(document).on("click", "#more", function () {
                var next_id = $("#content").children("div").length + 1;
                $("#more").html("<img src='ajax-loader.gif'/>");
                $.ajax({
                    type:"GET",
                    url:"more.php",
                    data: "next_id=" + next_id,
                    timeout: 3000,      //milisec
                    success: function(data) {
                        $("#more").remove();
                        $("#content").append(data);
                    },
                    error: function(request, status, err) {
                        if(status == "timeout") {
                            $("#content").html("timeout error.");
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
<div id="content">
    <div id="content-1">最初のコンテンツ1</div>
    <div id="content-2">最初のコンテンツ2</div>
    <div id="content-3">最初のコンテンツ3</div>
    <div id="content-4">最初のコンテンツ4</div>
    <div id="content-5">最初のコンテンツ5</div>
    <button id="more">もっと見る(6~)</div>
</div>
</body>
</html>

つづいて、サーバー側。

<?php
    $next_id = $_GET['next_id'];

    usleep(200000); // 0.2秒スリープ

    for ($i = $next_id; $i < $next_id + 5; $i++) {
        if ($i >= 18) {
            break;
        }
?>
        <div id="content-<?php echo $i; ?>">新しいコンテンツ<?php echo $i; ?></div>
<?php
    }

    if ($i >= 18) {
?>
        <div>これで終わり</div>
<?php
    } else {
?>
        <button id="more">もっと見る(<?php echo $i; ?>~)</div>
<?php
    }
?>
以上。

jQuery Mobile でセレクトメニューを表示する

jQuery Mobile を使っている場合、セレクトメニューを表示するときにネイティブメニューで表示するか、jQuery Mobile のカスタムメニューを表示するかを選ぶことができる。

select タグに data-native-menu="false" を指定すると jQuery Mobile のカスタムメニューとなる。指定しなければネイティブメニューとなる。

ただし、
$.mobile.ignoreContentEnabled = true;

と指定している場合は、カスタムメニューで表示はできない。
また、
$.mobile.selectmenu.prototype.options.nativeMenu = false;

を指定しておくことでデフォルトをカスタムメニューとすることができる。この場合は、data-native-menu="true" を指定した select 要素のみネイティブメニューとなる。

下はセレクトメニューを jQuery Mobile のカスタムメニューで表示したサンプルだが、実はリストのダイアログが画面に収まるときと収まらないときで表示されるダイアログが違うようだ。画面に収まらないときに表示されるダイアログでは見出しが表示されない模様。

サンプル

<!DOCTYPE html>
<head>
    <title>jQuery mobile でセレクトメニュー表示</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page"> 
    <div data-role="header">ヘッダ</div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="type">セレクトメニュー</label>
            <select id="select-1" data-native-menu="false">
                <option value="">ひとつ選んでください。</option>
                <option value="1">りんご</option>
                <option value="2">みかん</option>
                <option value="3">バナナ</option>
                <option value="4">メロン</option>
                <option value="5">いちご</option>
                <option value="6">パイナップル</option>
                <option value="7">マンゴー</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="type">セレクトメニュー(複数)</label>
            <select id="select-2" multiple data-native-menu="false">
                <option value="">複数えらんでください。</option>
                <option value="1">りんご</option>
                <option value="2">みかん</option>
                <option value="3">バナナ</option>
                <option value="4">メロン</option>
                <option value="5">いちご</option>
                <option value="6">パイナップル</option>
                <option value="7">マンゴー</option>
            </select>
        </div>
    </div> 
    <div data-role="footer">フッタ</div> 
</div> 
</body>
</html>

バリューコマースのトークンの発行のしかた

先日、ValueCommerce の商品 API を使うため登録した。

ValueCommerce は多数の EC サイトと提携しており、なかには自前で商品情報をフィードしていないような EC サイトの情報も得られる。たとえばベルーナなど。

また、Amazon や Yahoo! ショッピング、ヤフオク!の API はすでに使っていたが、ValueCommerce を通すことで別々に API を呼ぶ必要がなくなるのは便利なるかもしれない。楽天は提携していないようだった。

さて、ValueCommerce の商品 API を使うにあたって、以下のように説明がある。
http://devcenter.valuecommerce.ne.jp/startup/pdb_start

・バリューコマースのパートナーサイトとして登録し、審査を通過する
・商品情報を持つECサイトと提携する
・トークンを取得する

ここで、最後の「トークンを取得する」のところがなかなかうまくいかなかった。トークンは設定画面に表示されるはずなのだが、いくらECサイトと提携しても設定画面にトークンの欄が出てこない。

どうやら、オファー検索の結果には「PDB」というキーワードを含むものと含まないものがあるが、「PDB」が付いているほうと提携しなければいけなかったようだ。ちなみに、「PDB」はプロダクトデータベースの意味らしい。

「PDB」を探すには、オファー検索のとき、「詳しい条件で検索」を選び、オプションで「商品オファー/ウェブサービス対応」にチェックを付けて検索する。

または、検索テキストボックスに「PDB ○○」で検索する。

Pearl Crescent Page Saver Basic

ブラウザで画面に収まりきらない縦長のページをキャプチャしたかったので、FireFox のアドオン「Pearl Crescent Page Saver Basic」を入れてみた。 https://addons.mozilla.org/ja/firefox/addon/pagesaver/ インストールすると、ツールバーにカメラアイコンが現れる。 page_server_1.png

ツールバーがいっぱいなので、オプションでアドオンバーに表示するようにした。 page_server_2.png

試しにキャプチャした。以下は縮小した画像。
 Pearl Crescent Page Saver Basic -- Add-ons for Firefox

以上。

アクセスカウンター
  • 今日:
  • 昨日:
  • 累計:

livedoor 天気