Yahoo!Japanの爆速YQLを使って、ブログのRDFから更新情報一覧を表示する

以前に「Google Feed APIの代替手段と設定方法」で、RSSから更新情報を取得して、更新情報一覧を表示する方法を紹介しました。

今回は、RSSの代わりにRDFから更新情報を取得するサンプルコードです。

RDFは、このブログのPDFを使用しました。

  • http://www.gesource.jp/weblog/?feed=rdf

コードはこのようになります。

<script
  src="http://i.yimg.jp/images/yjdn/js/bakusoku-yql-v1-min.js"
  data-url="http://www.gesource.jp/weblog/"
  data-p-feed="rdf">
    {{#query.results.RDF.item}}
    <ul>
    <li><a href="{{link}}">{{title}}</a></li>
    </ul>
    {{/query.results.RDF.item}}
</script>

実行結果です。↓

↑ブログの最新のエントリーが表示されていれば成功です。

FileNameNormalizer ファイル名正規化ソフト 0.1.0を公開しました

WindowsとmacOSではファイル名の付け方が異なります。
たとえば「が」という文字は、Windowsでは「が」の1文字ですが、macOSでは「か」+「゛」(濁点)の2文字で構成されます。

macOSで作成したファイルをWindowsで受け取ったとき、このファイル名の付け方の違いによって、アプリによっては問題が発生することがあります。

そこで、ファイル名やフォルダー名をWindowsの流儀に変換するソフトウェアを作成しました。

使い方は簡単です。

ファイル名を変換したいファイルをドラッグアンドドロップでアプリに追加します。
あとは「リネーム開始」ボタンを押すと、ファイル名が変換されます。

ファイル名以外にも、フォルダー名も変換できます。

個人的なアプリですので、アイコンやヘルプなどは用意していませんが、利用者が増えれば改善していきます。

JavaScriptでUnicodeの正規化

Stringのnormalize()メソッドを使うと、Unicodeの正規化ができる。

normalize()メソッドの引数に’NFC’/’NFD’/’NFKC”NFKD’を指定することで、正規化形式を指定できる。

str.normalize('NFC')

簡単なサンプルを作ってみた。
ボタンを押すと、各形式で正規化する。

変換する文字列

変換した文字列

最初の「が」は1文字、2番目の「が」は「か」+「゛」になっている。
バックスペースキーを押して削除すると違いがわかる。

NFCにすると、どちらの「が」も1文字になる。
NFDにすると、どちらの「が」も「か」+「゛」の2文字になる。

ソースコード

<p>変換する文字列</p>
<textarea id="from_text" cols="50" rows="10"></textarea>
<p>
    <button type="button" id="NFC">NFC</button>
    <button type="button" id="NFD">NFD</button>
    <button type="button" id="NFKC">NFKC</button>
    <button type="button" id="NFKD">NFKD</button>
</p>
<p>変換した文字列</p>
<textarea id="to_text" cols="50" rows="10"></textarea>
<script>
    const normalize = (form) => {
        document.getElementById('to_text').value = document.getElementById('from_text').value.normalize(form);
    };
    ['NFC', 'NFD', 'NFKC', 'NFKD'].forEach(function (v) {
        document.getElementById(v).addEventListener('click', function (e) {
            normalize(v);
        });
    });
    document.getElementById('from_text').value = 'がか\u309912345';
</script>

参考

JavaScriptでSVGのベジェ曲線を描く

SVGでベジェ曲線を描画します。

点をドラッグして移動すると、ベジェ曲線も更新されます。
(ChromeとFirefoxで動作を確認しました)

JavaScriptでSVGの円をドラッグして移動するサンプル

JavaScriptでSVGの円をドラッグして移動するサンプルです。

<svg id="svg" width="300" height="340" 
  style="border-width: thick; border-color: #EEE; border-style: solid; display: block; margin: auto;">
    <circle id="ball1" cx="100" cy="100" r="20" fill="blue" />
    <circle id="ball2" cx="200" cy="200" r="20" fill="green" />
</svg>
<script>
    'use strict'

    class DraggableItem {
        static create(svg_id, elem_id) {
            const draggable = new DraggableItem(svg_id);
            elem_id.forEach(function (id) {
                draggable.addElem(id);
            });
        }

        constructor(svg_id) {
            this.dragElem = null;
            this.offsetX = 0;
            this.offsetY = 0;

            this.svg = document.getElementById(svg_id);
            this.svg.addEventListener("mousemove", e => this.mouseMove(e), false);
            this.svg.addEventListener("touchmove", e => this.mouseMove(e), false);
            this.svg.addEventListener("mouseup", e => this.mouseUp(e), false);
            this.svg.addEventListener("touchend", e => this.mouseUp(e), false);
        }

        addElem(elem_id) {
            const elem = document.getElementById(elem_id);
            elem.addEventListener("mousedown", e => this.mouseDown(e), false);
            elem.addEventListener("touchstart", e => this.mouseDown(e), false);
            elem.addEventListener("mousemove", e => this.mouseMove(e), false);
            elem.addEventListener("touchmove", e => this.mouseMove(e), false);
            elem.addEventListener("mouseup", e => this.mouseUp(e), false);
            elem.addEventListener("touchend", e => this.mouseUp(e), false);
        }

        screenPointToSVGPoint(svg, elem, x, y) {
            const p = svg.createSVGPoint();
            p.x = x;
            p.y = y;
            const CTM = elem.getScreenCTM();
            return p.matrixTransform(CTM.inverse());
        }

        mousePointToSVGPoint(e) {
            return this.screenPointToSVGPoint(
                this.svg,
                this.dragElem,
                e.clientX,
                e.clientY);
        }

        mouseDown(e) {

            const event = (e.type === "mousedown") ? e : e.changedTouches[0];;
            this.dragElem = event.target;

            const p = this.mousePointToSVGPoint(event);
            this.offsetX = p.x - this.dragElem.getAttribute("cx");
            this.offsetY = p.y - this.dragElem.getAttribute("cy");

            event.preventDefault();
        }

        mouseUp(e) {
            this.dragElem = null;
        }

        mouseMove(e) {
            if (!this.dragElem) { return; }

            const event = (e.type === "mousemove") ? e : e.changedTouches[0];
            const p = this.mousePointToSVGPoint(event);
            this.dragElem.setAttribute("cx", p.x - this.offsetX);
            this.dragElem.setAttribute("cy", p.y - this.offsetY);

            event.preventDefault();
        }
    }

    function init() {
        DraggableItem.create('svg', ["ball1", "ball2"]);
    }
    init();
</script>

JavaScriptで始点・終点・2つの制御点と補助線、ベジェ曲線を描くサンプル

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
        const canvas = document.getElementById('myCanvas');
        const context = canvas.getContext('2d');

        const p1 = { x: 10, y: 10 };    //始点
        const p2 = { x: 380, y: 380 };  //終点
        const cp1 = { x: 60, y: 360 };  //制御点1
        const cp2 = { x: 340, y: 10 };  //制御点2

        // 補助線の描画
        [[p1, cp1], [p2, cp2]].forEach(function (p) {
            context.beginPath();
            context.moveTo(p[0].x, p[0].y);
            context.lineTo(p[1].x, p[1].y);
            context.lineWidth = 5;
            context.strokeStyle = 'gray';
            context.stroke();
        });

        // ベジェ曲線の描画
        context.beginPath();
        context.moveTo(p1.x, p1.y);
        context.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, p2.x, p2.y);
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();

        // 点の描画
        [p1, p2, cp1, cp2].forEach(function (p) {
            context.beginPath();
            context.arc(p.x, p.y, 10, 0, Math.PI * 2, false);
            context.fillStyle = 'blue';
            context.fill();
        });
</script>

Delphi 10.1 Berlinでロギング(ログの出力)

以前に「Delphi XE5でAndroidアプリケーションのロギング(ログの出力)」でログの出力方法を紹介しました。

現在のバージョンではもっと手軽にできるようになっています。

uses
  FMX.Types;

procedure TForm1.Button1Click(Sender: TObject);
begin
  Log.d('%s', ['ログメッセージです。']);
end;

これだけでログの出力ができます。

Delphi 10.1 BerlinのFireMonkeyでベジェ曲線を使って円を描くサンプルプログラム

Delphi 10.1 BerlinのFireMonkeyでベジェ曲線を使って円を描くサンプルプログラムです。

Windowsの実行画面

Androidの実行画面

Delphi 10.1 BerlinのFireMonkeyによるベジェ曲線のサンプル

Delphi 10.1 BerlinのFireMonkeyによるベジェ曲線のサンプルです。

[ R190_単純なベジェ曲線の操作例 ] – Mr.XRAYを参考にしました。

Windowsの実行画面

Androidの実行画面

Visual Studio CodeのキーマップをDelphiのキーマップにするには

Visual Studio Codeを起動して、メニューから[ファイル]→[基本設定]→[キーマップ拡張機能]を選択します。

[Delphi Keymap]の[インストール]をクリックしてインストールします。

[Delphi Keymap]を選択するとキーマップの設定を確認できます。