プログラミング

Progateは復習で使うべし

こんにちは未経験エンジニアのいすいです。

 

本日はプログラミング学習ツールProgateを使っていて思ったことをお話しします。

 

 

HTML&CSSは普通に難しい

プログラミングのきっかけとしてHTML&CSSから始める人がいると思います。

自分もその一人です。

 

それは世間でHTML&CSSが簡単だと言われているからですね。

HTML&CSSはプログラミングじゃないとまで言われています。

ちょっと待ってください。。。。

 

普通にHTML&CSSむずいんですげどーーー!!!!!

あれ、話が違う、、

 

そりゃ、Hello World!と表示するだとか、ボタンを置いたり、フォームを作ったりとかコントロール単体は簡単ですよ?

 

しかし、WebサイトやWebアプリでHTML&CSSを使うとなると急に難しくなります。

 

その場合、全体をバランスを保ちながらHTML&CSSを構築しなくてはならず、例えばタグを一つ増やす、減らすで大きく変化しますし、CSSをいじれば想定していない箇所も変更される可能性があります。

 

つまりは、実践でHTML&CSSを使うとなると、ある程度の技術と経験が必要になるわけです。

 

(pythonとかのプログラミング言語の方が全然楽!)

 

HTML&CSSも舐めてはいけないということを頭に入れながら話を進めます。

 

 

Progateはすごく良い

昔の話ですが、自分はHTML&CSSの学習をProgateから始めました。

(というより、プログラミングの学習自体の最初がProgate)

その時初心者編を受講しましたが、全くできるようにならず、頭に入らず、一度プログラミングから離れました。

 

Progateって例題を解いていくスタイルだと思うのですが、スライドと例題を往復しながら進めるのが結構めんどくさいんですよね。

 

「〜の背景を〜にする」とか書いてあっても、スライドなりネットなりで調べないとわかるわけなく、またスライドに解説がない部分もあるので結構な頻度で解答をみるハメになります。

 

ネットゆえにスライドのどこに何が書いてあったか記憶に定着しづらく、遡るときも大変です。

 

Progateは使えない。これが最初の感想でした。(何様)

 

 

そんなこんなで、Progateでの学習は諦めて、書籍のHTML&CSSを購入し、これを進めました。

いやー、書籍は最高ですね。わかりやすくて、スイスイ覚えられます。

 

HTML&CSSの書籍を2冊読んだ後、JavaScriptやPHP、JQueryなどの学習を経て、

2つのWebアプリを作成しました。

 

このWebアプリ作成時、HTML&CSSの知識はそこそこついていたと思うのですが、実際に自分で作成してみるとほんとに苦戦しました。汗

 

当てたいスタイルが全然うまくいかなかったり、HTMLのメンテナンス性が低かったり、もうゴミのようなコードでした。

(やりたいことはゴリ押しでなんとかできましたが、コードがめちゃくちゃでどこにも手を加えられない状態でした。)

 

そんなこんなで1年ぶりぐらいにProgateをやってみたんですよね。

 

そしたら、めちゃくちゃわかりやすかったんです。笑

 

特に、コードが即プレビューに反映されるので、試したいことをバンバン試せるのがすごく良かったんです。

スライドとかも、「あーそれってそういうことだったんだ」とか「その方法、あの時のWebアプリで使えたな」とか発見も多かったです。

 

有料コンテンツも即登録しました!

 

ある程度知識が増えたからこそ、Progateは最高の学習ツールになりました。

 

 

結論、Progateは復習で使うべし

タイトル回収になります。

結論としては、Progateは初学に向いていないと思います。

もちろん、Progateも学習にはなりますが、最初は書籍から始めた方が効率が良いと個人的には思います。

 

その後、少なくとも1つWebサイトないし、Webアプリを下手くそでいいので自分で作成してみてください。

 

何かの模倣ではなく、一から自分で何かアイデアを出して、設計して、試行錯誤しながら作るのが良いと思います。

 

クオリティは問いません。しかし、自分がここはこうしたいと思うことは妥協せず、調べながらできる限り実装してください。

 

その過程で、HTML&CSSの課題や反省点が生まれてくると思います。

その課題や反省点を頭に入れながら、Progateを受講してください。

 

きっと、Progateの良さに気づくと思います。

Angularで地図を複数表示する(leaflet)

今日はAngularで複数の地図を表示する方法を紹介します。

(とはいえこの方法が必要となるシチュエーションはあまりないのかなとは思います笑。が、必要となった時参考にしてください)

 

地図を表示したい

まず、地図を表示するにはleafletというOpenMapStreetのAngularライブラリを使います。

 

leafletの使い方は以下を参考にしてください。

https://qiita.com/uedayou/items/30f88d88238f648e8ee6

ここから先はleafletは使える前提で話を進めます。

 

 

 

 

複数の地図を表示する

ページに一つだけ地図を表示する場合は何も問題ありません。

 

上記のURLを参考に地図を表示できます。

 

 

問題は地図を複数表示する場合です。

 

複数の地図を表示する場合以下2つのパターンが考えられます。

 

  1. html文に<div id=”map”></map>を地図の数分追加する
  2. 地図を表示するコンポーネントを別で定義し、コンポーネントを地図の数分追加する

 

1番は大丈夫ですが、2番は工夫が必要になります。

 

そもそも何が問題になるかというと、leafletの以下の文

this.map = L.map('map').setView([34.702485,135.495951], 13);

map関数の引数’map’はhtmlの「map」というidの要素を指すことです。

 

map関数はHTMLElement型の引数も受け取れますが、HTMLlElement型の要素は、javascript標準装備のDOM関数document.getElememntById関数でしか取得できません。

 

つまり、htmlのあるidと地図オブジェクトを結びつけているわけです。

 

idは一意なので、複数の地図を表示するにはidを地図分用意しなくてはいけません。

 

 

1番について考えてみましょう。

 

htmlに直接ダグを増やせる場合は問題ないですね。

<div id="map1"></map>
<div id="map2"></map>
<div id="map3"></map>
<div id="map4"></map>
<div id="map5"></map>
<div id="map6"></map>
・・・

上記のようにidを被らないようにするだけです。

 

map関数も地図の数分実行します。

 

 

 

 

問題が起きるケースとは。。。

2番はどうでしょう。

以下のような構造を考えてみます。

 

地図を表示するコンポーネントは別で定義したい。

地図を表示するコンポーネント:map.component.ts

上記コンポーネントを追加するコンポーネント:app.component.ts

表示したい地図の数分app.compoennt.htmlにセレクターを追加すると表示できるはず?

 

 

map.component.ts

import { Component, OnInit } from '@angular/core';

import * as L from 'leaflet';

@Component({
  selector: 'map-component',
  template: '<div class="map" id="map"></div>'
})
export class MapComponent implements OnInit {
    map: any;

    ngOnInit(){
        this.map = L.map('map').setView([34.702485,135.495951], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);
    }
}

 

 

app.component.html

<div class="container">
  <map-component></map-component>
  <map-component></map-component>
  <map-component></map-component>
  <map-component></map-component>
  <map-component></map-component>
  <map-component></map-component>
</div>

 

 

 

実行してみます。

 

左上の一つしか表示されていません。

 

 

これは、6つのdiv要素に同じmapというidが付けられ、6つのマップがmapというidに紐づけられているからです。

 

idは一意なので左上のdiv要素でidが引っかかり、他のdiv要素にマップが結びつけられなかったためだと思われます。

 

 

 

 

解決方法

map.component.tsのクラス変数(静的プロパティ)を利用する方法を紹介します。

 

map.component.tsに以下の赤文字部分を追加します。

 

map.component.ts

import { Component, OnInit } from '@angular/core';

import * as L from 'leaflet';

@Component({
  selector: 'map-component',
  template: '<div class="map" id="map" ・・・①></div>'
})
export class MapComponent implements OnInit {
    static number: number = 0; ・・・②

    map: any;

    ngOnInit(){
        MapComponent.number++; ・・・③
        document.getElementsByClassName('map')[MapComponent.number-1].id = 'map' + MapComponent.number; ・・・④
        this.map = L.map('map' + MapComponent.number ・・・⑤).setView([34.702485,135.495951], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(this.map);
    }
}

 

 

id=”map”削除

idに「map+識別番号」を割り振るので削除しておきます。

 

 

static number: number = 0 の追加

静的プロパティを定義します。これでMapComponentのインスタンス作成時に初期化されないプロパティを使用できます。

最初は0を入れておきます。

 

 

MapComponent.number++; の追加

ngOnInitが実行されるたび(MapComponentインスタンスが生成されるたび)に静的プロパティをインクリメント(+1すること)します。

 


document.getElementsByClassName(‘map’)[MapComponent.number-1].id = ‘map’ + MapComponent.number; の追加

document.getElementsByClassName(‘map’)でmapというクラスのhtml要素を全て取得します。ここで所得される要素はElement型の配列です。Element要素はmap関数にそのままぶち込むことはできません。

取得した配列の「MapComponent.number-1」の要素のidに「map○」を設定します。(○は1から始まる整数)

 

①から④のコードで、

<div id="map1"></map>
<div id="map2"></map>
<div id="map3"></map>
<div id="map4"></map>
<div id="map5"></map>
<div id="map6"></map>

のようなidの割り振りになります。

 

 

‘map’ + MapComponent.number 

「map○」を指定してマップ関数を実行します。

 

 

 

実行結果は以下です。

 

6つとも地図が表示されました!(安心)

 

 

 

 

まとめ

今回複数の地図を表示する方法を紹介しました。

 

idを重複しないようにするというだけですが、原因がわからないと時間を食ってしまったところでもあります。

 

みなさんはこちら参考に好きなだけ地図を表示してもらいたいです。

 

 

ちなみに、ViewContainerRefなどで動的にMap.component.tsを追加する場合も今回のような方法で大丈夫です。

 

Pythonでファイル分割しよう

どうもいすいです。

前に紹介したPythonでテキストファイルを分割する方法のコードだけ紹介します。

詳しい解説は以下を参照ください。↓↓↓

コード紹介

separate.py

import sys

count = 0
idx = 0

in_file = sys.argv[1]
num_file = int(sys.argv[2])
out_files = []

# 分割ファイルをリストに入れる
for i in range(num_file):
    out_files.append('{0}_{1}'.format(i+1, in_file))

# ファイルの行数をカウントし、countに入れる
with open(in_file, 'r', encoding='utf-8') as f:
    for line in f:
        count += 1

line_count = count / num_file
n = 0

# ファイルの総行数を表示する
print('line_count : {0}'.format(count))


#分割実行部分
with open(in_file, 'r', encoding='utf-8') as i:
    for out_file in out_files:
        f = open(out_file, 'w', encoding='utf-8')
        while True:
            line_i = i.readline()
        
            if idx <= line_count:
                f.writelines(line_i)
                print('now file : {0}, current line : {1} / {2}'.format(out_file, int(idx + n * line_count), count))
            else:
                idx = 0
                break
        
            idx += 1
        n += 1
        f.close()

あとはコマンドプロンプトなどで

python separate.py <分割したいファイル> <分割したい数>

などと入力して2~3分待てばOKです。

C#やWPFで参考すべきサイト

こんにちは弱小エンジニアのいすいです。

最近WPFでの開発をすることになりました。

さて、とWPFの書籍を開いてみると、、、

まったくわからん( ´∀` )

WPFって書籍少ないし、日本語の参考サイトも少ないんですよね。。汗

そんなこんなで本日は、
WPF初級学習で参考になったサイトを紹介します。

新しく発見したサイトは随時更新します。

それでは行ってみよう!!!

↓↓↓

ピーコックアンダーソン

見やすく、分かりやすい。WPF初心者にはうってつけ

一つ目が、ピーコックアンダーソンさんのブログです。

この方は17年C#に携わってきた現役のプログラマーです。

Udemyでは20以上のコース、書籍も多数出版といった実績も持っています。

こちらのブログを紹介する一番の理由は、
WPF初心者にわかりやすいという点です。

たいていのWPF関連サイトでは、専門用語が多かったり、手順を省略していたり、0から教えてくれるものはなかなかありません。

それに対して、ピーコックアンダーソンさんのブログでは、WPF初心者に焦点をあてて解説いただいています。

また、レイアウト、デザインが美しいのもおすすめの理由ですね。

FromPage

FromPageは「open棟梁wiki」「OSSコンソーシアム .NET開発基盤部会」が運営するサイトです。

.NETの重鎮たちが運営しているだけあって非常に細かくxamlについて載っています。

無料なのが不思議なほどです。

わかりやすく何でも載っているので、とりあえずこのサイトで調べてみると良いかもしれません。

随時更新します。

今は二つだけですみません。。

テキストファイルをpythonで分割する

テキストファイルがでかすぎて開けない時pythonの簡単な分割コードを紹介します。

テキストファイルが開けない事件

開発中では以下のようなログファイルというのを吐き出すようにしています。

ログファイル

アプリ開発でしたら、「どんな操作した」「どんな通信をした」「どんなエラーがでた」などが記載されていきます。

このファイルを開いて中身を確認するのですが、だいたい1GBを超えたあたりから、VScodeでも開けず、メモ帳でも開けなくなってしまいます。

こうなったらファイルを分割するしかありません。


テキストファイルの分割方法

ネットで調べた結果、テキストファイルの分割には以下の方法があるみたいです。

  • フリーソフトを使う
  • windowsPowerShellでコマンドを入力する

フリーソフトですが、結構古いものが多いです。Windows10がサポート対象かチェックする必要があります。

WindowsPowerShellでは1行で処理ができますが、正直ちょっと難しいです。

結果、よくわかんないし、pythonでやっちゃえばいいじゃん的な感じで書いてみました。


pythonでテキストファイルを分割

前提として、テキストファイル(画像や動画、バイナリデータではないファイル。.txtなど)を行数に対して2分割や3分割にするコードになります。

python3.8を使っており、標準モジュールで完結します。(モジュールの追加なし)

pythonが入ってない人は、pythonの最新バージョンをインストールしてから初めてください。ネットでpythonホームページに行って、インストールするだけです。(マックブックには標準で入ってます)

➀メモ帳にコードを保存する

メモ帳を開き、

import sys

count = 0
idx = 0

in_file = sys.argv[1]
num_file = int(sys.argv[2])
out_files = []

# 分割ファイルをリストに入れる
for i in range(num_file):
    out_files.append('{0}_{1}'.format(i+1, in_file))

# ファイルの行数をカウントし、countに入れる
with open(in_file, 'r', encoding='utf-8') as f:
    for line in f:
        count += 1

line_count = count / num_file
n = 0

# ファイルの総行数を表示する
print('line_count : {0}'.format(count))


#分割実行部分
with open(in_file, 'r', encoding='utf-8') as i:
    for out_file in out_files:
        f = open(out_file, 'w', encoding='utf-8')
        while True:
            line_i = i.readline()
        
            if idx <= line_count:
                f.writelines(line_i)
                print('now file : {0}, current line : {1} / {2}'.format(out_file, int(idx + n * line_count), count))
            else:
                idx = 0
                break
        
            idx += 1
        n += 1
        f.close()

上記コードを張り付けて、separate.pyなどと名前を付けて保存します。

②フォルダに移動する

分割したいファイルとseparate.pyを同じディレクトリ(フォルダ)に移動します。(移動させなくてもよいが、相対パス・絶対パスを書く必要がなくなる)

エクスプローラー

コマンドプロンプトを起動します。windowsなら絶対入っているので、スタートメニューから探してください。マックブックはターミナルってやつですかね。

③ファイルのあるフォルダに移動する
cd <ファイルのあるフォルダのパス>

上記をコマンドプロンプト上で実行します。cdコマンドで移動したいフォルダに移動できます。以下が例になります。(マックブックの人はマックブックのコマンドに置き換えてください)

フォルダに移動

⑤separate.pyを実行する
python separate.py <分割したいファイル> <分割したい数>

上記をコマンドプロンプト上で実行します。以下が例になります。例ではsample.txtを2分割しています。

separate.py実行

ここで注意してほしいのが、分割する境界の基準が行数になっているので、ファイルのサイズが均等に分割されるわけではありません。

⑥処理が完了するまで待つ

separate.pyを実行したら以下の表示がされるはずです。

実行中の表示

line_countはファイルの総行数です。now_fileは分割先のファイル名(<数字>_<もともとのファイル名>となっています)です。current lineは実行中の行数です。

処理が終わると、以下のように番号が付けられたファイルが作成されているはずです。番号は昇順でつけられています。お好みでファイル名を変えてください。

実行後ファイルが作成されている

ちなみに、ソースコードの12行目でファイル名のフォーマットは変えられます。

以上で分割完了です!おつかれさまでした。

もしうまくいかなかったら

以下の問題がないか確認してみてください

  • pythonがインストールされていない
  • コマンドのスペルミス(空白が多い, ファイル名ミス, 引数の数があっていない)
  • フォルダに分割対象ファイルとseparate.pyが一緒に入っていない
  • フォルダに移動できていない

PAGE TOP