カテゴリー: エンジニア育成

の2023年5月12日の琉球新報に以下の記事が掲載され、興味があり実装してみました。

新ビジネスの種、あるかも　沖縄県がオープンデータサイト開設、
県内全41市町村と民間団体が掲載対象
https://ryukyushimpo.jp/news/entry-1708664.html

沖縄県は4月、県内全41市町村と民間団体が公開する
「オープンデータ」をまとめた
サイト「沖縄オープンデータプラットフォーム」を開設した。
2日現在、48種510個のデータが掲載されており、
それぞれダウンロードできる。
さらに、県内企業のデータ活用事例を紹介したり、
実際にデータを視覚化したりするツールの使い方も紹介している。

目次

1. 前提条件
2. 手順
3. マイマップ公開

1. 前提条件
   BODIKのAPIからJSON形式で取得
   GoogleAppsScrip(以下 GAS)tを使用するため、Googleアカウントが必要
2. 手順
   1. Googleスプレッドシート(以下スプレッドシート)を作成
      
   2. データ取得API
      GASを使ってBODIKのAPIからデータを取得するために、データのリソースIDを把握しておく必要があります。
      今回は、那覇市文化財一覧のリソースIDは、以下の斜字部分です。
      https://data.bodik.jp/dataset/okinawa-dpf_naha_city/resource/889ddb57-cf16-438e-ad69-25be2c98ec3a
      上記のURLの情報をスプレッドシートに展開します。
   3. GAS編集
      Apps Scriptを開きます
      
      プログラムコードを記述します。

      function myFunction(){
       
      }

      と記載されている部分を、以下のコードに書き換えます。

function getFacility() { 
  // API request 
  var resource = '889ddb57-cf16-438e-ad69-25be2c98ec3a'; 
  var requestUrl = `https://data.bodik.jp/api/3/action/datastore_search?resource_id=${resource}`; 
  var response = UrlFetchApp.fetch(requestUrl); 
  var res = JSON.parse(response.getContentText()).result.records; 

  // データ項目のうち「名称」「住所」「緯度」「経度」のみを取得 
  var values = res.map((content) => { 
    return [content['名称'], content['住所'], content['緯度'], content['経度']]
  }); 

  // データの項目名をセット 
  var title = [['名称', '住所', '緯度', '経度']]; 
  // 項目名とデータを結合する 
  values = [...title, ...values]; 
  // 結合したデータをスプレッドシートに出力する 
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); 
  sheet.getRange(`A1:D${values.length}`).setValues(values); 
}

デプロイします。


実行します。

スプレッドシートを確認するとデータ取得されていることが確認できます。

3. マイマップ公開
   1. Googleマイマップを開きます。
      
   2. インポートを選択します。
      
   3. インポートしたいスレッドシート(那覇市文化財一覧)を選択します。
      
   4. 指示に従い選択していきます。
      1. 目印を配置する列の選択
         緯度と経度を選択
      2. マーカーのタイトルとして知丗する列を選択します。
         名称を選択
         
      3. 公開！

フレキシブルボックス(フレックスボックス)を利用すると、ボックスを横並び、横幅、高さをフレキシブルにコントロールすることができ、floatよりも柔軟にレイアウトを組むことができます。

使い方

displayプロパティを「display:flex」と指定して、フレックスコンテナを構成します。

See the Pen
Untitled by abridge (@abridge_okinawa)
on CodePen.

レイアウトの調整

次のプロパティを利用してレイアウトを調整していきます。

フレックスアイテムー横幅と間隔ー

フレックスアイテムの横幅をflexプロパティで、間隔をgapプロパティで調整します。

flex

flexプロパティでは、伸長比、縮小比、フレックスコンテナのサイズ指定に応じてフレックスアイテムの横幅を決定します。

flexの伸長比

フレックスアイテムの横幅の合計よりもフレックスコンテナが大きい場合、フリースペースをフレックスアイテムに配分します。
例えば、フレックスコンテナの横幅を900pxに指定した場合、300pxのフリースペースができます、このとき、a～cの伸長比をそれぞれ「1」とした場合、フリースペースが「1：1：1」の比率で分割されます。
その結果、100pxずつ配分され、200px、300px、400pxになります。

(a) 適用後：200px(100px + 100px)
(b) 適用後：300px(200px + 100px)
(c) 適用後：400px(300px + 100px)

変化が分かりづらいので、伸長比率を「0」「4」「1」にした場合、フリースペース(300px)を0:4:1の比率で配分されます。

(a) 適用後：100px(100px + 0px)
(b) 適用後：440px(200px + (300px * 4/5))
(c) 適用後：360px(300px + (300px * 1/5))

問題です！伸長比率を「2」「1」「2」にした場合、フリースペースはどのように配分されるのでしょうか？

flexの縮小比

フレックスアイテムの横幅の合計よりもフレックスコンテナが小さい場合、フレックスコンテナ横幅サイズ値からフレックスアイテムの横幅の合計を差し引いた値を元に縮小します。

例えば、フレックスコンテナの横幅を480px指定した場合、120pxのフリースペースができます。このとき、a～cの縮小率を「1」とした場合、ベースとなるサイズに縮小率を掛け合わせた100:200:300の比率で分割され、(a)に-20px、(b)に-40px、(c)に-60px配分されます。
その結果、(a)に80px、(b)に160px、(c)に240pxになります。

(a) 適用後：80px(100px-(120px * 1/6))
(b) 適用後：160px(200px-(120px * 2/6))
(c) 適用後：240px(300px-(120px * 3/6))

これまた、変化が分かりづらいので、縮小比率を「3」「2」「1」にした場合、フリースペース(120px)をベースとなるサイズに縮小率を掛け合わせた300:400:300の比率で分割されます。

その比率(3 00 :4 00 :3 00)の結果、それぞれの横幅は、(a)に64px、(b)に152px、(c)に264px配分されます。
(a) 適用後：64px(100px-(120px * 3/10))
(b) 適用後：152px(200px-(120px * 4/10))
(c) 適用後：264px(300px-(120px * 3/10))

gap

gapプロパティを利用すると、フレックスアイテムの間に余白を挿入して、間隔を調整することができます。
たとえば、gap:30pxと指定すると、30pxの余白が入ります。

新人教育で伝えていること。

「パクることは決して悪いことではない」

TTP(徹底的にパクる)

某企業で受け継がれるTTPという言葉。

• T
  徹底
• T
  的に
• P
  パクる

営業やマーケティングなどビジネス用語として使われる言葉ですが、エンジニア初心者の方に知ってほしいため、この言葉を伝えております。

パクるって良いの？

パクる
決して良い言葉として捉えることができませんが、グーグル検索・先輩からのアドバイス、これ全てパクる(＝真似る)と考えます。
もちろん、著作権的な問題はNGですけどね。

分からないことは、

真似る⇒真似ぶ⇒学ぶ

「学ぶ」の語源は「真似ぶ」であるという説があることから、パクることは決して悪いことでないと考えています。

パクるから進化

パクった情報を、InputしてOutputすることで、自身のスキルとなります。
例えば、Outputとして、誰かに教えた際に、相手の理解度が低い際には、自身の理解度が低いのか？もう少し分かりやすい説明は無いのか？と自問自答して解決することで、自身のスキルアップに繋がります。

おわり

分からないことは、決して、恥ずべきことではなく、当たり前のことです。

先ずは真似ることです

真似たら、InputしてOutputしましょう。

私が考えるInputは・・・

1. パクって良いコードはデバッグして流れを掴む単純に真似ると意味ないです。
2. パクって良いコードを少し変えてみる。(例えば、条件式を変えてみる）

私が考えるOutputは・・・

1. 誰かに説明する。(ブログではなく、直接！)

Output少ない^^

=======
24卒以降の就職を考えている方を対象にしたインターンシップ(就業体験)を8月20日にオンラインで実施しました！
このコロナ禍でなかなか就職活動をすることが難しい学生の皆さんのためにオンラインを活用することでIT業界に興味を持って頂きたいという思いで、この度、実施いたしました。
参加者の感想は・・・
Aさん
Bさん
【参加資格】
就職を希望している沖縄県在住の学生の方
【参加費】
無料
【スケジュール】
会社概要(15分)
HTML/CSS/JavaScriptの超基礎(1時間)
ストップウォッチ作成(2時間)
休憩を含めて計4時間
現在でも募集しておりますので、この機会にITの仕事を身近に感じて頂けると、私たちは満足です！
【問い合わせ先】
株式会社エイブリッジ　インターンシップ担当　
it-okinawa@abridge-co.jp
=====

エイブリッジで開催している、ITエンジニア育成研修Code Bridgeは、20代～40代まで幅広い世代の方に受講いただいております！

未経験からエンジニアとしての就職や、スキルアップなど受講生各個人は目標をもって、日々学習を続けております。

社内研修として開催しておりましたが、社内外問わず、世界中どこにいても受講できるよう、環境を整備しました。

プログラミングスクールとは違いＩＴ企業の研修を受講できるので、実践に必要な知識を習得できます。

・進化するプログラミング教材
・世界中どこにいても受講可能なオンライン教材
・求人数が多いJava言語に特化
・現役エンジニアサポート
・プログラマ未経験から転職実績あり

限定３名まで！
無料オンラインカウンセリングを常時開催中ですので、ご希望の方は特設サイトよりご連絡ください。

https://abridge-co.jp/codebridge/