質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.63%

vue.jsとtypescriptを用いてハイライトを行う単語を検索して指定をしたい

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 435

syen2501

score 38

私は、typescriptで特定の語を文ごとにハイライトするというプログラムを作成しています。
さらに私は、追加機能として、単語を検索して、ヒットしたものをハイライトするかしないかを
チェックボックスで選択しハイライトで表示もしくはハイライトを消す機能を作成しようとしています。

この追加機能は、vue.jsで作成しようと考えているのですが、どのようにvue.jsに
typescriptのプログラムを追加すれば良いか良く分かりません。
初心者なので、申し訳ありませんが教えて頂ければ幸いです。宜しくお願い致します。

'use strict';
import * as vscode from 'vscode';
import * as fs from 'fs';

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "semieditor" is now active!');
    const readsemiJson = JSON.parse(fs.readFileSync('C:\\User\\specification\\src\\sample.json','utf8'));

    // 特定の単語に色付け
    const strengthTimeWordList = readsemiJson.強時間;

    const strengthTimeWords: vscode.DecorationOptions[] = [];
    const dependencyRelationWords: vscode.DecorationOptions[] = [];

    //child -> parent(値域) semiについて
    function fromObjecttoRange(WordList: any,foundWordList: vscode.DecorationOptions[],dependencyRelationList: vscode.DecorationOptions[],Count: number){
        const activeEditor = vscode.window.activeTextEditor;
        const text = activeEditor.document.getText(); //ドキュメント取得

        // 取得したテキストを改行ごと(文章)に分割する
        var textArray = text.split(/\r\n|\r|\n/);

        if(WordList.length > 0){
            for(var i = 0; i < WordList.length; i++){
                const word = WordList[i].split('=>');
                const parentword = word[0];
                const rangeword = word[1];
                var offSet = 0;
                for(var j = 0; j < textArray.length; j++){
                    if(textArray[j] !== ''){
                        if(textArray[j].search(rangeword) !== -1 && textArray[j].search(parentword) !== -1){
                            const startPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword));
                            const endPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword) + rangeword.length);
                            const decoration = { range: new vscode.Range(startPos, endPos) };
                            foundWordList.push(decoration);

                            const related_startPos = activeEditor.document.positionAt(offSet + textArray[j].search(parentword));
                            const related_endPos = activeEditor.document.positionAt(offSet + textArray[j].search(parentword) + parentword.length);
                            const related_decoration = { range: new vscode.Range(related_startPos, related_endPos) };
                            dependencyRelationList.push(related_decoration);
                        }
                        if(textArray[j].search(rangeword) !== -1 && parentword === 'なし'){
                            const startPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword));
                            const endPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword) + rangeword.length);
                            const decoration = { range: new vscode.Range(startPos, endPos) };
                            foundWordList.push(decoration);
                        }
                    }
                    //改行の長さも加算している
                    offSet += textArray[j].length + 2;
                    Count++;
                }
            }
            return {foundWordList,dependencyRelationList,Count};
        }
    }

    //値域と修飾語をハイライト
    function decorateWord() {
        const activeEditor = vscode.window.activeTextEditor;

        //強時間
        fromObjecttoRange(strengthTimeWordList,strengthTimeWords,dependencyRelationWords,strengthtimeCount);

        activeEditor.setDecorations(strengthTimeMarkerDecoration,strengthTimeWords);
        activeEditor.setDecorations(dependencyRelation,dependencyRelationWords);
    }

    //ハイライトの削除
    function clearHighlight(){
        //強時間
        fromObjecttoRange(strengthTimeWordList,strengthTimeWords,dependencyRelationWords,strengthtimeCount);

        strengthTimeMarkerDecoration.dispose();
        dependencyRelation.dispose();

    }
    context.subscriptions.push(vscode.commands.registerCommand('extension.color', () => {
        vscode.window.showInformationMessage("Color Range Word");
        decorateWord();
    }));

    context.subscriptions.push(vscode.commands.registerCommand('extension.highlightOFF', () => {
        vscode.window.showInformationMessage("HighLight OFF");
        clearHighlight();
    }));

    //強時間に色付け
    const strengthTimeMarkerDecoration = vscode.window.createTextEditorDecorationType({
        'borderWidth': '1px',
        'borderRadius': '2px',
        'borderStyle': 'solid',
        'backgroundColor': 'rgba(128, 128, 0, 0.3)',
        'color':'orange'
    });

    //係り受けの対象を色付け
    const dependencyRelation = vscode.window.createTextEditorDecorationType({
        'borderWidth': '1px',
        'borderRadius': '2px',
        'borderStyle': 'solid',
        'backgroundColor': 'rgba(0, 255, 0, 0.3)',
        'color':'lightgreen'
    });
}
{
    "回数": [],
    "強数量修飾": [],
    "時数ノ": [],
    "未来句": [],
    "数量": [],
    "強時間": [
        "ドア入力右=>常時",
        "なし=>常時",
        "ドア入力I=>常時",
        "なし=>長時間",
        "扉閉め忘れ=>一定時間以上"
    ],
    "時間": []
}
// Home.vue

<template>
    <div class="home">
        <Button></Button>
        <input v-model="message" placeholder="" style = "position: absolute; left: 10px; top: 10px">
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import Button from "@/views/button.vue";

    @Component({
        components: {
            Button,
    },
    })
    export default class Home extends Vue {}
</script>
//button.vue
<template>
    <button style="position: absolute; left: 190px; top: 9px">検索</button>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";

    @Component
    export default class MyButton extends Vue{
    }
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • KuwabataK

    2019/06/30 03:23

    ざっと読んだ感じ、TypeScriptのコードはvscodeのExtensionとして開発されているようですがあっているでしょうか?

    まずはっきりさせておきたいのが、vscodeのExtensionとして開発されたものをVueでも流用したいということなのか(つまりブラウザ上で動かしたい)

    vscodeのExtensionをVueで開発したいのか(つまりvscodeのExtensionを開発したい)、どちらなんでしょう?

    キャンセル

  • syen2501

    2019/06/30 03:51

    行いたいことは、vscodeのExtensionとして開発されたものに機能を追加したい。
    追加するための方法としてvueを使ってフォームを作成しより使いやすい機能として実装するという感じです。
    なので、ブラウザ上で動かす必要はありません。

    キャンセル

  • syen2501

    2019/06/30 14:29

    返信ありがとうございます。
    例えば、typescript内で検索を行うコマンドを登録しておいて、vscode内でそのコマンドを実行した際に、
    あらかじめhtml等で作成しておいたフォームを呼び出すようなことは可能なのでしょうか?
    可能であれば、教えて頂ければ幸いです。宜しくお願い致します。

    キャンセル

回答 1

0

Vue.jsはブラウザ上で動作されることを前提に作られたフレームワークなので、私の知る限り、vscodeのExtension上では直接扱うことはできません。

一応公式サイトを見る限りでは、vscode上で、ビュワーとしてWebViewを動かすことはできるので、そこでならvueで作成したビルド後のjsファイルを動作させてフォームなどを表示させることはできるかもしれませんが、vscodeのAPIにはVue上から直接アクセスできないので、仮に検索フォームを作ったとしても、vscode上ではなんの動作もしない役に立たないフォームができるだけじゃないかなと思います。

一応、WebView側からvscode側にイベントを投げることはできるみたいなので、ここらへんのAPIを駆使すれば動作する検索フォームを作ることはできるかもしれませんが、かなり茨の道になることが予想されます。(というかフォームぐらいの簡単なものでよいのであれば、vueを使うよりも素のhtmlとJSを使ったほうが、vscodeには組み込みやすいと思います)

なのでvscodeのExtensionを作るということであれば、一旦Vueで作ることは諦めて、vscodeに用意された標準APIの範囲内でできるかどうかを検討してみてはどうでしょうか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/30 14:39

    返信ありがとうございます。
    例えば、typescript内で検索を行うコマンドを登録しておいて、vscode内でそのコマンドを実行した際に、
    あらかじめhtml等で作成しておいたフォームを呼び出すようなことは可能なのでしょうか?
    可能であれば、教えて頂ければ幸いです。宜しくお願い致します。

    キャンセル

  • 2019/06/30 14:42

    それはできると思います。ただ、WebViewは別タブで表示されてしまうので、その中でフォームを表示するような形になるかと思います。(テキストエディタの上にオーバーレイさせて表示させるようなことはできない)

    詳しくは以下のリンクを見てください。

    https://code.visualstudio.com/api/extension-guides/webview

    多分以下のようなコードを書くことになると思います。(上記のリンクに完全なサンプルがあるので詳しくはそちらを見てください)

    // web viewを呼び出し
    const panel = vscode.window.createWebviewPanel(
    'catCoding',
    'Cat Coding',
    vscode.ViewColumn.One,
    {}
    );

    // webviewに表示したいhtmlを登録
    panel.webview.html = `<!DOCTYPE html> .... (表示したいhtmlの内容) `;

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る