VBAの勉強を始めてみた

色々試しています。

モンスターハンター:ワールドの予備知識が1ミリもない私がゲーム内容を勝手に想像してみる(雑記-7)

私は、モンハン2ndGしかやったことがありませんし、そもそもPS4を持っていませんが、世間ではモンスターハン
ター:ワールドなるゲームの発売が間近に迫っているということだそうなので、大胆にも予備知識のまったくない
私がゲームの内容を勝手に想像してみます。(; ・`ω・´)ナン…ダト!?

 目次

 

舞台はアマゾンの奥地

どうやら、舞台は地球上に実在するアマゾンの奥地(時代背景は不明)らしい。
広大なフィールドをプレイヤーたちはオンラインで協力しながら、縦横無尽に駆け巡る。

「アーマーゾーン!」が2018年の流行語大賞にノミネートされる。

ゲームの開発には莫大な人件費が投入されたという。
実際に開発チームがアマゾン現地に赴き、測量調査を行ったことによりリアルなマップに仕上がっている。
調査中に、猛獣やピラニアに襲われて負傷するスタッフが続出したという話である。

フィールドはオープンワールド

従来のヴァージョンでは戦闘に参加できる人数は最大で4人までだったが、

ハードウェアと通信環境の飛躍的な性能アップにより、今作より上限が撤廃される模様。

よって、ドスバギィ一匹を30人がかりで嬲(なぶ)るという、倫理上いかがなものかと思われる
ような行為も散見されるようになる。

 

ドスバギィが裁判を起こす

リンチにあった傷心のドスバギィ氏が、裁判を起こすものの、裁判官・検事・弁護士・傍聴人等
すべてがアイルーであり

鼻ちょうちんを出して、うたた寝をしている裁判長のアイルーを見て、やる気を無くしたドスバギィ氏は

「そうだ。京都へ行こう」と呟き

ジパングの古都。京都へ傷心旅行に旅立ったのであった。

河原町あたりのスナックで彼の姿を見たというウワサもあるが、以後、ドスバギィ氏の行方を知る者は
いない。

プレイヤーは「ドスバギィの東方見聞録(傷心旅行)」というミニゲームが遊べる。

 

世界の果てまでイッテQ!の取材をうける

ある日、世界の果てまでイッテQ!の撮影クルーが、アマゾンの奥地(オンライン)にやってきたことで
時代背景が現代であることが判明。

撮影スタッフからの「上手に肉を焼いてください」のリクエストを受けて、自信満々に肉を焼くハンター氏だが
生焼け肉になってしまったため、閃光玉を使って自宅に逃亡。

 

ラスボスは赤い帽子のヒゲのオヤジ

モンハンがソニー陣営に回帰したことにより、某陣営の怨念が形を成し、ラスボスは、かの世界的に有名な
赤い帽子のヒゲオヤジに瓜二つ。
もはやモンスターでもなんでもない。
キノコを与えると巨大化するので、注意せよ。
2016年8月某日。土管を通じて、地球の裏側まで瞬間移動したというのは本当だったようだ。

 

リオレウスに乗って大空を駆け巡る

ハンターはリオレウスの背に乗って、大空を駆け、空中戦を楽しむことができる。VRにも対応しており、
その臨場感によって、失禁してしまうユーザーが続出。
ゲームをプレイしてない人が傍から見ると、ただの変な人。

 

VRを使った不純異性交遊

が、散見され発売から1週間でR18指定に。


よし、買おう。

f:id:kouten0430:20171218141635j:plain

気の乗らない飲み会を回避する(雑記-6)

今回は雑記です。ネガティブなタイトルですいません、しょーもないことばっかりです。なお、各記事に相互関係はありませぬ。

目次

 

気の乗らない飲み会を回避する

今年も残すところ、あと半月程になってしまいました。忘年会やら、何やかやで飲み会の誘いが多くなってくる時期でもあります。
誘われて嬉しいものや、嬉しくないもの、さまざまです。そのすべてに参加しようとすると、ストレスが溜まってしまうこともあるのではないでしょうか?
そこで、波風を立てずに、気の乗らない飲み会を回避する方法を自分なりに、勝手にまとめました。

  1. 凝った嘘はつかない
  2. 返事は早めにする
  3. ドタキャンはしない

こんな感じです(笑)

1.ですが、懲った嘘というのは余計に嘘っぽくなります。そして、相手も馬鹿ではないので、嘘だとすぐにわかります。また、嘘をつくと、その後の言動に矛盾が生じないように気をつけなければならないというメンドくささも発生します。断る場合は「用事があるので・・・」程度にし、あとはそれ以上詮索されないように、気配を絶ちます(笑)

2.ですが、ギリギリで返事をすると「ウチらの飲み会イヤなんだな・・・」という印象を持たれてしまいがちです。まぁ実際そうなんですけど、返事が早いほうが、リアルに用事があるっぽく感じられます。

3.ですが、これは当たり前ですね。もう、場所を予約してあるだろうし、キャンセル料が発生したりもします。これをやってしまうと、印象が悪くなること請け合いです。

年末年始、ストレスを溜めずに過ごすため、断るものは断りましょう。異論は認めます。

 

記憶とゆーストレージ

今まで、ブログに書くことを忘れないようにメモに書き留めていたりしていたんですが、最近、そんなものは要らないということに気がつきました。
なぜかというと、記憶から消えるようなものは、そもそもそんなに重要ではないからです。
記憶が自動的に事物を選別して、篩(ふるい)にかけてくれている訳ですね。
そう気づいてからは、思いついたことをバーッと吐き出してしまうのではなく、数日間寝かせて、記憶の自動選別を勝ち抜いてきた事のみを書くことにしてます。(いきおいで書いたことは、あとで冷静になってから見ると、かなりこっ恥ずかしかったりしますから・・・)
もちろん、番号やアドレスのようなものはちゃんとメモっておかないと、忘れてしまいますよ。

 

人が他人に抱くイメージって・・・

先日、会社の飲み会で、とある部署のおエライさんに「○○の部署時代にいろいろあって、落ち込んでいたみたいだが、今は立ち直って頑張っているそうじゃないか}といわれました。
はい?意味不明です
事情を簡単に説明すると、私は○○部署という所で落ち込んでもいないし、立ち直ってもいないのです。が、そのおエライさんの脳内で私は
何らかのトラブルでつまづき落ち込んでいたが、今は立ち直って起死回生を図っている最中の人
ということになっているらしい。
もしかして、自分の知らないうちに何かヤラかしていたのかもしれない・・・、でも思いつくのは、どれも些細なことばかり。それにしても、どのようなウワサと情報の断片によってそのようなイメージを持たれるようになったのだろう?
なんか釈然としない。
でも、自分だって他人に対して、ウワサと情報の断片のみによって偏ったイメージを持っていないか?と問われると「ノー」とは言い切れない。
うーん。
今更だけど、そのおエライさんに電話して「私は落ち込んでもいないし、立ち直ってもいません。ここ数年でこれこれこういうことを経験し、考え、現在に至っています」というふうに、自分に関する本物の情報を余すところなく伝えて、電話を切りたい。(余計あたまのおかしいヤツだと思われるのは、間違いない・・・笑)


まったくまとまってませんが、今回はこれで('ω')ノ

 

Illustrated by 霜山 シモンさま(画像と記事に因果関係はまったくありません・・・)

f:id:kouten0430:20171216155725j:plain

「PageTopへ戻る」ボタンを1ステップで実装してみる

皆さんのブログ記事を見ていて、よく目にする「PageTopへ戻る」ボタン
あれ、いいなぁ~と思いながら、いつも指をくわえて見ていたので、今回は自分のブログにも実装してみたいと思います。
最速かもしれない(←ぇ)1ステップで、実装までを実現してみます。

目次

 

 Step.1 HTMLへの記載(jQuery読込み、JavaScript記述、ボタン用画像の設定とCSSの設定)

 

下記をHTML編集モードの本文にコピペします。(HTML内の<body>~</body>にあたります) 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(function () {
    var topBtn = $('#page-top');
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {    //ボタンを出現させるスクロール位置をpxで指定
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 300);	//完了までの時間をミリ秒単位で指定
        return false;
    });
});
</script>

<p id="page-top" style="position: fixed;bottom: 5px;right: 10px;cursor : pointer;z-index: 99;" hidden>
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kouten0430/20171208/20171208181157.png">
</p>

これで実装完了!(このページの「PageTop」ボタンが、上記で実装したものです)

 

赤字の箇所は、お好みで変更して下さい。上から順に説明します。

  • 「1.12.4」:jQueryのバージョンです
  • 「500」:ページ上端からスクロールしていって、PageTopボタンが出現するまでのピクセル数です
  • 「300」:PageTopボタンを押してページ上端に到達するまでの時間(ミリ秒)です
  • 「5px」:bottom 画面下からの距離を指定する
  • 「10px」:right 画面右からの距離を指定する
  • 「HTTP://~」:ボタンに使用する画像のURLです(上記は、はてなフォトライフのURLです)

 

なお、<body>~</body>内へのコピペであれば、記事ごとにPageTopボタンが配置されます。

<head>要素にコピペすると、はてなブログの場合、全記事(過去記事含む)にPageTopボタンが配置されます。

 

 

補足説明

コードの上から順に補足説明します。

  • <script src="">:jQueryをロードしている部分です。
  • <script>:メインプログラムのJavaScriptjQueryの文法で)を記述している部分です。
  • id="":JavaScriptが制御する要素を指定しています。id名は任意。
  • style="":ボタン位置もろもろを指定するCSSです。1Stepで実装するために、あえてインラインスタイルにしました。
  • position:要素の位置を指定します(fixedでは画面を基準にし、下からの位置、右からの位置などを指定します)
  • pointer:画像を選択した時に、カーソルが指の形になるようにしています。
  • z-index:重なり順序を指定しています。値が大きい要素ほど前面にきます。
  • hidden:JavaScriptが読み込まれて実行されるまでの画像のチラ映りを防止します。
  • <img src="">:文字の代わりに画像を指定しています。 

はてなフォトライフにアップロードした画像は、画像を右クリックでURLを取得できます。

 

なお、jQueryjQueryを使ったJavaScriptの記述については、専門書や専門のサイトを参照してくださいませ(;^_^A
ではでは。

 

Milkさんの記事を参考にさせていただきました!

www.milkmemo.com

 

Illustrated by 霜山 シモンさま

f:id:kouten0430:20171209140506p:plain

Gistを貼り付ける

ソースコードの表示を見やすくカスタマイズシリーズ(番外編)です。

今回は、Gist貼り付けをやってみます。

Github.Gistのアカウントの作成から、ブログへの貼り付けまで10分ほどで出来ます。
考えるな、感じろの精神でとりあえずやってみましょう。


Github.Gistにアクセスし、アカウント作成します。 

f:id:kouten0430:20171205233016j:plain

をクリックし、

  • Username
  • Email address
  • Password

をそれぞれ入力して、次へすすみ

認証メールを受信してユーザー認証を行います。

 

ログインした状態で再度、Github.Gistにアクセスし

Gistを作成します。(注:GitHubに行かない) 

f:id:kouten0430:20171205233554j:plain

  1. 登録するGistのコメント(てきとう)を入力します。
  2. Gistの名称を入力します。(ピリオドの後に言語名を記入すると、シンタックス・ハイライトされます〔VBAなら.vbまたは.vba〕)
  3. コードを貼り付けします。(Google Chromeではうまく貼り付けできますが、IEではうまくいきませんでした)
  4. 「Create public qist」をクリックして登録します。(Gistを追加するときは、「Add file」をクリック)

 

はてなブログの記事に貼り付けします。

f:id:kouten0430:20171205233731j:plain

  5.サイドバーの「Gist貼り付け」をクリック(無ければ+ボタンから追加する)

  6.Github.GistのユーザーIDを入力して、連携する

  7,登録済みのGistを選択し、

  8.「選択したアイテムを貼り付け」をクリック

 


こんな感じで貼り付けされました。では('ω')ノ

ブログを書くこと自体がプログラミングのようなもの?(雑記-5)

こんばんにゃ。とりとめのない雑記です。

 

ブログを書くこと自体がプログラミングのようなもの?
最近ブログを書いていて思うのですが、ブログを書くこと自体がプログラミングのようなものではないか・・・と思うのです。日本語という言語を使って、考え・思いなどを文章のかたちにする。その文章にアクセスした読者または未来の自分は、その内容を順番に読み込んでいって咀嚼(コンパイル)する。
文章が簡潔で適切な表現なら、コンパイルに失敗しないし、メモリも少なくてすむ。
ただし、大きな違いは、プログラムを読み込むのはコンピューターではなく人間なので、実行に移すかどうかは心を動かされるかどうか、です。
そんな、心を動かすようなものを書ける人ってすごいと思います。

 

ツイッターとブログの違い
私はツイッターもやってますが、正直、ツイッターは何を書いていいかさっぱり思いつきません・・・。ブログだと書きたいことはたくさんあるんですケド。(更新速度は遅めですがね)
ツイッターとブログの違いは何だろう?と考えた結果、ツイッターに必要なのは「ノリ」や「テンポ」のようなもので・・・言葉は消耗品となり、流れて消えていく傾向にあります。
ブログはツイッターと比べ、言葉の前後を入れ替えたり、表現を変えたりしながら、試行錯誤して作る、プログラミングに似ていると思います。
現実の世界であえて、ツイッターが好きか、ブログが好きか、両方好きか、の3タイプにわけるとこうでしょうか?
ツイッター好き:お調子もの(他愛のない雑談が好き)
ブログ好き:真面目(じっくり考えるのが好き)
両方好き:器用

注:好天の偏見が入っております


趣味>仕事であってはならない
じっくり考えて、書いていくブログですが(もう勝手に決め付けてます)、これはあくまでも趣味あり、趣味>仕事であってはならないと常々考えています。本業のほうが上手くいっているからこそ、趣味が楽しめるという図式が成り立っているのであり、本業のパフォーマンスが落ちるような趣味のやり方はすべきではないと断言します。あなたが趣味のやりすぎでヘロヘロになって出社して、実力の半分も出せないのであれば、その不足分は必ず回りまわって他の誰かが補完しています。(たぶん)
仕事人間は面白くない、といわれそうですが、そうではなく力分配を間違えないように、ということを言いたいのです。


最後に
ってなことを、えらそうに書きましたが、これらは全て自分に向けて言い聞かせているのであり、自分を正しく制御するための一種のプログラミングなのです。はい。

では。また('ω')ノ

 

f:id:kouten0430:20171203234335p:plain

ブログを見やすくする:ソースコードを見やすくカスタマイズ ~JavaScriptの利用~

前回は、はてな記法Markdown記法を使ってソースコードの表示をカスタマイズしてみましたが、今回はJavaScriptを使ってカスタマイズしてみたいと思います。といっても、自分でJavaScriptを書くわけではなく、シンタックス・ハイライト用に配信されている既存のサービスを利用します。
何個か有名そうなのを実際に試してみたので、お付き合い下さい。

 

highlight.js

「設定」→「詳細設定」→「headに要素を追加」に以下を追記します。(はてなブログ以外ではHTML文書の<head>~</head>の部分に該当します)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/far.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

このブログは当たり前のことをドヤ顔で書くブログなので、ひとつひとつ解説してみます。まず、1行目でデザインの元になる外部CSSファイルをロードし、2行目で外部JavaScriptファイルをロードします。3行目でロードしたJavaScriptの関数を実行しています。

<script>タグは、<head>~</head>および<body>~</body>のどちらでも記述できますが、<link>タグは<head>~</head>にしか記述できません。

バージョン(9.12.0など)とCSSファイル(far.min.cssなど)は適宜変更します。

 

<link>タグ:

外部リソースを指定する。(rel〔リレイション〕属性:現在の文書からみた外部リソースの位置づけを表す。href〔ハイパーリファレンス〕属性:外部リソースのURLを指定する)

<script>タグ:

JavaScriptなどのスクリプトを組み込む。(src〔ソース〕属性:指定したURLにある外部jsファイルをロードする)

 .minの意味:

highlight.min.jsやfar.min.cssなどファイル名に.minがついているものは、一般的にminifiedファイルと呼ばれ、コード内のコメントや改行・インデントを削除しファイル容量を小さくしたバージョンになります。(highlight.js→コメントや改行・インデントがそのままの開発者向けファイル、highlight.min.js→コメントや改行・インデントを削除し容量を小さくした配布用ファイル)

 

さて、ここまで準備したら実際にシンタックス・ハイライトさせて見てみましょー。<pre><code>~</code></pre>に記述されたコードが、ロードしたJavaScriptCSSによってハイライト処理されます。(プログラミング言語の種類は自動判別されます)

用意されたデザインがたくさんあるので、いくつか代表で見てみます。

 

far.min.css

f:id:kouten0430:20171203123152j:plain

 

docco.min.css

f:id:kouten0430:20171203123241j:plain

 

brown-paper.min.css

f:id:kouten0430:20171203123310j:plain

 

school-book.min.css

f:id:kouten0430:20171203123330j:plain

 

tomorrow-night-blue.min.css

f:id:kouten0430:20171203123348j:plain


これ以外のデザインは公式にデモがあるので、こちらを参照して下さい。

 


google-code-prettify

「設定」→「詳細設定」→「headに要素を追加」に以下を追記します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

 

このようにオートローダーを読み込むだけでOKです。(オートローダーとは:src属性で読み込んだJavaScriptが、関連するCSSなどのファイルの読み込み、関数の実行までを一括で行います)

さて、オートローダーの設定ができたら、<pre class="prettyprint">~</pre>にコードを記述します。(class属性にprettyprintを指定したものが、シンタックス・ハイライトの対象になります。 言語を指定する場合は、"prettyprint lang-言語名"とします)
<code>タグは不要です。

読み込むCSSを変更する場合は、下記のようにURLの末尾にリクエストパラメータを付記します。(リクエストパラメータとは:URLの末尾に「?」マークを付け、続けて「名前=値」の形式で記述します。クライアントからサーバにパラメータを渡すのに使われます)

*/run_prettify.js?skin=desert(デザイン「desert」を読み込む場合)


default(パラメータ無し)

f:id:kouten0430:20171203123837j:plain

 

desert

f:id:kouten0430:20171203123858j:plain

 

doxy

f:id:kouten0430:20171203123914j:plain

 

sunburst

f:id:kouten0430:20171203123935j:plain


個人的には「doxy」が、昔のアーケードゲームのスコアランク画面のようで好みです。

 

 

prism.js

必要なjsファイルとcssファイルをダウンロードして使います。公式ページの右上「DOWNLOAD」から入り、ダウンロードするファイルにチェックを入れます。

 

「Core」・・・必須
「Themes」・・・CSSの種類です。お好みのものにチェックします。
「Languages」・・・使用するプログラミング言語にチェックします。
「Plugins」・・・お好みでチェックを入れる

 

最後に、一番下の「DOWNLOAD JS」と「DOWNLOAD CSS」をそれぞれ押して、prism.jsとprism.cssをダウンロードします。

ダウンロードしただけでは、ローカルでしか使えないので、オンライン上からアクセスできる場所に保存します(例えば、契約しているプロバイダーの無料HPスペースなど、権限がなくてもアクセスできる場所ならどこでも)

んで、「設定」→「詳細設定」→「headに要素を追加」に以下のように書きます。(*/の箇所は保存した場所のURLにします)

<link rel="stylesheet" href="*/prism.css">
<script src="*/prism.js"></script>

 

やっていることは、CDN(コンテンツ・デリバリー・ネットワーク:コンテンツ配信網)を利用しているか、自前で保存したファイルを利用しているかの違いだけです。

<pre><code class="language-言語名">~</code></pre>に記述されたコードが、シンタックス・ハイライトされます。

CSSを変更する際は、公式ページから「Themes」のチェックを入れ替えて再度、prism.cssをダウンロードし、保存してあるprism.cssと入れ替える必要があるようです。

 

Default

f:id:kouten0430:20171203124351j:plain

 

Dark

f:id:kouten0430:20171203124409j:plain

 

Coy

f:id:kouten0430:20171203124430j:plain

 

Okaidia

f:id:kouten0430:20171203124447j:plain

 

Solarized Light

f:id:kouten0430:20171203124506j:plain

 

Twilight

f:id:kouten0430:20171203124522j:plain

 

公式かどうかわかりませんが、CDN版もあります。こちら

 

 

最後に

ここまでやってきてアレですが、VBはうまく言語判別されないようです・・・。唯一、prism.jsがまともかなぁと思ったのですが、よくみると少しヘンです・・・。

 

追記:

さっそく、thomさんにprism.js不具合修正について教えていただきました。

thom.hateblo.jp

Coyを例に修正後のスクリーンショットを掲載します。さあ、間違い探しです。どこが変わったでしょうか?

f:id:kouten0430:20171203174524j:plain

ブログを見やすくする:ソースコードを見やすくカスタマイズ ~はてな記法、Markdown記法~

今回は、「はてな記法」と「Markdown記法」を使ってソースコードの表示を見やすくカスタマイズしてみたいと思います。

 

はてな記法とは?

はてな記法を使うと、HTMLの知識がなくても、見出しやリストといった、ブログを書く上で便利な表現を簡単に行うことができます。(はてなダイアリーヘルプより)

例えば、「はてな記法」編集モードでは

 

<h3>はてな記法とは</h3>

 

 

*はてな記法とは

 

と書くことができます。

こう書くと「各HTMLごとにはてな記法があるのか・・・覚えるの大変そうだなぁ」と思ってしまいそうですが、意外とはてな記法はそんなに多くなく、必要最低限のものに凝縮されているようです。下記は、はてなダイアリーヘルプ内の、はてな記法一覧へのリンクです。

はてな記法一覧 - はてなダイアリーのヘルプ

これくらいなら、一覧を参照しながら記述できそうです。

 

で今回の目的である、ソースコードの表示を見やすくするためのはてな記法は・・・

 

>||
ここにソースコードを記載する
||<

 

シンタックス・ハイライト(プログラムコードなどの構文を色付けする)させる場合は

 

>|ファイルタイプ|
ここにソースコードを記載する
||<

 

となります。ファイルタイプは、はてなダイアリーヘルプに網羅されていますので参照下さい。
試しにVBAのコードをはてな記法で表示してみます。(VBAのファイルタイプはvbです)

Sub 乱数を生成()
    '10未満1以上の乱数を5000個生成する
    Dim i As Integer
    Randomize
    For i = 2 To 5001
        Cells(i, 2).Value = Rnd
    Next i
    Randomize
    For i = 2 To 5001
        Cells(i, 2).Value = Cells(i, 2).Value + Int((9 - 1 + 1) * Rnd + 1)
    Next i
End Sub

こんな感じで、表示されます。ちなみに背景色・文字色(ハイライトされない文字)は外部CSSで指定した色になるようです。

 

 

Markdown記法とは?

書きやすくて読みやすいプレーンテキストとして記述した文書を、HTML文書へと変換できるフォーマットとして、開発された記法だそうです。・・・要するにHTMLタグをいちいち記述するのは大変なので、簡単に書く方法を考えてみたよ!ということですね。しかし、Markdown記法で書いたものをそのままブラウザで表示することはできないので、Markdown記法→HTMLに変換するスクリプトMarkdown.pl)を実装している必要があります。
はてなブログは、Markdown記法で書いたものをHTMLへ変換するスクリプトを実装したブログということになります。

例えば、「Markdown記法」編集モードでは

 

<h3>Markdown記法とは</h3>

 

 

### Markdown記法とは

 

と書くことができます。はてな記法Markdown記法は、HTMLへの変換スクリプトが違うだけで、目的は同じものであるといえます。はてな記法に比べて、Markdown記法のほうが汎用的なので覚える価値はあると思います。

下記は、Markdown記法の一覧(サンプル)を掲載したページへのリンクです。

Markdown記法 サンプル集 - Qiita

 

で、ソースコードの表示を見やすくするためのMarkdown記法は・・・

 

```
ここにソースコードを記載する
```

 

シンタックス・ハイライトさせる場合は

 

```言語名
ここにソースコードを記載する
```

 

となります。(VBAの言語名はvbです)

表示結果は、はてな記法の時と同じなので割愛します。

 

「見たまま」編集モードをメインに使っている方は、はてな記法Markdown記法には無縁か・・・というとそんなことはないかもしれません。考え方を変え、はてな記法Markdown記法をHTML生成のためのツールとして利用するというのもアリです。
例えば、「見たまま」編集モードには標準でシンタックス・ハイライト機能が無いので、シンタックス・ハイライトされたHTMLを「はてな記法」編集モードまたは「Markdown記法」編集モードに生成してもらいましょう。

 

Google Chromeを使った方法です。

  1. はてな記法またはMarkdown記法でシンタックス・ハイライトしたソースコードをプレビューに表示します。
  2. プレビューの該当する要素(ここではpre)の上で右クリックし、検証をクリックします。
  3. するとページのHTML構造が表示され、pre要素が選択された状態になっていると思います。(選択されていなければ矢印マークを押して、該当の要素を選択しませう)

    f:id:kouten0430:20171125145742j:plain

  4. 該当のpre要素が選択された状態で右クリックし、「Copy」-「Copy outerHTML」で、HTMLをクリップボードに取得できます。

 

取得した、シンタックス・ハイライト済みのHTMLはこんな感じ

<pre class="code lang-vb" data-lang="vb" data-unlink=""><span class="synStatement">Sub</span> 乱数を生成<span class="synStatement">()</span>
   <span class="synComment"> '10未満1以上の乱数を5000個生成する</span>
    <span class="synStatement">Dim</span> i <span class="synStatement">As</span> <span class="synType">Integer</span>
    <span class="synStatement">Randomize</span>
    <span class="synStatement">For</span> i <span class="synStatement">=</span> <span class="synConstant">2</span> <span class="synStatement">To</span> <span class="synConstant">5001</span>
        Cells<span class="synStatement">(</span>i<span class="synStatement">,</span> <span class="synConstant">2</span><span class="synStatement">).</span><span class="synPreProc">Value</span> <span class="synStatement">=</span> <span class="synIdentifier">Rnd</span>
    <span class="synStatement">Next</span> i
    <span class="synStatement">Randomize</span>
    <span class="synStatement">For</span> i <span class="synStatement">=</span> <span class="synConstant">2</span> <span class="synStatement">To</span> <span class="synConstant">5001</span>
        Cells<span class="synStatement">(</span>i<span class="synStatement">,</span> <span class="synConstant">2</span><span class="synStatement">).</span><span class="synPreProc">Value</span> <span class="synStatement">=</span> Cells<span class="synStatement">(</span>i<span class="synStatement">,</span> <span class="synConstant">2</span><span class="synStatement">).</span><span class="synPreProc">Value</span> <span class="synStatement">+</span> <span class="synIdentifier">Int</span><span class="synStatement">((</span><span class="synConstant">9</span> <span class="synStatement">-</span> <span class="synConstant">1</span> <span class="synStatement">+</span> <span class="synConstant">1</span><span class="synStatement">)</span> <span class="synStatement">*</span> <span class="synIdentifier">Rnd</span> <span class="synStatement">+</span> <span class="synConstant">1</span><span class="synStatement">)</span>
    <span class="synStatement">Next</span> i
<span class="synStatement">End</span> <span class="synStatement">Sub</span>
</pre>

これを「見たまま」 編集モードのHTML編集に貼り付けましょう。ただし、見たまま・はてな記法Markdown記法の各モードは記事内容を保持したまま切り替えできないので、HTML生成作業は別途済ませましょう。

 

次回は、JSライブラリを利用した、ソース・コード表示のカスタマイズについて記載したいと思います。