KOTUKOTU-NOTES

サンプルコード

特定列（lCol)の最終行を取得します。

Function GetMaxRow(lCol) As Variant Dim c As Range Set cl = Cells(Rows.Count, lCol) If cl.Value <> "" Then GetMaxRow = Rows.Count Else GetMaxRow = cl.End(xlUp).Row End IfEnd Function

ポイント解説 GetMaxRow= cl.End(xlUp).Rowだけではダメな理由

サンプルコードでは最終行を取得する処理（画像の③）だけでなく、条件（①）をつけています。

エクセルの使用中の最終行を取得する場合、③の処理のみでは失敗するケースがあります。それは、エクセルの最大行に値が入っている場合です。（↓の画像参照）

そのため、条件（①）を付けています。

上の画像のケースで、③の「GetMaxRow= cl.End(xlUp).Row」を実行するとGetMaxRow（最終行）=１行目となります。

しかし、正しくは②GetMaxRow=最大行（1048576行目）となるべき。ですから、条件①で、最大行のみ場合分けするようにしました。

最終行の取得は最大行をチェックしないと失敗する まとめ

最終行を取得する方法はいろいろありますが、Endを使って取得するときは最大行の値に注意する必要があります。

しかし、シートの最大行までは使わない！そんなにデータがない！ということであれば、③の「GetMaxRow= cl.End(xlUp).Row」のみで問題ありません。

配列とは

同じ種類の変数の集合体です。前から順番に0、１、２、３…と番号が振られており、データをセットしたり、使うときは番号で指定します。

0番目のデータを使うときは「ary(0)」のように指定します。下の図は、配列ary(3)に数値100、200、300、400を代入するイメージです。

コーディングすると以下の通りです。

サンプルコード

Sub Hairetsu() Dim ary(3) As Integer ary(0) = 100 ary(1) = 200 ary(2) = 300 ary(3) = 400 End Sub

サンプルコード解説

配列の宣言 Dim ary(3) As Integer

①のDimは変数を使えるようにするための宣言です。この宣言以降、aryという配列を使えるようになります。

②は配列の名前です。

③で配列内にいくつ変数を持つか指定します。例では、４つ（0番～3番）となります。添字(()内の数字）通りの3つにならないことに注意しましょう。配列内の変数の数は添え字＋１個です。

④As 型名 で配列の型を表します。今回は数値として使いたいので型名をIntegerとします。Integerは数値の変数で-32,768 ～ +32,767までの値を代入することができます。

配列への代入

最初に説明した、４つの箱にデータをいれているイメージをコーディングしたものになります。

配列の値を加算する

ここまでで、配列に数値データを設定しました。今度は「配列内のデータそれぞれに100を加算する」処理を行います。

サンプルコード

 ary(0) = ary(0) + 100 ary(1) = ary(1) + 100 ary(2) = ary(2) + 100 ary(3) = ary(3) + 100

解説

配列の０番目に、100を加えて配列０番目に戻す。処理をしています。配列の１番目から３番目も同様に処理しています。

１行目の処理を絵にすると、このようなイメージですね。

しかし、４つの処理を１行ずつかくのは少し手間です。４つだとまだ楽ですが、ary(1000)の時に処理を1001回書くわけにはいきません。そんな時にループ処理を使います。

配列の計算をループで処理する

サンプルコード

 For i = 0 To 3 ary(i) = ary(i) + 100 Next

解説

先ほど４行書いていた処理が、「ary(i) = ary(i) + 100」という１行にまとめることができました。

「 For i = 0 To 3」は i を０から３まで増やしていく という意味です。

「ary(i) = ary(i) + 100」の i は「 For i = 0 To 3」で指定される i （0～3)に置き換えて実行します。

なので、

となり、1行ずつコードを書いた時と同じ処理になります。

このように、配列を使うとデータに連続性が出るのでループで同じ繰り返し処理をすることができて便利です。配列とループ処理は非常に相性がよいのです。

トップページなどに表示される、記事リストの「READ MORE」を「続きを読む」に変えてみます。

ちなみに、レイアウトの「ブログ投稿」のところにこんな画面があり、簡単に変更できると思ったら、ここを変更しても変わりません。

設定方法

「HTMLを編集」を開いて、以下のように変更します。

<a class='btn col m12 right' expr:href='data:post.url' style='font-weight:600;'>Read more <i class='material-icons medium chevron_r'/></a>

<a class='btn col m12 right' expr:href='data:post.url' style='font-weight:600;'>続きを読む <i class='material-icons medium chevron_r'/></a>

できました。

READ MOREって大文字で検索しても出てこない。なんで？

ブログのテーマのカスタマイズの内容をかくのに、コードがキレイにみれた方がよいなーと思いました。

調べたところ。Google Code prettifyを入れるといいみたい。

このページを参考にしました。

まあうさブラザーズさんのブログ

Google Code prettifyの使い方 

使う前の準備

HTMLを編集するを開く 

HTML編集への記述

綺麗に表示するためのプログラムを呼び出せるようにHTML編集で以下を記述します。
</head>の前に記述します。

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

使ってみる

記事側への記述

記事側はHTMLビューにこのように書きます。

<pre class="prettyprint">コード</pre>

こんな風に表示されます

行番号をつけたい場合は、HTLMLにこんな風にかきます。

<pre class="prettyprint linenums">コード</pre>

 そうすると、こんな風に表示される。でも、５行ごとにしか表示されない。

１行ずつ行番号をに表示するには

HTMLの編集に以下を追加します。</head>の前に書きます。

<style type='text/css'>
.prettyprint ol.linenums li {
  list-style-type: decimal;
}</style>

そうすると、先ほど５行ごとだったのが、１行ずつに表示されます。

 記事が少なくて、ページトップにあるナビゲーションに載せるほどの物がないので、消しておこうと思います。

トップナビゲーションのリンクリストを消す

 やること

赤枠の部分を消します。

設定箇所

「HTMLを編集」を開いて、以下の箇所をこんなふうに削除（コメント）します。

<!--
    <ul class='right hide-on-med-and-down'>
      <li><a href='#!'>First</a></li>
      <li><a href='#!'>Second</a></li>
      <li><a class='dropdown-button' data-activates='dropdown1' href='#!'>Dropdown1<i class='material-icons'>arrow_drop_down</i></a></li>
      <ul class='dropdown-content' id='dropdown1'>
        <li><a href='#!'>First</a></li>
        <li><a href='#!'>Second</a></li>
        <li><a href='#!'>Third</a></li>
        <li><a href='#!'>Fourth</a></li>
      </ul>
      <li><a class='dropdown-button' data-activates='dropdown2' href='#!'>Dropdown2<i class='material-icons'>arrow_drop_down</i></a></li>
      <ul class='dropdown-content' id='dropdown2'>
        <li><a href='#!'>Ichi</a></li>
        <li><a href='#!'>Ni</a></li>
        <li><a href='#!'>San</a></li>
        <li><a href='#!'>Yon</a></li>
      </ul>
    </ul>
-->

できました！

おしまい。

 記事の数が少なくて、サイドメニューを使うほどではないので、表示しないようにしたいと思います。

サイドメニューを表示しないようにする

やること

 

 

設定方法

「HTLMを編集」から、ボタンに関する部分を削除（コメント）します。

 

設定箇所

以下の箇所を↓このようにを削除（コメント）にします。

<!-- 左上のスライドメニュー表示ボタンを消す   
<a class='sideb-collapse left' data-activates='slide-out' href='#!'><i class='material-icons' style='font-size:32px;'>menu</i></a>
-->

 できました！

 記事のリストに表示される要約というか、ブログの内容が長すぎて、記事の中身が丸見えに。もう少し、短くしたい…。

短くする方法

変更前

変更後

設定方法

設定箇所

item_summaryの値と、文字を切り取る判定部分を一部変更します。

具体的なソースは、画像のに記載。

 設定内容

• ①　item_summaryの値を少なくする。（表示したい文字数に。誤差はでる。）
• ②　 while～の太字の部分のようにコメントする。（※注意も参照）

<!-- m値を変える start -->
<!-- item_summary = 250; -->
item_summary = 40;
<!-- m値を変える end -->
 
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    /* -- m削除 start
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    -- m削除 End*/
     strx = strx.substring(0,chop-1);
    return strx+'...';
}
 

注意

ただし、この方法たど&nbsp;とか&ampとかの途中で切れると、&nbとか表示されてしまう。その時は頑張って調整することにしよう。今のところ困っていないし。

補足

item_summaryで表示したい文字数にするだけだと、希望する長さできりとってくれません。

指定した文字数を超えていても、それ以降のスペースが出てくるところまでを持ってきてしまいます。

多分、英語等の表記を考慮した作りなんじゃないかな？単語が途中で切れないようにしているのかも。 

スペース入れるのとか忘れるし、ちゃんと指定したくらいの文字数のあたりにスペース入れるの面倒…。単語の途中で切れてもよいから文字数優先で切ってほしいのでこんな風に直しました。

Google Code prettifyを行番号がでるように設定したのに、以下のように表示されなくて困った事がありました。

ここのページの通り、記事のmargin-leftを設定してやると、ちゃんと番号をふってくれるようになりました。マージンがたりなくて、番号が切れちゃっていたのかな？

olリストの番号が左ぎりぎり

で、リストに番号を振れるはずなのですが、

編集画面ではこのように左から適度なスペースの後に番号がふられているのに

プレビュー、ブログ上でみると番号が左はしギリギリです。

olリストの番号の表示開始位置を設定

設定する箇所

「HTMLを編集」を開き、CSSに設定を追加します。

/* Posts------より下、/* Sidebar Content-----より上に記述しました。

設定

2.5emの部分はお好みで調整します。

 .post-body ol li {
    margin-left: 2.5em;
}

できました！リストの左側に適度な空間ができました。

ブロいましたグのテーマのカスタマイズの内容をかくのに、コードがキレイにみれた方がよいなーと思。

調べたところ。Google Code prettifyを入れるといいみたい。

このページを参考にしました。

まあうさブラザーズさんのブログ

Google Code prettifyを使うと

設定前

/* テスト　*/
a = a + 1;
a = a + 1;
a = a + 1;
a = a + 1;
a = a + 1;

設定後

設定・使い方

「HTMLを編集」への設定

 ①「HTMLを編集」を開く

②以下を記述

綺麗に表示するためのプログラムを呼び出せるようにHTML編集で以下を記述します。
</head>の前に記述します。

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

記事側への記述

記事側はHTMLビューにこのように書きます。

<pre class="prettyprint">コード</pre>

こんな風に表示されます

行番号をつけたい場合は、HTLMLにこんな風にかきます。

<pre class="prettyprint linenums">コード</pre>

 そうすると、こんな風に表示される。でも、５行ごとにしか表示されない。

あれ？しましま出たけど、行番号が表示されないんだけど…という方は、olの左のマージンが足りないかもです。ここでCSSのolの設定を見直してみてください。

１行ずつ行番号をに表示するには

HTMLの編集に以下を追加します。</head>の前に書きます。

<style type='text/css'>
.prettyprint ol.linenums li {
  list-style-type: decimal;
}</style>

そうすると、先ほど５行ごとだったのが、１行ずつに表示されます。