hidakas1961のブログ

プログラミング専門

Visual Studio 2017 の自動書式フォーマットはなんとかならんか?

本当に迷惑なj自動書式フォーマット機能

一発で手動に変えられれば良いのに

しかもどのチェックがどの機能か分かりづらい

きょうは自動で入力されるダブルクォートの

機能を外すのに苦労したのでメモしておこう!

f:id:hidakas1961:20190414194314p:plain

ダブルクォートなのに「自動かっこ挿入」に割り当てられていたため

気付くまであっちこっちチェックを外して

見つけるのに時間かかった

本当に何とかして欲しいわ

マイクロソフト特有の余計な機能は!

(*'д`*)

 

Visual Studio 2017 用のマクロ機能拡張の種類、間違ってたわ

こっちが正解だった。

f:id:hidakas1961:20190324040012j:plain

marketplace.visualstudio.com

 

間違ってこっちをインスコしてた。

marketplace.visualstudio.com

検索操作が記録されないから変だなと思った。

 

検索操作が使えないと、

キーボードマクロのありがたみが、

半減以下になっちゃうよね?

 

気が付いて良かった!!

ヨロッ(●^_^●)♪

 

Test-2019/03/13

Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13

フレームを使わずに画面分割するHTMLページ作成方法

最近HTMLでサイトを構築しているが

フレームで画面分割すると

目的のページのURLに

直接リンクしたときに

問題が発生する

 

フレームが表示されないのだ

 

そこで

フレームを使わずに

画面を分割する方法を調査した

 

CSS3のflexというプロパティによって

実現可能だと分かった

 

フレックスボックスとか

呼ばれているらしい

 

試しに作ってみたら

うまく行った

 

スタイルシートJavaScript

書かなければならないが

それほど複雑ではない

 

とりあえず

ソースコードを見てくれ

 

まずはスタイルシートから

body {
    margin: 0;
    padding: 0;
}
.flex_container {
    height: 100vh;
    display: flex;
    flex-direction: row;
}
.flex_row {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
}
.flex_column {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.flex_main {
    flex-grow: 1;
    background-color: #ffffe0;
    overflow: auto;
}
.flex_left {
    background-color: #e0e0ff;
    width: 200px;
    overflow: auto;
}
.flex_right {
    background-color: #e0f0c0;
    width: 150px;
    overflow: auto;
}
.flex_top {
    background-color: #ffe0f0;
    min-width: 100%;
    height: 86px;
    text-align:center;
}
.flex_bottom {
    color: #e0e0e0;
    background-color: #808080;
    height: 24px;
    font-size: small;
    text-align:right;
}
.flex_inner {
    padding: 3px 5px 0;
    max-width: 100rem;
}

 bodyのマージンがあると

ボックスの周りに

隙間が出来てしまうので

ゼロにしてある

 念のためパディングもゼロにしたが

これは無くても良い

 

.flex_containerクラスはdivタグと組み合わせて使用する

ほかのクラス設定プロパティもそう

 

.flex_containerクラスは

すべてのフレックスボックスの

一番外側のボックスつまりコンテナだ

 

.flex_rowクラスは行方向の分割のためのコンテナだ

この中にdivタグでボックスを並べると

各ボックスは行方向に分割される

 

同様に.flex_columnクラスは桁方向の分割用コンテナで

各ボックスは桁方向に分割される

つまり縦に分割する

 

この2つのコンテナクラスは

いくつでも入れ子にできるので

かなり複雑な画面分割も可能となる

 

私はこのように分割した

f:id:hidakas1961:20190309164020j:plain

縦横に合計5個のボックスに分割している

 

フレックスボックスの使用方法を

ネット検索した結果

見つかったサイトの使用例では

すべてのサイトで

ヘッダー部分とフッター部分を

横幅いっぱいにしてあったのだが

ヘッダー部とフッター部は

そもそも表示情報量が少ないので

横幅が大きすぎるのは無駄である

 

そのため

私は縦横に入れ子

分割する方法を

考案したのである

 

再びスタイルシートの説明に戻るが

flex-grow: 1;というプロパティは

このボックスは伸び縮みするという意味らしい

 

display: flex;というのは

これはコンテナであるという意味

 

.flex_mainクラスは

このページのメインコンテンツとなる

divタグボックス用のクラスである

 

 .flex_leftクラスは固定幅の左側サイドバー用

 .flex_rightクラスは固定幅の右側サイドバー用である

 

同様に.flex_topクラスは固定高さのヘッダー用

.flex_bottomクラスはフッター用である

 

最後に.flex_innerクラスは

ボックスの中身を書くためのボックスで

見やすいようにパディングを設定してある

 

max-width: 100rem;というプロパティは

ボックス内のテキストの幅が

ボックスの幅を超えてしまったときの

対処用のプロパティである

 

これがないと

画面がぐちゃぐちゃに

なってしまうのだ

 

次にHTML側の

ソースコードを見てくれ

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <title>サイトのタイトル</title>
    <meta charset="utf-8" />
    <meta name="copyright" content="Copyright 所有者 All right reserved." />
    <meta name="robots" content="INDEX,FOLLOW" />
    <meta name="google-site-verification" content="Google検索対応用の暗号" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="所有者" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta property="og:url" content="サイトのURL" />
    <meta property="og:title" content="ページのタイトル" />
    <meta property="og:description" content="ページの説明" />
    <meta property="og:image" content="アイコンのURL" />
    <link rel="shortcut icon" href="アイコンのサイト内パス" />
    <link rel="stylesheet" type="text/css" href="スタイルシートのサイト内パス">
    <script src="/js/スクリプトのサイト内パス"></script>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8" ></script>
</head>

<body>
    <div class=flex_container>
        <div class=flex_left><script>WriteHtml("/contents/flex_left.html");</script></div>
        <div class=flex_column>
            <div class=flex_top><script>WriteHtml("/contents/flex_top.html");</script></div>
            <div class=flex_row>
                <div class=flex_column>
                    <div class=flex_main>
<!-- 本文 -------------------------------------------------------------------->
<div class=flex_inner id="head">

    ~~~ ここにページの本文を書く ~~~

    > <a href="#head">このページの先頭へ戻る</a>
    <br />
    <br />
    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" >Tweet</a>
</div>
<!-- 終了 -------------------------------------------------------------------->
                    </div>
                    <div class=flex_bottom><script>WriteHtml("/contents/flex_bottom.html");</script></div>
                </div>
                <div class=flex_right><script>WriteHtml("/contents/flex_right.html");</script></div>
            </div>
        </div>
    </div>
</body>
</html>

<head>部分は普通なので飛ばして

<body>について説明する

 

基本構造は以下の通りで

これはどのページのHTMLも

同じである

<body>
    <div class=flex_container>
        <div class=flex_left><script>WriteHtml("/contents/flex_left.html");</script></div>
        <div class=flex_column>
            <div class=flex_top><script>WriteHtml("/contents/flex_top.html");</script></div>
            <div class=flex_row>
                <div class=flex_column>
                    <div class=flex_main>
                        <div class=flex_inner id="head">
                            ~~~ ページ本文 ~~~
                        </div>
                    </div>
                    <div class=flex_bottom><script>WriteHtml("/contents/flex_bottom.html");</script></div>
                </div>
                <div class=flex_right><script>WriteHtml("/contents/flex_right.html");</script></div>
            </div>
        </div>
    </div>
</body>

 divタグでコンテナとボックスを

入れ子で定義している

 

分割方向が縦と横で変化する部分は

それぞれの分割用コンテナで入れ子にする

 

そして本文以外の各ボックスは

常に同じ内容が表示されるため

内容をスクリプトで表示している

 

今回の例では

ヘッダー、フッター、左側サイドバー、

右側サイドバーがそれにあたる

 

WriteHtml()という関数は

サイト内のHTML文書のパスを

引数として受け取り

それをその場所に表示する

 

<script> WriteHtml("サイト内HTMLパス"); </script>

とすることで

このページ以外の

他のHTML文書を表示するのだ

 

それでは

スクリプト

ソースコードを見てくれ

function WriteHtml(path) {
    var url = "http://" + document.domain + path;
    var data = "読み込み失敗!";
    var http = new XMLHttpRequest();
    http.open("GET", url, false);
    http.onreadystatechange = function () {
        data = http.responseText;
    }
    http.send(null);
    document.write(data);
}

たったこれだけだ

ネット検索して

やり方を調べただけなので

詳しいことは良く分からないが

XMLHttpRequestというオブジェクトが

面倒臭いことを

全部やってくれるようだ

 

以上です。

 

記事を書くからのツイッター投稿テスト

ブログのデザイン設定によって

記事を書くからの

ツイッターへの投稿が

できたりできなかったり

するようだ

 

ここははてなのデザインを使っているが、

はてなのデザインだと

ツイッターに投稿できないようなのだ

 

エラーメッセージが出ないから

失敗したことが分からない

f:id:hidakas1961:20190306152347j:plain

 

VisualStudio 2017のうるさいプレビューを禁止するには?

VisualStudio 2017のプレビュー機能が有効な状態だと

ソリューションエクスプローラーでカーソルを移動するたびに

ファイルを開いて表示するため

動作が非常に緩慢になる

 

このじゃまくさいプレビュー機能を禁止するには

以下のオプション設定値を変更すると良い

f:id:hidakas1961:20190305063752p:plain



VisualStudio 2017のプロジェクトのプロパティ設定について

先日、

PCの調子が悪くなってきたので

一度工場出荷状態に戻し

Windowsを再インストールした

 

そして、

VisualStudio 2017も再インストールしたのだが

ビルドが通らなくなった

 

それどころか

windows.hが開けなくなった

インクルードパスが通ってないのだ

 

何故だろう?

 

いろいろ調べた結果、

プロジェクトのプロパティの

"Windows SDKバージョン"の設定値が原因であることが分かった

 

以前使ってたVisualStudio 2017は、

VisualStudio 2015に上書きインストールしたものだったため

前のバージョンのSDK設定値がデフォルトで採用されていたものと思われる

 

ところが、

新規でVisualStudio 2017をインストールすると

最新版のSDKしかインストールされないため

デフォルトの設定値も当然最新版となるのだ

 

したがって対策としては

プロパティの"Windows SDKバージョン"の設定内容を

この新規のバージョン名に変更するだけで成功した

 

ちなみに、

私の場合の変更内容は以下の通り

 

古いSDKバージョン
10.0.17134.0

新しいSDKバージョン
10.0.17763.0

 

これで元通りビルド可能になった

もちろんちゃんと、

windows.hにもパスが通った!