Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="flex flex-col">
  <form class="flex m-4 flex-row flex-wrap" autocomplete="off">
    <label for="postal-code" class="mr-3 flex-grow md:flex-grow-0 w-full md:w-auto md:h-7">郵便番号 (ハイフンなし)</label>
    <input id="postal-code" class="rounded-md border border-gray-300 flex-grow w-full h-10 mt-3 md:flex-grow-0 md:w-auto  md:w-8 md:h-7 md:mt-0 md:rounded-sm" type="text" name="postal-code" maxlength="7" />
    <button type="submit" class="flex-grow px-4 py-2 mr-2 mt-3 rounded-md md:flex-grow-0 md:h-7 md:mr-0 md:mt-0 md:py-0 md:rounded-sm bg-indigo-600 text-white">検索</button>
    <button type="reset" class="flex-grow px-4 py-2 ml-2 mt-3 rounded-md md:flex-grow-0 md:h-7 md:ml-0 md:mt-0 md:py-0 md:rounded-sm border border-indigo-600 text-indigo-600" id="reset">リセット</button>
  </form>
</div>
<main class="flex md:flex-row flex-col-reverse">
  <article class="flex-grow-1 lg:w-1/2 mx-4">
    <table class="table-auto w-full mb-4 metadata">
      <tbody>
        <tr class="data-type">
          <th class="border border-indigo-300 bg-indigo-500 text-white p-2 w-1/3">データ・タイプ</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span>(ここに結果が表示されます)</span></td>
        </tr>
        <tr class="postal-code">
          <th class="border border-indigo-300 bg-indigo-500 text-white p-2 w-1/3">郵便番号</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span>(ここに結果が表示されます)</span></td>
        </tr>
        <tr class="data-version">
          <th class="border border-indigo-300 bg-indigo-500 text-white p-2 w-1/3">データのバージョン</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span>(ここに結果が表示されます)</span></td>
        </tr>
      </tbody>
    </table>
    <div id="results">
      <div class="inner"></div>
    </div>
    <table class="table-auto w-full my-4 result template" style="display: none">
      <tbody>
        <tr class="prefecture">
          <th class="border border-indigo-300 p-2 w-1/3">都道府県</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span></span></td>
        </tr>
        <tr class="city">
          <th class="border border-indigo-300 p-2 w-1/3">市区町村</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span></span></td>
        </tr>
        <tr class="town">
          <th class="border border-indigo-300 p-2 w-1/3">街区町域</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span></span></td>
        </tr>
        <tr class="koaza">
          <th class="border border-indigo-300 p-2 w-1/3">丁目・小字</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span></span></td>
        </tr>
        <tr class="kyoto_street">
          <th class="border border-indigo-300 p-2 w-1/3">京都の通り名</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span></span></td>
        </tr>
        <tr class="building">
          <th class="border border-indigo-300 p-2 w-1/3">ビル名</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span></span></td>
        </tr>
        <tr class="floor">
          <th class="border border-indigo-300 p-2 w-1/3">ビルの階層</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span></span></td>
        </tr>
        <tr class="corporation_name">
          <th class="border border-indigo-300 p-2 w-1/3">(事業所番号)会社名</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span></span></td>
        </tr>
        <tr class="corporation_block_lot">
          <th class="border border-indigo-300 p-2 w-1/3">(事業所番号)丁目・小字以下</th>
          <td class="border border-indigo-300 p-2 w-2/3"><span></span></td>
        </tr>
      </tbody>
    </table>
  </article>
  <aside class="flex-grow-1 lg:w-1/2 md:ml-0 mx-4">
    <h3 class="font-medium">
      郵便番号の例 (クリック/タップで入力)
    </h3>
    <table class="w-full table-auto my-4 text-xs result template">
      <tbody>
        <tr>
          <td class="border border-indigo-300 p-2 w-1/3">標準的な郵便番号の例(都道府県、市区町村、町名)</td>
          <td class="border border-indigo-300 p-2 w-2/3"><a class="click-to-enter text-indigo-700 underline">1000001</a></td>
        </tr>
        <tr>
          <td class="border border-indigo-300 p-2 w-1/3">丁目を含む例</td>
          <td class="border border-indigo-300 p-2 w-2/3"><a class="click-to-enter text-indigo-700 underline">0482331</a></td>
        </tr>
        <tr>
          <td class="border border-indigo-300 p-2 w-1/3">小字を含む例</td>
          <td class="border border-indigo-300 p-2 w-2/3"><a class="click-to-enter text-indigo-700 underline">0893443</a></td>
        </tr>
        <tr>
          <td class="border border-indigo-300 p-2 w-1/3">地割を含む例</td>
          <td class="border border-indigo-300 p-2 w-2/3"><a class="click-to-enter text-indigo-700 underline">0282504</a></td>
        </tr>
        <tr>
          <td class="border border-indigo-300 p-2 w-1/3">京都の通り名を含む例</td>
          <td class="border border-indigo-300 p-2 w-2/3"><a class="click-to-enter text-indigo-700 underline">6048012</a></td>
        </tr>
        <tr>
          <td class="border border-indigo-300 p-2 w-1/3">ビル名と階層を含む例</td>
          <td class="border border-indigo-300 p-2 w-2/3"><a class="click-to-enter text-indigo-700 underline">1046001</a></td>
        </tr>
        <tr>
          <td class="border border-indigo-300 p-2 w-1/3">個別事業所番号の例</td>
          <td class="border border-indigo-300 p-2 w-2/3"><a class="click-to-enter text-indigo-700 underline">1008926</a></td>
        </tr>
      </tbody>
    </table>
  </aside>
</main>
              
            
!

CSS

              
                
              
            
!

JS

              
                const form = document.querySelector("form");
const postalCodeField = form.querySelector("#postal-code");

const getPostalCode = () => {
  return postalCodeField.value;
};

const kenallApi = new kenall.KENALL("f32fcf25cc2f0c924d96a96f5f2de415bb7f6332");

const fillText = (anchor, field, text) => {
  anchor.querySelector(`.${field} span`).innerText = text;
};

const metadataTable = document.querySelector("table.metadata");
const resultTableTemplate = document.querySelector("table.result.template");
const resultsElement = document.querySelector("#results");
const resultsElementInner = resultsElement.querySelector(".inner");

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  reset();
  const postalCode = getPostalCode();
  if (postalCode === "") {
    alert("郵便番号を入力してください");
    return;
  }
  let data = undefined;
  try {
    data = await kenallApi.getAddress(postalCode);
  } catch (e) {
    if (e.status === 404) {
      fillText(metadataTable, "data-type", "データが見つかりませんでした");
    } else {
      alert(`API呼び出しに失敗しました (ステータス ${e.status}})`);
    }
    return;
  }
  fillText(metadataTable, "data-version", data.version);
  fillText(metadataTable, "postal-code", data.data[0].postal_code);
  if (data.data[0].corporation != undefined) {
    fillText(metadataTable, "data-type", "個別事業所番号");
  } else {
    fillText(metadataTable, "data-type", "郵便番号");
  }
  data.data.forEach((entry) => {
    const resultTable = resultTableTemplate.cloneNode(true);
    resultTable.style.display = null;
    fillText(resultTable, "prefecture", entry.prefecture);
    fillText(resultTable, "city", entry.city);
    fillText(resultTable, "town", entry.town);
    if (entry.koaza != undefined) {
      fillText(resultTable, "koaza", entry.koaza);
    }
    if (entry.kyoto_street != undefined) {
      fillText(resultTable, "kyoto_street", entry.kyoto_street);
    }
    if (entry.building != undefined) {
      fillText(resultTable, "building", entry.building);
    }
    if (entry.floor != undefined) {
      fillText(resultTable, "floor", entry.floor);
    }
    if (entry.corporation != undefined) {
      if (entry.corporation.name != undefined) {
        fillText(resultTable, "corporation_name", entry.corporation.name);
      }
      if (entry.corporation.block_lot != undefined) {
        fillText(
          resultTable,
          "corporation_block_lot",
          entry.corporation.block_lot
        );
      }
    }
    resultsElementInner.appendChild(resultTable);
  });
  location.href = `#${resultsElement.id}`;
  return false;
});

const reset = () => {
  ["data-type", "postal-code", "data-version"].forEach((field) =>
    fillText(metadataTable, field, "(ここに結果が表示されます)")
  );

  for (let i = resultsElementInner.childNodes.length; --i >= 0; ) {
    resultsElementInner.removeChild(resultsElementInner.childNodes[i]);
  }
};

form.addEventListener("reset", reset);

Array.prototype.forEach.call(document.querySelectorAll(".click-to-enter"), (n) => {
  n.addEventListener("click", (e) => {
    e.preventDefault();
    postalCodeField.value = e.target.innerText;
    postalCodeField.focus();
  });
});


              
            
!
999px

Console