AB型技術系 主に備忘録

ほぼプログラム関連の備忘録

cssフレームワーク skeletonで雛型作成

趣味のサイト作成にcssフレームワークのskeletonを使ってみることにしました

Bootstrapも触ってみたいなと思いつつ個人のサイトでは持て余しそうなので・・・

skeletonは非常にシンプルで必要最小限の機能だけ提供してくれます

構成はヘッダ、メニュー、メインコンテンツ、サイドメニュー、フッターという定番のやつ

サンプル

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>サンプルページ</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/skeleton.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="eight columns"><h1>サイト名</h1></div>
      <div class="two columns">atom</div>
      <div class="two columns">rss</div>
    </div>
    <div class="row">
      <ul>
        <li style="display:inline-block;padding:5px;">メニュー1</li>
        <li style="display:inline-block;padding:5px;">メニュー2</li>
        <li style="display:inline-block;padding:5px;">メニュー3</li>
        <li style="display:inline-block;padding:5px;">メニュー4</li>
      </ul>
    </div>
    <div class="row">
      <div class="nine columns">
        <section>
          <div>
            <h5>タイトル</h5>
            <div>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん・・・</div>
          </div>
          <div>
            <h5>タイトル</h5>
            <div>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん・・・</div>
          </div>  
        </section>
      </div>
      <div class="three columns">
        <aside>
          <h5>サイドメニュー</h5>
          <div>
             <ul>
              <li>サイドメニュー1</li>
              <li>サイドメニュー2</li>
              <li>サイドメニュー3</li>
             </ul>
          </div>
        </aside>
        <aside>
          <h5>スポンサーリンク</h5>
          <div>
             
          </div>
        </aside>
      </div>
    </div>
    <div>
      <div class="twelve columns">フッター</div>
    </div>
  </div>
</body>
</html>

サンプル
http://retro.kansai-fan.com/sample1.html

サンプル(ボーダー付)
http://retro.kansai-fan.com/sample2.html

normalize.cssとskeleton.cssを読み込めばあとはルールに従ってマークアップするだけ

グリッドは12カラムの構成

全体のdivのclassに”container”を指定、その子要素のdivに”row”を指定

その子要素を3カラムと9カラムにしたいならclassに"three columns"と"nine columns"を指定したdivを追加するだけ

グリッドレイアウトが非常に簡単に作成できました

サイト特有の装飾は独自のcssを作ればよいかと


Apache Commons StringUtilsのisEmptyとisBlankの違いをふと調べてみた

長年使い続けているStringUtilsのisEmptyとisBlankの違いを今更ながら調べてみました

Apache Commonsのサイトからソースをダウンロードして確認したところ

isEmpty

public static boolean isEmpty(final CharSequence cs) {
    return cs == null || cs.length() == 0;
}

引数の文字列がnullか長さが0なら空と判定されます
trimしてないのでスペースが含まれる場合等は空と判定されません

isBlank

public static boolean isBlank(final CharSequence cs) {
    int strLen;
    if (cs == null || (strLen = cs.length()) == 0) {
        return true;
    }
    for (int i = 0; i < strLen; i++) {
        if (!Character.isWhitespace(cs.charAt(i))) {
            return false;
        }
    }
    return true;
}

引数の文字列がnullか長さが0なら空と判定されるのはisEmptyと同じです
その後に一文字ずつisWhitespaceで空白が含まれているかどうか判定してますね
スペースはisWhitespaceで空白と判定されます

DBの主キー等の必須項目のチェックにはisBlank

システム的に半角スペース等の空白のみが入ることのない文字列の空文字判定にはisEmptyでしょうかね


2018/03/05 母校(近畿大学)のオープンキャンパスに潜入

f:id:freelancer13:20180327010456j:plain 電車の中吊り広告に母校、近畿大学オープンキャンパスの情報を発見

予約不要、入場も無料とのことなので暇つぶしも兼ねて参加することに

卒業後に資格試験で訪れて以来10数年ぶりです

足しげく通ったお店ははどうなっているのか

長瀬駅を降りてまなびや通りを通ってキャンパスへ向かいます

f:id:freelancer13:20180327010850j:plain

キャンパスから遠いけど時間に余裕のある時に通ってた御用は健在

そばと丼ぶりのセットをよく食べてました

今回お昼は学食でぶり丼食べると決めてたのでまた日を改めて懐かしの味を楽しみたいと思います

f:id:freelancer13:20180327010837j:plain

ワンプレイ20円のゲーセン、UFOは閉店

この辺りにあったと思いますが・・・

f:id:freelancer13:20180327010824j:plain

たまに古本買ってた本屋さん

中のレイアウトは当時のまま

レジの奥でおばちゃんが座ってテレビみてるのも当時のまま

ザ・ワールド並みに時が止まってる感じです

f:id:freelancer13:20180327010811j:plain

このお店も当時からあったと思います

行ったことないけど

f:id:freelancer13:20180327010711j:plain

ここでちょっと裏通りにむかいます

おそらく大学4年間で一番通ったであろう裏王があった場所

昼間はチャーハンか天津飯のほの2択、それ以外を頼むとたいてい「昼はやってへん」と言われる

チャーハンが300円、大盛で400円、天津飯が350円くらいだったかな?

天津飯大盛と言って、天津飯の大盛はないと言われ恥ずかしい思いをした裏王

だいぶ前に閉店したようです・・・

f:id:freelancer13:20180327010657j:plain

近大出身のボクシングで有名な方がお勧めしてたので行ったけど自分の口には合わなかったカロリー

f:id:freelancer13:20180327010646j:plain

この辺りには1階でゲーム、2階で古本を売ってるお店があったけど閉店したようです

宇宙刑事シャリバンの中古VHSを発見し思わず買ってしまった思いで深いお店だったのですが・・・

f:id:freelancer13:20180327010625j:plain

松屋デビューした松屋も健在でした

ここが松屋でなければ吉野家を贔屓にしていたかもしれません

f:id:freelancer13:20180327010615j:plain

閉店したと聞いていたあうとばあん

この日は休業日だっただけで営業はしてるようです

昼食後にここの2階でレトロゲームをやるのが日課でした

怒首領蜂とKOF99をよくプレイしてました

f:id:freelancer13:20180327011506j:plain

こちらはオープンキャンパスでもらったもの

所々当時のままの建物もあったけど新しい施設ができたり格段に綺麗になってました

今の時代に学生生活送ってる子達に嫉妬しまくり

f:id:freelancer13:20180327010859j:plain

こちらは帰宅途中によった布施駅近辺

天一デビューした天一も健在でなにより

今更Androidアプリ開発 Android Studioの導入と日本語化

今更ながら勉強もかねてAndroidアプリの開発を始めることにしました。

なにはともあ開発環境、ということでAndroid Studioを導入。

慣れ親しんだeclipseでもいいかなとは思いましたが、Android Studioが主流になりそうかなと思いまして。

f:id:freelancer13:20180310140819p:plain

インストール直後は英語です。

f:id:freelancer13:20180310140830p:plain

preadesの日本語化プラグインをインストールすれば問題なく日本語化できました。

Eclipse 日本語化 | MergeDoc Project

ダウンロードしたzip ファイルを解凍して setup.exe でインストーラーを起動。

Android Studioの実行ファイルを選択するだけで後は自動で日本語化してくれます。

HP Spectre 13 は高級感が漂い所有欲を満たすが・・・

2017年の年末

もう少し経費を使って税金対策しようとノートパソコンの購入を検討

用途はドキュメント作成、ネットサーフィン、プログラミング等

MacBook等も検討しましたが、最終的には第8世代CPUを搭載したHPのSpectre 13を購入しました

HP Spectre 13(2017年11月モデル)製品詳細 - ノートパソコン | 日本HP



スタンダードモデルとパフォーマンスモデルがありますが、迷うことなく性能の高いパフォーマンスモデルを選択

CPUがCore i7-8550U 、メモリが16GB、SSDが512GBとなかなかのスペック
第8世代CPUは4コアになり性能がかなりアップしたとの評判なので期待大です

年末に注文して1月10日に到着

f:id:freelancer13:20180206004232j:plain

専用化粧箱に梱包されてます

なかなかの高級感

f:id:freelancer13:20180206004230j:plain

本体以外にマニュアル、専用スリーブケース、速効!HPパソコンナビ特別版

f:id:freelancer13:20180206004306j:plain

こちらは年末年始特別キャンペーンの特典のHP Spectreマウス

他に液晶保護フィルムも特典としてもらえました

f:id:freelancer13:20180206004227j:plain

ホワイトにアクセントのゴールド

個人的には全モデルのブラックが好きなのですが・・・

女性はホワイトのほうが好みなのでしょう

f:id:freelancer13:20180206004224j:plain

ACアダプタとUSB A 変換アダプター

Spectre 13のUSBはタイプCなので通常のUSBを使うために変換アダプターが標準で添付されているのはありがたいです

f:id:freelancer13:20180206004221j:plain

10.4mmなのでかなり薄いです

f:id:freelancer13:20180206004309j:plain

3年ほど使用していたLaVie Zの上に載せてみました

LaVie Zは高さ14.9mm、なので薄さはSpectre 13の勝ちです

一方重さはLaVie Zが795g、Spectre 13は1.11 kgなのでSpectre 13のぼろ負け・・・

しかし、持ってみると数値ほどの差を感じないので携帯するのも苦にならないかと

f:id:freelancer13:20180206004312j:plain

Spectre 13は側面に端子類がなくすべて背面にあります

薄さ実現のためなのでしょう

少し不便ですが個人的には妥協できるので問題なし

f:id:freelancer13:20180206004314j:plain

ディスプレイはIPSタッチディスプレイでタッチ操作も可能です

光沢液晶なので画面への映り込みが多少きになるところです

f:id:freelancer13:20180206004317j:plain

まあまあうちやすいキーボードですが・・・

LaVie Zとキーの配置が違いすぎてなれるまでに時間がかかりそうです
fnキーとctrlキーが逆な点、右端にhome、pg up、pgdn、endが縦に並んでるのが使いにくい

ここが一番不満な点です

f:id:freelancer13:20180206002602p:plain

PCMARK10でベンチマークを実施

たぶん悪くない結果なのでしょう

f:id:freelancer13:20180206002559p:plain

オンラインで相対スコアをみてみました

ゲームするのはきついけど通常利用には十分すぎるスペックではないでしょうか

使い始めて数週間、キーボードの配置以外は非常に満足しています