見出し画像

noteMap構想 開発するときの頭の中③


はじめに

noteMapシステムを開発する時の頭の中を書いて見ます。
頭の中では、やりたいこととやり方の二つを同時に考えています。
やりたいことがわからなければ、プロジェクトは始まりません。
やり方がわからなければ、プロジェクトは完成しません。

やりたいことで重要なのは感動です。
感動させるために、マップを添えて記事の魅力を増します。
文章だけでは難しいことを地図で表現するのです。

やり方で重要なのはGoogleMapsの実現です。
GoogleMapsで表現できる魅力的な機能を使えるようにすることです。
GoogleMapsが使えませんではほとんどの方から支持が得られません。
もちろん、他の地図であってもできる限り使えるようにしたいです。

やりたいこと・実現したいこととは

やりたい事はいつも頭の中にあり、ストックされています。
何かを実現したいと思った時、ストックから取り出してくるのです。
多くは頭の中に入ったまま、取り出されることもなくなります。
ふとした時、妄想になって頭の中を掻き回すこともあります。

会社で仕事をするときは、やるべきことは上から降ってきます。
やりたいことの概要が決まっていて、「やりかたを考えろ」と言われます。
プロジェクトリーダーは、やり方を考えて、作業量を見積もります。
やりたくない場合は作業量を大きく見積もり、「コストが合わないから止めよう」と言うように仕向けます。
「この部分はもっと簡単に実現できるだろう」「この点が難しい技術を使わざるを得ず、見積もりを減らせない」と技術論争する場合もあります。
このあたりはプロジェクトによって事情は色々で、興味深い事例が多いのですが、ここでは言及しません。

やりかた・実現方法とは

IT技術の進歩は早く、新しい技術ほど高度なことが実現できます。
安価になったリソースをふんだんに使って新機能が実現できます。
わずかのうちにバージョンアップして、古くなってしまいます。
新しい技術は修得が必要であり、学習コストがかかります。
そのために、使う技術を選ぶことが重要です。

やりたいことのやり方が決まる時、プロジェクトの見通しが立ちます。
通常は見通しを立てるまでに多くの事項の検討が必要です。
ひとりプロジェクトだと会議は不要ですが、負担が大きく、つらいです。

やりたいことの具体化

やりたいことは動作イメージとして具体化します。
次に、動作イメージの実現方法を考えます。
実現が無理だとわかったら、動作イメージから削除し、その理由を書き留めておきます。後で実現できることになるかもしれません。

誰かと話すとき、資料を調べるとき、このような開発の場から離れる場合、この動作イメージと実現方法を念頭に話をします。
イメージがないままの話は実現性のない無駄です。

技術者の頭の中は、実現可能な動作イメージだけでなく、実現を断念した動作イメージや、採用を断念した技術知識でいっぱいです。
このような無駄情報は何かのきっかけで浮かび上がってきます。

このシステムの動作イメージ

①noteで記事を開きます。
 友人のあるnote記事をサンプルに選びます。

②地図があったら良いと思う記事だったら、noteMapアイコンを開きます。
 noteMapアイコンとは、ブラウザ拡張アイコンの一つです。
 ブラウザの右上に使えるアイコンが表示されています。

ブラウザ拡張はWebブラウザごとに提供されており、Webブラウザにインストールする形で追加される。Webブラウザ自体は必要最低限の機能のみを持ち、好みに応じてブラウザ拡張によって機能追加できるようにしておくことで、Webブラウザの安定性や簡便さの維持と高い拡張性の両立が実現されている。

weblio
ブラウザ拡張アイコン
◯の中に▲がnoteMapアイコン

noteMapアイコンを開くとこのような小さなポップアップ画面が開きます。

noteMapのポップアップ画面
下はポップアップ画面のコード

ポップアップ画面はこのようなコードで実現しています。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/kickstart.css" rel="stylesheet" type="text/css" media="all">
  <link href="css/notePopup.css" rel="stylesheet" type="text/css" />
  <script src="js/popup.js"></script>
</head>

<body style="background:lightskyblue;">
  <form class="inputForm">
    <div class="tabPanel tabSearch bg_illust" id="tab2">
      <fieldset class="findwhere bg_illust">
        <legend>このnote記事と地図を連携します</legend>
          <p id="pageTitle"></p>
          <p id="sns">SNS: </p>
          <p id="articleId">記事ID: </p>
          <a id="MapLink" target="_blank" class="button" style="background:lightskyblue;"
            href="https://nsk.org/maps/map.html"><b>note連携地図</b></a>
      </fieldset>
    </div>
  </form>
</body>
</html>

Note地図連携ボタンを押した後のプログラムの動きです。
記事番号を指定してMap.htmlを呼びます。
この記事に地図が登録されているかどうか調べます
⭕️登録されていれば
 urlの指定があれば、指定のurlにリンクします。
⭕️登録されていなければ
 地図登録の操作補助画面を開きます。
 この機能はこれから開発が必要です。

③Note地図連携ボタンを押すと南フランスのルートマップが開きます。
 note記事と地図の連携はMySQLのデータベースに保存しています。
 GoogleMaps地図画面のJava Scriptからはphpで書いたプログラムを記事番号を指定してFetchで呼び出して地図情報を取得します。

note連携地図の例
下はphpで書いたMySQLアクセスのコード
<?php
  //ヘッダー情報の設定
header("Content-Type: application/json; charset=utf-8");
header('X-Content-Type-Options: nosniff');
// パラメータを取得
$aId = isset($_GET['aId']) ? $_GET['aId'] : '';
// データベース接続設定
$servername = "";
$username = "";
$password = "";
$dbname = "";
$dbh = new PDO('mysql:host=' . $servername. ';dbname=' . $dbname . ';charset=utf8', $username, $password);
$sql = "SELECT ???, Lat, Lng FROM areas WHERE ArticleId = '".$aId."'";
$sth = $dbh->prepare($sql);
$sth -> execute();
$data = $sth -> fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data);
$conn->close();
?>

例示したのはルートマップですが、他のマップも提供する予定です。

システム動作環境

サーバー   ロリポップ
ドメイン名  nsk.org
データベース MySQLです。
地図アプリ  googleMapsが標準
開発言語
 webページ html、JavaScript
 dbアクセス php

終りに

やりたいこととやり方がほぼ一致しました。
この段階でプロジェクトスタートしました。
実際にやってみるとわかることなんですが、なかなかうまくいかない。
歳をとったせいなのか、うまくいかない場合の対応能力が衰えます。
対応できなくなったら、プロジェクトはここで挫折です。
もしお金があれば、開発を続行してくれる人を捜します(私はランサーズで探します)。
普通の現役生活を送って来た老人にとって、老後の生活費は年金です。
開発費という余裕資金はありません。
だから関連記事を有償化して開発資金を捻出します。
資金が捻出できないようなら、期待されていないんだと諦める。
それが世の為、人のためかと思います。
人生最後のプロジェクトが期待されていないと悟るのは悲しいでしょう。


人生最後のプロジェクト
高齢者の妄想 ビットコインを自分で作ってみたが失敗
Coincheckのアカウント登録が拒否されました
これから始める 人生最後のプロジェクト①
人生最後のプロジェクト note記事と地図を連携させたい
noteMap構想 開発するときの頭の中③(本記事)

よろしければサポートお願いします! いただいたサポートは全て『「思い出の場所」の記事とGoogle地図を関連付けるWeb地図アプリ』のLancersでのプログラミングの外注に使わせていただきます。 よろしくお願いします。