アトリエ・エクレア

2DCG&3DCG, プログラミング, 日記などを掲載してます。

Visual Studio Code 日本語テキストの読み込み

Visual Studio Code 日本語テキストの読み込み

<はじめに>

VSCode_encode_001.JPG
Windowsのメモ帳などで作成した、日本語のテキストドキュメントを、Visual Studio Codeで読み込むと、
このように文字化けすることがある。

今回は、Visual Studio Codeで、日本語テキストを文字化けさせずに読み込むための、
エンコード設定についての内容。



<方法>

1)
VSCode_encode_002.jpg
とりあえず、確認テスト用として、
日本語が記述してあるテキストドキュメントを用意する。

2)
VSCode_encode_003.jpg
テキストドキュメントを右クリックして、Visual Studio Codeで開く。
文字化けしていることを確認。

3)
VSCode_encode_004.jpg
[ファイル] → [基本設定] → [設定]。

4)
VSCode_encode_005.jpg
"settings.json" というファイルが開く。

5)
VSCode_encode_006.jpg
左ペインに注目。
今回は、ファイル読み込みの設定となるので、"ファイル" の項目を開く。
その中で、

// ファイルの読み取り/書き込みで使用する既定の文字セット エンコーディング。
"files.encoding": "utf8",

と書かれている部分を探す。※Visual Studio Codeは、デフォルトでは、utf8でエンコードするという設定になっている。

"files.encoding": "utf8" の部分をコピーしておく。※最後の , はいらない。



6)
VSCode_encode_007.jpg
右ペインに注目。
{}の中に、先ほどコピーしておいた、
"files.encoding": "utf8"
の文字をペーストする。
※直接書いてもいいが、コピペしたほうが楽。

7)
VSCode_encode_008.jpg
utf8 の部分だけ削除する。
すると、コードヒントがずらりと表示される。
※すぐに出ない場合は、少しマウスをゆすってみると良い。



8)
VSCode_encode_009.jpg
shiftjis と書かれた部分があるので、その文字をコピーしておく。

9)
VSCode_encode_010.jpg
" と " の間に、先ほどコピーしておいた、 shiftjis の文字をペーストする。

"files.encoding": "shiftjis"

となればOK。※シフトJISでエンコードするということ。

10)
VSCode_encode_011.jpg
settings.json を、上書き保存する。

11)
VSCode_encode_012.jpg
Visual Studio Code を再起動しないとだめっぽいので、一旦、終了する。


12)
VSCode_encode_013.jpg
再びテキストドキュメントを開くと、今度は日本語が正しく表示される。

13)
VSCode_encode_014.JPG
(´・ω・`)もきゅ☆

以上。






Visual Studio Code インストール

Visual Studio Code インストール

<ダウンロードやドキュメントへのリンク>

Visual Studio Code - Code Editing.Redefined. ← ダウンロード可能。上のタブでドキュメントが見られる。
Visual Studio Code - Visual Studio ← "Visual Studio Code ファースト ステップガイド" がお勧め。



<インストール方法>

インストーラーの手順に沿ってやっていけば良いので、特に難しいことはない。

1)
VisualStudioCode_001.jpg
ダウンロードする。※右上からでもOK。

2)
VisualStudioCode_002.jpg
右クリック → 管理者として実行。
※今回は、バージョン1.10.2 を使用している。

3)
VisualStudioCode_003.jpg
次へ。

4)
VisualStudioCode_004.jpg
同意する。

5)
VisualStudioCode_005.jpg
任意のディレクトリを選択し、次へ。

6)
VisualStudioCode_006.jpg
デフォルトのまま、次へ。

7)
VisualStudioCode_007.jpg
デフォルトのまま、次へ。
※"デスクトップ上にアイコンを作成する" と "PATHへの追加" にチェックがあるはず。

8)
VisualStudioCode_008.jpg
インストール。

9)
VisualStudioCode_009.jpg
インストールが終わったら、完了。

10)
VisualStudioCode_010.jpg
自動的に起動する。
閉じる。
OSを再起動する。
PATHを通したことで、コマンドプロンプトでcodeと入力してEnterキーを押すと、起動するはず。
※コマンドプロンプトは、スタートメニュー → Windows システム ツール 内にある。
※PATHの確認: [スタートメニュー]右クリック → [システム] → [システムの詳細設定] → [詳細設定]タブ → [環境変数]

以上。




Android Studio  FullScreen

Android Studio  FullScreen

・プロジェクトのテンプレートで、"add no Activity"を選択。

FullscreenActivity.java

package com.example.java_practice;

import android.app.Activity;
import android.os.Bundle;
import android.view.WindowManager;

// Activityは、Context(抽象クラス)の派生クラス
public class FullscreenActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 動的にフルスクリーンにする ※ステータスバー(アンテナ, バッテリー, 時計を表示)が消える
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

        // Activityから拡張ではなく、AppCompatActivityから拡張した場合に、動的にアクションバーを消す
        // getSupportActionBar().hide();  // show()で表示

        // Contextのインスタンスを引数として、Viewの派生クラスのインスタンス化
        setContentView(new MyView(this));
    }
}

MyView.java

package com.example.java_practice;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

// Viewを拡張
public class MyView extends View {
    // コンストラクタ
    public MyView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {  // 引数としてCanvasのインスタンスが渡される
        super.onDraw(canvas);        // Viewクラスでも、特に何もしない

        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setTextSize(50);
        String text = "hello, world";
        canvas.drawText(text, 0, 50, paint);
    }
}

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.java_practice">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity
            android:name=".FullscreenActivity"
            android:label="@string/app_name"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

string.xml

<resources>
    <string name="app_name">Java_Practice</string>
</resources>

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

<実行結果>

AndroidFullscreen_001.jpg






Android Studio Projectウィンドウの表示設定

Android Studio  Projectウィンドウの表示設定

左端のツールボタンでProjectを選択すると、
ツールウィンドウのひとつであるProjectウィンドウが表示される。

但し、横幅がせまいとProjectタブが隠れてしまい見えない場合がある。
横幅を広げればいいだけなのだが、広げたくない場合がほとんど。
これを解決する設定。

<設定方法>

ShowProject_001.jpg
最初は左端がAndroidタブだったりする。

ShowProject_002.jpg
横幅がせまいと、矢印マークが図のようになる。
※左と右にまだタブがあるということ。


ShowProject_003.jpg
矢印マークを選択すると、図のようなものが出るので、Projectを選択。

ShowProject_004.jpg
Projectタブが、表示される。

ShowProject_005.jpg
あとは、展開して使用する。





Android Studioで mainメソッドの実行

Android Studioで mainメソッドの実行

Sample.java

public class Sample {

    public static void main(String[] args) {
        System.out.println("hello, world");
    }

}

<実行前>

JavaPractice_001.jpg
実行するサンプル。

<方法1>

JavaPractice_002.jpg
ファイル上で右クリック。
mainメソッドをRunで実行。

<方法2>

JavaPractice_003.jpg
ツールメニューのRun → クラスをRunで実行。

<結果>

JavaPractice_004.jpg
いずれの方法でも、実行結果が表示される。






マイブログへようこそ♪
PLEASANT_DRAGON

2DCG&3DCG,プログラミング,
日記などを掲載中☆

(*´▽`*)コメント大歓迎です☆

最新記事
記事一覧

全ての記事を表示する

カテゴリ
SAI (0)
mi (2)
C (1)
C++ (1)
C# (0)
VBA (0)
月別アーカイブ
最新コメント
RSSリンクの表示
リンク
FC2ブログランキング

FC2Blog Ranking

ピックアップ商品1♪










カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
ブログ内検索フォーム
プロフィール

エクレア

Author:エクレア


  • 2DCG&3DCGの創作活動をしています。

  • SF系のメカが大好物。

アクセスカウンター
Twitter
ピックアップ商品2♪