りぺんぎんの書きなぐり技術書

基本、ITの技術について書きます

自動販売機のアルゴリズム(アルゴリズムの勉強)

java自動販売機のアルゴリズムを組んでみました。

コードはgitHubを見てもらうとして

src/other/VendingMachine.java

github.com

簡単な解説を...

 

自動販売機のアルゴリズムで一番難しいのは入れた金額に対してどのように両替をして内部で処理するかにつきます。

 

f:id:repenguin:20190221171457j:plain

①商品の金額を最小単位である10円にそろえてやる

②入金額から10円に合わせて足りなければ両替を実行していく

再帰処理

③最後に商品の金額を引いて

④残った額がおつり

って感じになると思います。

 

以上です

ばいばい

 

戦略コンサルの思考法を勉強するために読んだ本一覧

マッキンゼーやボスコンで働く戦略コンサルに憧れがある一般人の私が戦略コンサルの思考法を勉強するために読んだ本をまとめておきます。

 

①絶対に読むべき本は下記の二つ

この二つでロジカルシンキングの基本的な考えを知ることができます

ロジカル・シンキング (Best solution)

https://www.amazon.co.jp/ロジカル・シンキング-Best-solution-照屋-華子/dp/4492531122/

考える技術・書く技術―問題解決力を伸ばすピラミッド原則

https://www.amazon.co.jp/考える技術・書く技術―問題解決力を伸ばすピラミッド原則-バーバラ-ミント/dp/4478490279/

 

②仮説を持つことがいかに重要かを説いた本

仮説思考 BCG流 問題発見・解決の発想法

https://www.amazon.co.jp/仮説思考-BCG流-問題発見・解決の発想法-内田-和成/dp/4492555552/

 

③具体的な行動方針について書いてある本

イシューからはじめよ――知的生産の「シンプルな本質」

https://www.amazon.co.jp/イシューからはじめよ―知的生産の「シンプルな本質」-安宅和人/dp/4862760856/

外資系コンサルの知的生産術~プロだけが知る「99の心得」~ (光文社新書)

https://www.amazon.co.jp/外資系コンサルの知的生産術~プロだけが知る「99の心得」~-光文社新書-山口-周-ebook/dp/B00TIK9PKO/

 

④戦略コンサルの面接攻略法

戦略コンサルティング・ファームの面接攻略法―――マッキンゼーの元面接官が教える秘密のノウハウ

https://www.amazon.co.jp/戦略コンサルティング・ファームの面接攻略法―――マッキンゼーの元面接官が教える秘密のノウハウ-ビクター・チェン/dp/4478023689/

 ⑤フェルミ推定の本

就職活動対策シリーズ ― フェルミ推定の教科書

https://www.amazon.co.jp/就職活動対策シリーズ-―-フェルミ推定の教科書-高田-泰介-ebook/dp/B0711X9MZZ/

⑥戦略とはなんなのか

戦略「脳」を鍛える

https://www.amazon.co.jp/戦略「脳」を鍛える-御立-尚資/dp/4492554955/

 

golangとwebフレームワークginとORM gormでWebアプリケーションを作成してみた

UdemyでGoの勉強を始めました。

f:id:repenguin:20190204084435p:plain

 

2019/03/02

 

一通り学ぶことができたのでWebアプリケーションを作ってみる事にしました。

Webフレームワークはgin、ORMはgormを使いました。

 

github.com

 

コードは置いておきます。

 

 

SpringBootの勉強がてらWebアプリを作ってみた(※ソースコードのみ公開)

題名の通りです。

 

画面はMaterial Design For Bootstrapで作ってみました。

f:id:repenguin:20190202204817p:plain

f:id:repenguin:20190202204908p:plain

機能は以下の三つです。

①投稿を見れる。

②名前で投稿を検索できる

③投稿ができる

 

仕事ではjavaを使っておりますが、WacsというIBM社製のニッチフレームワークなので苦労しました。

 

最後にソースコード張っておきます。

Todoアプリレベルなので参考になる人はいるのかな?いないような気がするけど

github.com

 

 

ばいばーい

 

HHKB Professional2の購入と感想・macでの設定について

林檎純正の青歯キーボード(JIS)でプログラミングしたり文章書いたりするのがしんどいので

みんなの憧れ?HHKBを購入しました!!

お値段なんと24840円!!!!

たけええええええ

まあ効率上がるならいいかってことで、、、

こちらになります。

f:id:repenguin:20180224172357j:plain

カッコいいいいいいいいいいいいい!!!!

最近出たiMacProのキーボードと同じく 黒っぽい色で良いですねー

今回購入したのは HHKB Pro2 (PD-KB400B)

というモデルになります

英字配列の有線モデルですね

最近だと無線キーボードが好きな方も多いとは思いますが 内蔵バッテリーの消耗などを気にしてしまうわたしは 有線一択でした。

いきなりmacに接続しても使えないので設定をする必要があります。

mac用のドライバをインストールしましょう

mac用の設定にしましょう キーボード後ろのスイッチを以下のように設定します SW1 OFF SW2 ON

これでmac用の設定になりました

③DeleteをBackSpaceに置きかえよう Delete使わないので必須のバックスペースに置き換えちゃいましょう SW3 ON

f:id:repenguin:20180224174427j:plain

これでひとまず大丈夫です。

私の場合ここで問題発生

Alt + ` で英語日本語が切り替わるはずなのに切り替わらない

原因はソースの切り替えをオフにしていた+キーの登録が変なのになっていた

f:id:repenguin:20180224174013p:plain

上の画面のようにショートカットにチェックが入っているのか またキーの内容が正しいのか確認するようにしましょう

ともあれこれで使えるようになりました

やったね

最後にブログの入力に使って見た感想など

・打ち心地は最高!!

・黒のモデルは刻印が見辛いので注意

・Enterボタンちっちゃいから押し間違えることがある

・バックスペース押しているつもりが`押してたことが多々ある

・矢印キーはFnと併用で入力するので矢印キー多用する作業はシンドイと思う

色々苦労している点なども書きましたが 使い込めば最強になると思うので頑張っていきたいと思います

あと高いから無理だーっていう人もいるかもしれないけど かなりの高耐久性だから長い目で見るとコスパが良いのではないでしょうか

使用頻度が高いものに投資するのが重要だと思います。

Python勉強して行くぞー!!

追記

なんか画像がバグっている

はてなさん直してー

Firebaseで簡易ブログを作った

前回記事を書いてから大分経ちました。 サボっていたわけではなく、色々なことをやって楽しんでいました。

具体的には ちょまど氏が推している「Xamarin」さわってみたり azure のセッション見ていて面白そうと思った 「azure mobile app」 さわったり 新卒一年目金融系保守エンジニアの今後のキャリアと自分の幸せについて考えたり 色々毎日悩む日々が続いています。

今回は「azure mobile app」の関連?(くくり的にはpaasだから)である 「Firebase」で簡易ブログを作って見たので記録しておきます。

何を作ったの?

アクセスのたびにコンテンツが変化する写真メインのブログ(Instagramのクソザコナメクジブログ版)

URL: https://blog-c86e5.firebaseapp.com/

※画像が結構重いので注意

なぜ作ったの?ブログなんてWordPressでよくない?それFirebase使っている意味あるの?

正直に言います。Firebaseで作った意味あんまないです。

メリット:アクセスがしょぼい内は無料、鯖の細かい設定いらないっていうぐらい。機能の拡張性はまぁまぁ

期間は?

色々試行錯誤して(javascriptとか思い出したりして) 約 2日

どうやって作ったの? 以下に書いていきますー macOSでの操作で書いています。

使用した技術

・Firebase Hosting (HTML,js配置)

・Firebase RealTime Database (コンテンツをランダム表示処理するためのデータ管理,画像データの管理) リアルタイムの必要性皆無

・Firebase Storage (画像ファイルの配置)

プロジェクト作成(Firebaseは基本コマンドラインで操作する)

プロジェクト作成の細かい方法については省略します。わかりやすい記事書いている人がいっぱいいるんで

Firebase Web Consoleにログインして新規プロジェクト作成→Firebase Hosting→ウィザードに従う

でプロジェクトが作成できます。

困ったこと

公式ドキュメントには「firebase init」 実行時に publicフォルダとfirebase.jsonファイルが作成されるよ!

って書いてあるけど publicフォルダはできないし、firebase.jsonファイルは空だった(謎)

↓解決策

firebase.jsonをエディタで開き以下のように書き込む

{
  "hosting": {
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

publicフォルダではなく、app フォルダを作成する

設定ファイルに app を公開フォルダに設定すると書いているため

作成したappフォルダに index.html とか置いてターミナルで 「firebase deploy」実行したらデプロイされる。

ブログの仕組み

f:id:repenguin:20170918210723p:plain

大雑把ですがだいたいこんなもんです

コードを見ていくよ

index.html だよ!ユーザはこのページしか見ないよ

コンテンツを表示する枠とjavascriptの処理部分があるよ

<!DOCTYPE html>
<html lang="ja">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
    crossorigin="anonymous">
  <!-- firebase の必須ライブラリ -->
  <script src="https://www.gstatic.com/firebasejs/4.1.1/firebase-app.js"></script>
  <!-- firebase  storageのライブラリ -->
  <script src="https://www.gstatic.com/firebasejs/4.1.1/firebase-storage.js"></script>
  <!-- firebase database のライブラリ -->
  <script src="https://www.gstatic.com/firebasejs/4.1.1/firebase-database.js"></script>


  <script>
 // body がロードされると初期化処理を走らせる
    function initialize() {
      // コンフィグファイル
      var config = {
       ',
        storageBucket: '',
        databaseURL: '',
      };
      // 初期化
      firebase.initializeApp(config);
      // コンテンツとってきてね
      getContent();
    }
    
    // 非同期でコンテンツを取得するメソッド
    async function getContent() {
      // 記事数をとってきてね
      var max = await getData('maxId/contentId');
      // 最小の記事番号
      var min = 1;
      // 乱数で記事を決めてね 
      var randomContentId = Math.floor( Math.random() * (max + 1 - min) ) + min ;
      
      // HTMLのファイル名を取得するよ
      var htmlUrl = await getData('contents/content' + randomContentId);
      // index.htmlにロード
      $('#main_data').load(htmlUrl, function() {
          // htmlが読み込めたら画像をストレージから読み出すよ
          getImage(htmlUrl);
      }); 
    }
    
    // 非同期で画像を取得するメソッド
    async function getImage(htmlUrl) {
      var urlSpilit = htmlUrl.split('.')[0];
      // 画像のURLを取得
      var imageUrl = await getData('images/' + urlSpilit);
      var storage = firebase.storage();
      // 参照を作成
      var storageRef = storage.ref('images/' + imageUrl);
   // 画像のURLを取得して埋め込むよ
      storageRef.getDownloadURL().then(function (url) {
        var tag = '<img src="'+ url +'" class="img-fluid" alt="image" style="margin-bottom:50px">';
        $('#main_img').html(tag);
      }).catch(function (error) {
        console.error(error);
      });
       
    }
    
    // リアルタイムデータベースからデータを取得するメソッド
    function getData(path) {
      // async await 便利だね!!
      const p = new Promise((resolve, reject) => {
        var database = firebase.database();
        var dataRef = database.ref(path);
        // 一回だけロードするよ リアルタイムデータベースはリアルタイムでの更新を想定しているから今回みたいにそういう機能がいらない場合は一回だけ読み込むのが正解
        dataRef.once('value').then(function(snapshot){
          if(snapshot.exists()){
            resolve(snapshot.val()); 
          }
        });
      });
      return p;
    }

  </script>
  <style>
    body {
      background-color: PeachPuff;
    }
  </style>
</head>

<body onload="initialize()">
  <nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom:20px;">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01"
      aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="index.html">RePenguin Blog</a>
    </div>
  </nav>
  <div class="container-fluid" id="main_data">

  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
    crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>

</html>

データベースの中身

f:id:repenguin:20170918215252p:plain

ストレージの中身

f:id:repenguin:20170918215354p:plain

ストレージとリアルタイムデータベースにはセキュリティルールをしっかり設定しとこう

database 書き込みはいらないから無効にしてる

{
  "rules": {
    ".read": true,
    ".write": false,
  }
}

storage 書き込みはいらないから無効にしてる

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
    }
  }
}

詳しい解説は正直いらないか... firebaseは簡単にアプリを作ることができるから良いと思います!! ただデータベースがNoSqlっていうのがなんとも言えないところ 一過性のイベントアプリとかには適してそう

今回はWebページを作りましたが firebaseの本質はスマホアプリだから今度はスマホアプリにチャレンジして見たいです!

マテリアルデザイン(material design lite)

あけましておめでとうございます。まだまだ寒いです。

material design について勉強をはじめました

  1. マテリアルデザインってなに?
  2. どのフレームワーク使っているのか
  3. 触ってみて困ったこと
  4. いままでに解決したこと

①マテリアルデザインってなに?

マテリアルデザインなに? って言ってる人はまずこのサイトに辿り着いてないと思いますが 簡単に言うと

google が推進しているマルチプラットフォームにおいて現実の法則(影や重さなど)を取り入れた共有のUIを使うことで直感的な操作を可能とするデザイン

です。

どんなものかは

Introduction - Material design - Material design guidelines

を見ればわかるでしょう。

androidはこのマテリアルデザインを採用していてandroidの画面がPCにも来るというのが最も早いかもしれません。

②どのフレームワーク使っているのか

マテリアルデザインのcssフレームワークはたくさんありますが

中でも私が使っているのが

material design lite

Material Design Lite

です。

googleが出しているフレームワークの一つでbootstrapと似ています。

polymer

Welcome - Polymer Project

googleが出しているフレームワークの一つですが敷居は高いです。

③触ってみて困ったこと

  1. form の入力値チェック機能があるが required(必須) だけ簡単に実装できない(これほんと謎、もしかしたらあるのかもしれない)
  2. table のスクロールが実装できない (わりと困ります)
  3. まだまだ解説サイトが少ない

④. いままでに解決したこと

(1)レイアウトの単純な中央揃えが上手くいかない

material design lite は bootstrapと同じようにgridシステムを使っていますが中央揃えがずれるんですよね

これはStack Overflow で解決しました

f:id:repenguin:20170103210615p:plain

<div class="mdl-grid">
 <div class="mdl-layout-spacer"style="background-color: #1CB94A"></div>
 <div class="mdl-typography--display-1" style="background-color: red">中央揃え</div>
 <div class="mdl-layout-spacer"style="background-color: #1CB94A"></div>
</div>

真ん中にしたい要素を

<div class="mdl-layout-spacer"></div>

で囲んでやるだけですね。

(2)table の幅がレスポンシブにならない

f:id:repenguin:20170103210619p:plain

これを見ると(上)わかりますが公式サイトのtableをそのままgridに当てはめると幅が固定されます。

これはクラスでどうこうするものではなく

<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width: 100%">
<!-- 省略 -->                        
</table>

table に width:100%をつけることで解決します。

頑張ってWEBサービスを作っていきます