2021年 5月 の投稿一覧

【毎日ビジネス格言②】ヒラメ社員はいらない

ヒラメ社員とは、上司の顔色を伺い絶対に反対しない人である。

これには持続的競争優位性と一時的競争優位性というのが関係してくる。

 

 

持続的競争優位性とは

昔は競争優位性が高い企業は、なかなか落ちることはなくその位を維持できたのである。

10年ほど前までのトヨタがそれに該当する。

 

 

一時的競争優位性とは

一時的競争優位性とは持続的競争優位性が終わった今の時代を指す。

現代は廃れ流行りが非常に早い。

一つの事業をとっても賞味期限が短いのである。

 

 

ヒラメ社員が通用しなくなった

昔の持続的競争優位性の時代は同じことをやれば成功した。

そのため、今のやり方を肯定するヒラメ社員というのは評価されたのである。

 

しかし今は一時的競争優位性の時代となり、昔の成功モデルをどんどん変えていく必要ができた。

企業は「何が賞味期限切れを起こしているのか」を素早く察知しなくてはいけなくなったのである。

 

したがって、企業としては素直に事実を認め、変化を受け入れる姿勢が必要になったのである。

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を追加する場合も今回のような方法で大丈夫です。

 

【毎日ビジネス格言①】何をやらないか決める

「まず何をやらないか決めよ」

これは世界をかける名経営アドバイザーマイケル・ポーターの言葉である。

ポータによると、経営戦略はトレードオフだという。

あちらを立てればこちらが立たなくなるというのである。

確かにそうだ。

例えば北海道のセーコーマートは、大手コンビニチェーン「セブン・ローソン・ファミマ」の勢いを完全に跳ね返している。

それは大手チェーン店と違い、セーコーマートは北海道だけで展開し24時間営業に拘らないが、自社製造で高品質かつ安価を実現し、過疎地域にも出店しているのである。

それが大手コンビニチェーンと差異を生み出し、地元民から圧倒的な指示を得ているのである。

1999年出版のポーターの書籍によると次のように述べられている

「日本企業は、『全てのものを、全ての顧客へ』と考えて、お互いに模倣しあい競走して、改善するだけだ。日本企業には戦略がない。日本企業は戦略を学ぶべきだ」

ここに私の持論を付け足すと、模倣してうまく行くのはブルーオーシャンなマーケットのみだと考える。

(もっともレッドオーシャンでも戦略の取り方によってはブルーに変わると思うが)

昨今でいうYoutuberがその典型であり、5〜6年前なら人気youtuberと同じことをすれば売れたのである。

簡単に考えると、全てを求めようとすると一つ一つが中途半端になり、カスタマーの心に刺さらないということだと思う。

PAGE TOP