- 投稿日：2020-04-26T23:59:13+09:00
学習記録 #2 モーダル実装
行ったこと
- HTML / CSS / JavaScript
- サービス作成つまずいたこと
- モーダルの実装
HTML
<!-- モーダル --> <div id="modal"> <div class="modal-content"> <div class="modal-body"> <h1>hello</h1> <button id="closeButton">Close</button> </div> </div> </div> <!-- モーダル表示用ボタン --> <button id="openButton">Open Modal</button>CSS
#modal{ display: none; position: fixed; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); } .modal-content{ background-color: white; width: 500px; margin: 15% auto; }JavaScript
const modal = document.getElementById('modal'); const openButton = document.getElementById('openButton'); const closeButton = document.getElementById('closeButton'); openButton.addEventListener('click', () => { modal.style.display = 'block'; }); closeButton.addEventListener('click', () => { modal.style.display = 'none'; });
- 投稿日：2020-04-26T23:59:13+09:00
学習記録 #2 モーダル実装（Bootstrap不使用）
行ったこと
- HTML / CSS / JavaScript
- サービス作成つまずいたこと
- モーダルの実装
HTML
<!-- モーダル --> <div id="modal"> <div class="modal-content"> <div class="modal-body"> <h1>hello</h1> <button id="closeButton">Close</button> </div> </div> </div> <!-- モーダル表示用ボタン --> <button id="openButton">Open Modal</button>CSS
#modal{ display: none; position: fixed; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); } .modal-content{ background-color: white; width: 500px; margin: 15% auto; }JavaScript
const modal = document.getElementById('modal'); const openButton = document.getElementById('openButton'); const closeButton = document.getElementById('closeButton'); openButton.addEventListener('click', () => { modal.style.display = 'block'; }); closeButton.addEventListener('click', () => { modal.style.display = 'none'; });修正点等ございましたら教えていただけますと幸いです。
- 投稿日：2020-04-26T23:31:15+09:00
【Rails】deviseを用いたユーザー新規登録機能の実装（基礎〜少し応用）
はじめに
Ruby on Rails を用いてWEBアプリを作成中です。
ユーザー新規登録の機能を実装するために、「devise」というgemを用いることにしました。
備忘もかねて、本文に実装した内容を残しておきます。
errorで困ったポイントも残しておきますので、参考にしていただけると幸いです^^専門用語や参考にさせていただいた記事は最後に記載させていただいております。
「これ、なんで記述してるんだろう？」と、私自身が初めて作成した時に感じたポイントでもありますので、
初心者の方は気になるところかとも思います。
そちらも参照していただければと思います。今回の方法はあくまで一つの実装方法でしかなく、やり方は色々あるのと、
私もまだ未熟なため、わかりにくい記述や余分な記述もございますし、調べきれてない、試しきれてないところもございます。
共にブラッシュアップしていければとも思ってますので、ご指摘もいただければと思います。記載しきれなかった部分は、随時更新か、別途記事を用意いたします。
実装の目標
今回は以下の画像のような表示を目標として実装しました。
全てを解説するのは大変だったので、「ニックネーム」「メールアドレス」「パスワード」「生年月日」のみに絞っておりますのでご了承ください。
カラムのカスタマイズ、エラー表示、パスワードの表示/非表示、生年月日の選択など、「devise」の基本だけでなく、少し工夫が必要な内容も網羅してるかと思いますので、参考になれば幸いです。
1. deviseのインストール手順
1-1. Gemfileに追記
（前略） gem 'devise' （後略）※注意
「development、test、production」のgroup内に記述すると特定の環境でのみ使用する設定となりますので、group外に記述するようにしてください。1-2. コマンドの実行(インストール)
$ bundle install $ rails g devise:install2. Userモデルを作成
インストール後、モデルとテーブルを作成するために、以下をターミナルで実行してください。
通常のモデル作成とはコマンドが違うので注意してください。$ rails g devise userマイグレーションファイルとモデルファイルが出来るので、以下のように記述ください。
2020*****_devise_create_users.rbclass DeviseCreateUsers < ActiveRecord::Migration[5.0] def change create_table :users do |t| t.string :nickname, null: false t.string :email, null: false, default: "" t.string :password, null: false, default: "" t.string :encrypted_password, null: false, default: "" t.date :birthday, null: false # 〜省略〜 end add_index :users, :email, unique: true # 〜省略〜 end endapp/models/user.rbclass User < ApplicationRecord # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i VALID_PASSWORD_REGEX = /\A(?=.*?[a-z])(?=.*?\d)[a-z\d]+\z/i # 〜省略〜 validates :nickname, presence: true, length: { maximum: 20 } validates :email, presence: true, uniqueness: true, format: { with: VALID_EMAIL_REGEX } validates :password, presence: true, length: { minimum: 7 }, format: { with: VALID_PASSWORD_REGEX } validates :birthday, presence: true # 〜省略〜 endモデル「user.rb」について
「VALID_EMAIL_REGEX」「VALID_PASSWORD_REGEX」は正規表現によって、特定の文字を弾くようにしております。
「presence: true」は記述することで、空で登録することを弾くようにしてます。
「length: { maximum: 20 }」と「length: { minimum: 7 }」は文字数制限です。ここで、以下の「devise.rb」に記述されてる「config.password_length = ６..128」についても、次のように編集しておきます。
この数字は文字制限を表してます（つまり、minimumが「6」です）。
理由はモデル「user.rb」より、今回passwordは7文字以上としているため、minimumが「7」である必要があります。
また、こちらを編集後はサーバーの再起動をしないと、反映されませんのでご注意を。「devise.rb」の「config.password_length = ６..128」を編集した理由は、そのままにするとモデル「user.rb」側のバリデーション「length: { minimum: 7 }」と「devise.rb」側のバリデーション「config.password_length = ６..128」が共存することになるため、2つのバリデーションに引っかかって、2つのエラー表示されてしまうからです。
どちらか片方を削除する方法もありかと思いますが、経験もかねて、どちらも残す方法しか試せておりません。config/initializers/devise.rb# frozen_string_literal: true # Use this hook to configure devise mailer, warden hooks and so forth. # Many of these configuration options can be set straight in your model. Devise.setup do |config| Rails.application.credentials[:secret_key_base] # 〜省略〜 config.password_length = 7..128 # 〜省略〜 end最後にmigrationファイルをデータベースに反映するために、以下のコマンドを実行。
$ rails db:migrate3. コントローラーの編集
Viewなどを先に提示してもよかったのですが、エラー表示などについての説明を一緒にした方が良いと判断し、ルーティングやコントローラーの設定を先に説明いたします。
まずはコントローラーから。
今回はユーザー新規登録（サインアップ/sign_up）の実装についてですので、コントローラーは「application_controller.rb」のみで大丈夫です。
以下のように記載します。「configure_permitted_parameters」メソッドの定義をしてますが、deviseをインストールすることでdevise_parameter_sanitizerのpermitメソッドが使えるようになります。これがストロングパラメータに該当する機能です。サインアップ時に入力された「nickname、email、password、birthday」のキーの内容の保存を許可しています。
app/controllers/application_controller.rbclass ApplicationController < ActionController::Base protect_from_forgery with: :exception before_action :configure_permitted_parameters, if: :devise_controller? protected def configure_permitted_parameters added_attrs = [ :nickname, :email, :password, :birthday ] devise_parameter_sanitizer.permit :sign_up, keys: added_attrs end end4. ルーティングの編集
以下のように記載してください。
注意点としては、「routes.rb」の順番です。
「users/:id」が「users/sign_in」を包括してエラーが発生しないように、「devise_for :users」を「resources :users」より先に書く必要があります。また、deviseでサインアップする際に、例えばパスワードを忘れて保存しようとしてエラーが発生すると、親ページにリダイレクトされます。
つまり、サインアップページ「/users/sign_up」でエラーが発生した場合、「/users」にリダイレクトされてしまいます。
そのまま登録するとルーティングエラーが表示されます。これを回避するために、「devise_scope :users」以下の記述を追記して、任意のルーティングをさせています。
方法はいくつかありますが、今回は手っ取り早そうです。config/routes.rbRails.application.routes.draw do devise_for :users devise_scope :users do get '/users', to: redirect("/users/sign_up") end # 〜省略〜 end5. Veiwの編集
まずは、以下のコマンドを実行してください。Modelに対応するViewが生成されます。
Modelには「users」などを入れる文献が多ので、以下は「$ rails g devise:views users」で実行してます。
私が学んだ某スクールで最初に学んだ時は「devise」でしたので、ユーザーマイページと分けるために、私の場合は「devise」で生成してますが。$ rails g devise:views Model※生成されるViewファイル
app/views/users/confirmations/new.html.erb
app/views/users/mailer/confirmation_instructions.html.erb
app/views/users/mailer/password_change.html.erb
app/views/users/mailer/reset_password_instructions.html.erb
app/views/users/mailer/unlock_instructions.html.erb
app/views/users/passwords/edit.html.erb
app/views/users/passwords/new.html.erb
app/views/users/registrations/edit.html.erb
app/views/users/registrations/new.html.erb
app/views/users/sessions/new.html.erb
app/views/users/shared/_links.html.erb
app/views/users/unlocks/new.html.erb
５-1. HTML/HAMLの記述
「registrations/new.html.erb」をユーザー新規登録ページとして編集していきます。
また、以下の通り、HTMLからHAMLに変換して記述してます。app/views/users/registrations/new.haml.erb.signup__main .signup__main__content %h2.signup__main__content__head 会員情報入力 = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| # 〜省略〜 .field .field-label = f.label 'ニックネーム' %span.form-require 必須 .field-input = f.text_field :nickname, class: "field-input-full", autofocus: true, autocomplete: "nickname", placeholder: "例）メルカリ太郎" .input-error = resource.errors.full_messages_for(:nickname)[0] .field .field-label = f.label 'メールアドレス' %span.form-require 必須 .field-input = f.email_field :email, class: "field-input-full", autofocus: true, autocomplete: "email", placeholder: "PC・携帯どちらでも可" .input-error = resource.errors.full_messages_for(:email)[0] .field .field-label = f.label :password, 'パスワード' %span.form-require 必須 .field-input.toggle = f.password_field :password, class: "field-input-full", autocomplete: "off", autocomplete: "password", placeholder: "7文字以上の半角英数字", id:'password' .checkbox-field %input#js-passcheck.checkbox.js-password-toggle{type: "checkbox"} %label.btn-label.js-password-label{for: "js-passcheck"} %i.fas.fa-eye-slash{style: "font-size:20px;color:#808080"} .input-error = resource.errors.full_messages_for(:password)[0] .field-info ※ 英字と数字の両方を含めて設定してください .field .field-label = f.label '生年月日' %span.form-require 必須 .birthday-select = raw sprintf(f.date_select( :birthday, use_two_digit_numbers: true, prompt: "--", start_year: Time.now.year, end_year: 1900, date_separator: '%s'), '年 ', '月 ') + "日" .input-error = resource.errors.full_messages_for(:birthday)[0] # 〜省略〜 .actions = f.submit "登録", class: 'btn'
５-2. エラー表示
今回のエラー表示は、ActiveRecordのvalidatesでエラーになった時に表示されるメッセージを利用します。
上記のように、バリデーションエラーは「errors.full_messages_for(:attribute_name)」で各attributeのエラーメッセージは取得してます。なるほど！
ん？「各attribute」って何？まずは何も考えずに、ネット上から「devise.ja.yml」をダウンロードし、「/config/locales」に保存してください。
次に、「devise.ja.yml」に以下を追記。
ここに追記した、「birthday、nickname、email、password」が「attribute」です。ついでに、日本語化も実施。
「ja.yml」をネットからダウンロードし、先ほどと同じく「/config/locale/」以下に入れる。
「"%{attribute}%{message}"」とあるように、バリデーションエラーの内容に合わせて、「attribute」と「message」を選択してくれる。config/locales/devise.ja.ymlja: activerecord: attributes: user: birthday: "生年月日" nickname: "ニックネーム" email: Eメール password: パスワード # 〜省略〜config/locales/ja.yml# 〜省略〜 errors: format: "%{attribute}%{message}" messages: accepted: を受諾してください blank: を入力してください # 〜省略〜
５-3. パスワードの表示/非表示
「/registrations/new.haml.erb」のパスワード入力は、何もしなければ非表示です。
何かしらのアクションを起こしたら、表示出来るようにしないと、利用者にとってわかりにくかったりします。
今回は、最近よく見る「目のマーク」を押したら表示/非表示を切り替えられるようにjavascriptとSCSSを駆使して表現しました。
参考までに一部コードを提示します。
ポイントとしては、「(password).attr('type','text');」「(password).attr('type','password');」を切り替えることで、「f.password_field」が持ってる「type」を切り替えることができ、表示/非表示を切り替えることができます。app/views/users/registrations/new.haml.erb# 〜省略〜 .field-input.toggle = f.password_field :password, class: "field-input-full", autocomplete: "off", autocomplete: "password", placeholder: "7文字以上の半角英数字", id:'password' .checkbox-field %input#js-passcheck.checkbox.js-password-toggle{type: "checkbox"} %label.btn-label.js-password-label{for: "js-passcheck"} %i.fas.fa-eye-slash{style: "font-size:20px;color:#808080"} # 〜省略〜stylesheets/modules/users.scss.toggle{ position: relative; .checkbox-field{ position: absolute; right: 15px; top: 45px; .checkbox { display: none; } } }app/assets/javascripts/registrations_new.js$(function(){ var password = '#password'; var passcheck = '#js-passcheck'; $(passcheck).change(function(){ const passwordLabel = document.querySelector('.js-password-label'); if ($(this).prop('checked')){ $(password).attr('type','text'); passwordLabel.innerHTML = '<i class="fas fa-eye" style="font-size:20px;color:#808080"></i>'; } else { $(password).attr('type','password'); passwordLabel.innerHTML = '<i class="fas fa-eye-slash" style="font-size:20px;color:#808080"></i>'; } }) })５-4. 生年月日の選択
以下の「new.haml.erb」の通り、「date_selectタグ」という方法を使って実装しました。
超簡単です。app/views/users/registrations/new.haml.erb# 〜省略〜 .birthday-select = raw sprintf(f.date_select( :birthday, use_two_digit_numbers: true, prompt: "--", start_year: Time.now.year, end_year: 1900, date_separator: '%s'), '年 ', '月 ') + "日" # 〜省略〜ですが１点、注意点があります。
バリデーションエラーが発生すると、「field_with_errors」クラスのdivタグが挿入され、「+ "日"」が切り離されてしまい、以下の画像のようにズレてしまいます。
【バリデーションエラー発生時】app/views/users/registrations/new.haml.erb# 〜省略〜 .birthday-select = raw sprintf(f.date_select( :birthday, use_two_digit_numbers: true, prompt: "--", start_year: Time.now.year, end_year: 1900, date_separator: '%s'), '年 ', '月 ') .field_with_errors + "日" # 〜省略〜これを回避する方法はいくつかあるようですが、今回は以下のように、「config/application.rb」に「config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }」を追記しました。
追記後、サーバーを再起動すると、追記が反映され、Railsによる自動挿入が回避できます。config/application.rb# 〜省略〜 module FleamarketAppTeamA class Application < Rails::Application # 〜省略〜 config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag } end end最後に
最後まで読んでいただきありがとうございます。
以上で、ユーザー新規登録についての実装は終わりです。本記事はカスタムの部分で、大枠の作業フローと、小技的なところで参考にはなるかと思いますので、活用いただければ幸いです。
もっとわかりやすい記事、個々の機能で詳しく記載された記事はたくさんございますので、そこに至るまでのキッカケにもなればとも思っております。今回私も、以下の記事を主に参考にさせていただきました。
作者の方々には感謝申し上げます。量が多いため割愛させていただいておりますが、他にも参考にした記事はたくさんありますので、それら記事にも感謝です。
本記事を参考にされる方は、それらの記事も参考にしていただければと思います。参考記事
・deviseについて
-> rails devise完全入門！結局deviseって何ができるの？
-> 【Rails】deviseの使い方を徹底解説！
-> Deviseでログイン機能をつくる [Ruby on Rails]
-> Deviseの設定手順をまとめてみた。 その1 導入編・encrypted_password
->Gem Deviseによるパスワードの保存及び保安方法・add_index
->データベースにindexを張る方法・正規表現とは
-> https://www.megasoft.co.jp/mifes/seiki/about.html・正規表現（ライブラリ）
-> https://github.com/kkos/oniguruma/blob/master/doc/RE.ja
-> http://k-takata.o.oo7.jp/mysoft/bregonig.html・正規表現（確認ツール）
-> https://rubular.com/・protect_from_forgery with: :exception（CSRF対策）
-> RailsのCSRF保護を詳しく調べてみた（翻訳）・日本語化
-> https://qiita.com/kusu_tweet/items/b534c808ac1ee0382f05)・エラー表示
-> ActiveRecordのvalidatesで表示されるエラーメッセージのフォーマットを変更する
-> 【Rails】バリデーションのエラーメッセージを取得・表示・日本語化する方法を完全解説！・生年月日の選択
-> 【Rails】date_selectタグの使い方メモ
-> Railsのバリデーションエラーで、「field_with_errors」によるレイアウト崩れを防ぐ辞書
・gem
便利な機能をひとまとめにしたもの（ライブラリ）・devise
ユーザー新規登録/ログインといった認証機能を簡単に実装できるgemのこと・encrypted_password
暗号化されたパスワードを保存するカラム・add_index
特定のカラムからデータを取得する際に、テーブルの中の特定のカラムのデータを複製し検索が行いやすいようにする・正規表現
「検索」や「置換」で指定する文字列をパターン表現する方法で、プログラミング言語やテキストエディタなどで利用できる・protect_from_forgery with: :exception
セキュリティ対策。このコードがあると、Railsで生成されるすべてのフォームとAjaxリクエストにセキュリティトークンが自動的に含まれ、セキュリティトークンがマッチしない場合ははじかれる。ユーザー認証が完了したwebアプリのページに悪意のあるコードやリンクを仕込むCSRF（Cross-Site Request Forgery）という攻撃手法から保護出来る。・before_action
全てのアクションが実行される前に、この部分が実行される
- 投稿日：2020-04-26T23:17:52+09:00
TWITTERとyoutubeのビデオをダウンロード
https://www.reiwarss.com/reiwadl
家にいるうちにreiwarss.com/reiwadl
を使ってTWITTERとyoutubeのビデオをダウンロードして学習せよ.
マニュアル:
- copy URL .例: youtube.com/watch?v=gn4nRC…
- 令和download をクリックする
while fighting with covid-19, try this tool to download the video you like and learn at home .
- 投稿日：2020-04-26T18:47:37+09:00
Re:ゼロから始めるweb開発 (GAS使用) Part0
リゼロ ロゴジェネレーターさんのサイトで作成．はじめに
この記事はGoogle Apps Scriptを用いて，簡単なウェブアプリケーションを開発していく記事となります．
Part0のこの記事では，Google Apps Scriptを使用した理由と，導入についてまとめていけたらと思います．
参考サイトは一番最後にまとめております．Google Apps Scriptとは
From Wikipedia
Apps Script is a scripting platform developed by Google for light-weight application development in the G Suite platform. Google Apps Script was initially developed by Mike Harm as a side project whilst working as a developer on Google Sheets. Google Apps Script was first publicly announced in May 2009 when a beta testing program was announced by Jonathan Rochelle, then Product Manager, Google Docs. In August 2009 Google Apps Script was subsequently made available to all Google Apps Premier and Education Edition customers. It is based on JavaScript 1.6, but also includes some portions of 1.7 and 1.8 and a subset of the ECMAScript 5 API. Apps Script projects run server-side on Google's infrastructure. According to Google, Apps Script "provides easy ways to automate tasks across Google products and third party services." Apps Script is also the tool that powers the add-ons for Google Docs, Sheets and Slides.
一応wikipediaに記載されているもの記載しましたが，自分自身もあまりweb関係に詳しくないので，わかりにくいなと感じました．
@ochilab さんの「Google Apps Scriptでお手軽にウェブサーバーアプリ開発をしてみよう」の記事に書いてあったものがすごくわかりやすかったので引用させていただきます．Googleが提供しているG Suite（Google Document, SpreadSheet, Slide, Forms, Drive）などで動作させることができるスクリプト実行環境です。GASという略称がよく使われています。ExcelでいうVBAみたいな位置づけになるといえばわかりやすいでしょう。実際、Google SpreadSheetと連携させることが多かったりします。さらに本日のお題で挙げているようにウェブアプリケーションを開発することもできます。言語はJavaScriptです。
「Google Apps Script」の頭文字をとってGASと略されることが多いため，これ以降はGASと省略した形で書いていきます．
GASのメリット
【Google Apps Script入門】GASでできることや活用方法まで紹介！や，先ほど挙げた「Google Apps Scriptでお手軽にウェブサーバーアプリ開発をしてみよう」の記事に書いてあることを中心にまとめていきます．
開発環境の整備が不要
プログラミングをする場合，多くの方が開発環境を作る段階で躓きます．
自分が在学する大学では，C++を最初に習いますが，やはり環境設定でかなり多くの学生が躓きます．
その点，GASはサーバ上に実行環境があるため，GoogleアカウントとPCがあれば利用することができるため始めやすいと感じています．Googleサービスや外部サービスとの提携が可能
GASはGoogleが提供しているさまざまなサービスと連携が容易にできます．
特に，GoogleスプレッドシートやGoogleカレンダーとの相性は抜群だと感じています．
また，外部のサービスとも連携が可能であり，yahooが提供している形態素解析と連携し利用したり，slackなどと連携し，botなどを開発することができるので，ゆくゆくは発展的なことを実装することもできると思いました．様々な開発が可能
本記事で扱う予定であるWebアプリケーション開発ができるだけでなく，Webサイトからの情報収集をするプログラムや，対話システムもどき，botなど様々なものを作成することができます．
特に，Webアプリケーション開発においては，サーバ契約することなくサーバレスでWebアプリが作れるのは，お金がかからず練習として作るには持ってこいだと思います．
さらにGASはトリガーという仕組みがあり，定期的に指定した時間にプログラムを実行することができるため，Googleスプレッドシートをデータベースのように扱い，スクレイピングした情報を蓄積することや，slackと連携して予定を教えてくれるbotなどを作成することができます．
GASはJavaScriptで書くことができ，一つの言語でこれだけのことができるのは，かなり魅力的だと思います．
JavaScriptは，プログラミング言語の中でも，学びやすい部類なので，大学に入って心機一転，web開発などを学びたいと思う人にはベストな選択枝なのではと思い，GASを用いてゼロから記事を書くことにしました．GASのデメリット
無料サービスであるため，制約が多少ありますが，初めてweb開発をするのであれば，なんら問題はないです．
後からお金を要求されるとか，そういう怖いデメリットはまったくないので安心して使ってもらえたらと思います．GASを使ってみる(Webアプリの公開)
いよいよ本題です．
とりあえず，何を始めたらいいかわからない人向けに，手順を説明できたらと思います．
Googleスプレッドシートからスクリプトエディタを開く方法が有名ですが，今回はとにかくシンプルにやる方法を記載していきたいと思います．
Google Apps ScriptでWebアプリケーションを作る最初の一歩をあたりを参考にしています．1. スクリプトファイルを開く
googleドライブをブラウザで開き，googleドライブの「新規」→「その他」→「Google Apps Script」を選択します．
そうすると無題のプロジェクトと書かれたスクリプトファイルが開かれると思います．
これで大丈夫です．
ファイルの名前もせっかくなので変更しましょう．
他のGoogleのドキュメントやスライド同様，直接「無題のプロジェクト」をクリックすれば変更を加えることができます．
適当に名前を変えましょう．自分は「test」にしました．
2. htmlファイルの作成
次にページを表示するためにHTMLファイルを作成する必要がありますが難しくありません．
基本的にGASでWebアプリを作成する場合は，処理を行うGASのスクリプトファイルとブラウザにどのように表示させるか決めるHTMLファイルがセットで必要になります．
HTMLファイルの作成は「ファイル」→「New」→「HTMLファイル」を選択します．
選択すると以下のような画面になると思います．
ファイル名は何でもいいですが，「index」にしました．
とりあえず何か表示させたいので，図の矢印部分である7行目に，<h1>テスト</h1>と書いておいて保存しておいてください．
保存は図の赤丸のとこを押せば保存できます．3. スクリプトファイルにプログラムを書く
「コード.gs」のタグを押して，スクリプトファイルの編集に戻ります．
最初に自動で記載されているmyFunctionは使わないので消してもらい，以下のコードをコピー＆ペーストしてください．function doGet() { // ここでindex.htmlを受け取れるようにする．拡張子.htmlは省略するとのこと． return HtmlService.createTemplateFromFile("index").evaluate(); }コピー＆ペーストしたら，保存をしてください．
下の画像のようになっていれば大丈夫です．
「コード.gs」のタグのコードの横に赤いがある場合は保存ができていないので，もう一度保存押してみてください．
このコードが何をしているのかの詳しい説明は，本記事の趣旨とはそれるので省きますが，参考としている「Google Apps ScriptでWebアプリケーションを作る最初の一歩」の「doGet関数を作成する*」で細かく説明があるので，余裕がある方は読んでみてください．4. 作成したWebアプリの公開
アプリと呼べるような大層なものは作っていませんが，公開してみましょう．
Webアプリとして公開するには，「公開」→「ウェブアプリケーションとして導入…」を選択します．
そのあと以下のウィンドウが表示されると思うので順に説明します．
最初の赤枠はProject versionについてですが，Newにしてください．基本的に常にNewで大丈夫です．
その下の赤枠は何をしたのかコメントを記入しておいてください．（後々あると助かることが多いですが空白でも可です）
Execute the app as:のところは，「me」か「自分」になっていれば大丈夫です．（メアドあったので塗りつぶしてます）
Who has access to the app:は誰がそのページを見ることができるかです．
「自分だけ」，「全ユーザー」，「匿名を含む全ユーザー」から選べます．
開発段階なら「自分だけ」でいいですが，見られて困る情報もページには記載してないので，「匿名を含む全ユーザー」を選択してます．
最後に，Deployを押せば終わりです．
お疲れさまでした．ページの確認
最後に，作成したWebアプリのページを見てみましょう．
Deployを押した後に，以下の画像のようなウィンドウが出たと思います．
このURLが開発したWebアプリのページとなります．
試しに，URLをコピーしてブラウザで開いてみてください．
今回は，index.htmlに「テスト」と表示することしか記述してないので，これで終わりですが，htmlファイルとスクリプトファイルにやりたいことを色々書いたり，Googleスプレッドシートと連携させたりすることで，様々なことができるようになるので，次の記事を楽しみにして待ってもらえたらと思います！最後に
次の記事で，どのような機能を追加するかなどはまったく決めていません．
記事を書いた自分は，GASとGoogleスプレッドシートとSlackを連携させて，勉強したものを記録したり，一週間前に勉強した内容などを毎朝復習できるように通知したりするシステムを家庭教師の仕事の一環で作成したことがあり，ある程度GASを使っていろいろなことができる気がしています．
なので，コメントでどういうものを作って紹介してほしいかなど教えてもらえたら，時間が許す範囲で実装して紹介してみたいと思うので，気軽にコメントください！
記事書きなれておらず，読みにくかったり至らない点も多かったと思いますが，最後まで読んでいただきありがとうございました．
少しでも「参考になった」，「続きが読みたい」と思ってくれた方は，いいねしてもらえると嬉しいです．（モチベになるので）参考サイト一覧
Wikipedia
Google Apps Scriptでお手軽にウェブサーバーアプリ開発をしてみよう
【Google Apps Script入門】GASでできることや活用方法まで紹介！
Google Apps ScriptでWebアプリケーションを作る最初の一歩
- 投稿日：2020-04-26T18:28:52+09:00
【jQuery】全選択したチェックボックスの値を配列で取得
フォーム画面などでよく見かける、次のようなUIサンプルの作り方。（最後にサンプルもあります）
- チェックボックスの全選択・全解除。
- 全選択をチェック後、各選択肢のチェックを外す => 全選択のチェックが外れる。
- 各選択肢のチェックボックスを全てチェックする => 全選択がチェックされる。
- ボタンを押したとき、チェックされているチェックボックスの値を配列で取得する。
HTML
html<!-- 全選択 --> <label><input type="checkbox" id="check_all" name="check_all">すべて</label> <!-- 選択肢 --> <div id="items"> <label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label> <label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label> <label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label> <label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label> <label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label> </div> <!-- ボタン --> <input type="button" value="チェックボックスの値を配列で取得" id="get_values">
input要素をlabel要素で括っておけば、チェックボックスとテキスト部分のどちらをクリックしても、チェックが入るので使い勝手が良くなります。チェックボックスの全選択・解除
1. 「選択肢」のチェック状態を切替える
JavaScript$('#check_all').on('change', function() { // 「選択肢」のチェック状態を切替える $('.item').prop('checked', $(this).is(':checked')); });処理はシンプルで、「全選択」と「各選択肢」の状態を同じにしているだけです。
- 「全選択」がチェックされている ：「選択肢」もすべてチェックする。
- 「全選択」のチェックが外れている：「各選択肢」もすべてチェックを外す。
$(this).is(':checked')で、「全選択」のチェック状態を取得しています。
なお、この箇所は$(this).prop('checked')とかthis.checkedでもOKです。2. 「全選択」のチェック状態を切替える
JavaScript$('.item').on('change', function() { // 「全選択」のチェック状態を切替える if ($('#items :checked').length == $('#items :input').length){ $('#check_all').prop('checked', true); }else{ $('#check_all').prop('checked', false); } });各選択肢をチェックしたとき、選択肢のチェックボックス数と、チェック状態の数を比較します。
- 数が同数 ：「すべて」をチェック状態にします。 =>
.prop('checked', true)- 数が同数ではない：「すべて」のチェックを外します。 =>
.prop('checked', false)チェックした値を配列で取得
.each() を使用
JavaScript$('#get_values').on('click', function() { var vals = []; // 配列を定義 $('input[name="fruits"]:checked').each(function() { vals.push( $(this).val() ); // 配列に値を追加 }); console.log(vals); });チェック済みのinput要素を
.each()対象にするので、
input[name="name属性名"]:checkedのように、セレクタに:checkedを付けます。チェック済みの値を格納する配列
valsを定義しておき、.push()で追加しましょう。実行結果（ボタンをクリック）// 「りんご」と「オレンジ」のみチェック ["apple", "orange"]ボタンを押せば、チェック済みの値が配列で取得できます。
.map() を使用
JavaScript$('#get_values').on('click', function(){ var vals = $('input[name="fruits"]:checked').map(function() { return $(this).val(); }).get(); console.log(vals); });
.map()を使用しても、実行結果は.each()と同じです。完成（サンプル）
最後に完成形の全体コードを載せておきます。（.map()版）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【jQuery】全選択したチェックボックスの値を配列で取得</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(function() { // チェックボックスの全選択・解除 $('#check_all').on('change', function() { // 「選択肢」のチェック状態を切替える $('.item').prop('checked', $(this).is(':checked')); }); $('.item').on('change', function() { // 「全選択」のチェック状態を切替える if ($('#items :checked').length == $('#items :input').length){ $('#check_all').prop('checked', true); }else{ $('#check_all').prop('checked', false); } }); // チェックした値を配列で取得 $('#get_values').on('click', function(){ var vals = $('input[name="fruits"]:checked').map(function() { return $(this).val(); }).get(); console.log(vals); }); }); </script> </head> <body> <!-- 全選択 --> <label><input type="checkbox" id="check_all" name="check_all">すべて</label> <!-- 選択肢 --> <div id="items"> <label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label> <label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label> <label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label> <label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label> <label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label> </div> <!-- ボタン --> <input type="button" value="チェックボックスの値を配列で取得" id="get_values"> </body> </html>
- 投稿日：2020-04-26T18:28:52+09:00
JavaScript: 選択したチェックボックスの値を配列で取得
フォーム画面などでよく見かける、次のようなUIサンプルの作り方。（最後にサンプルもあります）
- チェックボックスの全選択・全解除。
- 全選択をチェック後、各選択肢のチェックを外す => 全選択のチェックが外れる。
- 各選択肢のチェックボックスを全てチェックする => 全選択がチェックされる。
- ボタンを押したとき、チェックされているチェックボックスの値を配列で取得する。
HTML
html<!-- 全選択 --> <label><input type="checkbox" id="check_all" name="check_all">すべて</label> <!-- 選択肢 --> <div id="items"> <label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label> <label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label> <label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label> <label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label> <label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label> </div> <!-- ボタン --> <input type="button" value="チェックボックスの値を配列で取得" id="get_values">
input要素をlabel要素で括っておけば、チェックボックスとテキスト部分のどちらをクリックしても、チェックが入るので使い勝手が良くなります。チェックボックスの全選択・解除
1. 「選択肢」のチェック状態を切替える
JavaScript$('#check_all').on('change', function() { // 「選択肢」のチェック状態を切替える $('.item').prop('checked', $(this).is(':checked')); });処理はシンプルで、「全選択」と「各選択肢」の状態を同じにしているだけです。
- 「全選択」がチェックされている ：「選択肢」もすべてチェックする。
- 「全選択」のチェックが外れている：「各選択肢」もすべてチェックを外す。
$(this).is(':checked')で、「全選択」のチェック状態を取得しています。
なお、この箇所は$(this).prop('checked')とかthis.checkedでもOKです。2. 「全選択」のチェック状態を切替える
JavaScript$('.item').on('change', function() { // 「全選択」のチェック状態を切替える if ($('#items :checked').length == $('#items :input').length){ $('#check_all').prop('checked', true); }else{ $('#check_all').prop('checked', false); } });各選択肢をチェックしたとき、選択肢のチェックボックス数と、チェック状態の数を比較します。
- 数が同数 ：「すべて」をチェック状態にします。 =>
.prop('checked', true)- 数が同数ではない：「すべて」のチェックを外します。 =>
.prop('checked', false)チェックした値を配列で取得
.each() を使用
JavaScript$('#get_values').on('click', function() { var vals = []; // 配列を定義 $('input[name="fruits"]:checked').each(function() { vals.push( $(this).val() ); // 配列に値を追加 }); console.log(vals); });チェック済みのinput要素を
.each()対象にするので、
input[name="name属性名"]:checkedのように、セレクタに:checkedを付けます。チェック済みの値を格納する配列
valsを定義しておき、.push()で追加しましょう。実行結果（ボタンをクリック）// 「りんご」と「オレンジ」のみチェック ["apple", "orange"]ボタンを押せば、チェック済みの値が配列で取得できます。
.map() を使用
JavaScript$('#get_values').on('click', function(){ var vals = $('input[name="fruits"]:checked').map(function() { return $(this).val(); }).get(); console.log(vals); });
.map()を使用しても、実行結果は.each()と同じです。完成（サンプル）
最後に完成形の全体コードを載せておきます。（.map()版）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>全選択したチェックボックスの値を配列で取得</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(function() { // チェックボックスの全選択・解除 $('#check_all').on('change', function() { // 「選択肢」のチェック状態を切替える $('.item').prop('checked', $(this).is(':checked')); }); $('.item').on('change', function() { // 「全選択」のチェック状態を切替える if ($('#items :checked').length == $('#items :input').length){ $('#check_all').prop('checked', true); }else{ $('#check_all').prop('checked', false); } }); // チェックした値を配列で取得 $('#get_values').on('click', function(){ var vals = $('input[name="fruits"]:checked').map(function() { return $(this).val(); }).get(); console.log(vals); }); }); </script> </head> <body> <!-- 全選択 --> <label><input type="checkbox" id="check_all" name="check_all">すべて</label> <!-- 選択肢 --> <div id="items"> <label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label> <label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label> <label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label> <label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label> <label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label> </div> <!-- ボタン --> <input type="button" value="チェックボックスの値を配列で取得" id="get_values"> </body> </html>
- 投稿日：2020-04-26T18:28:52+09:00
JavaScript: 全選択したチェックボックスの値を配列で取得するサンプル
フォーム画面などでよく見かける、次のようなUIサンプルの作り方。（最後にサンプルもあります）
- チェックボックスの全選択・全解除。
- 全選択をチェック後、各選択肢のチェックを外す => 全選択のチェックが外れる。
- 各選択肢のチェックボックスを全てチェックする => 全選択がチェックされる。
- ボタンを押したとき、チェックされているチェックボックスの値を配列で取得する。
HTML
html<!-- 全選択 --> <label><input type="checkbox" id="check_all" name="check_all">すべて</label> <!-- 選択肢 --> <div id="items"> <label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label> <label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label> <label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label> <label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label> <label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label> </div> <!-- ボタン --> <input type="button" value="チェックボックスの値を配列で取得" id="get_values">
input要素をlabel要素で括っておけば、チェックボックスとテキスト部分のどちらをクリックしても、チェックが入るので使い勝手が良くなります。チェックボックスの全選択・解除
1. 「選択肢」のチェック状態を切替える
JavaScript$('#check_all').on('change', function() { // 「選択肢」のチェック状態を切替える $('.item').prop('checked', $(this).is(':checked')); });処理はシンプルで、「全選択」と「各選択肢」の状態を同じにしているだけです。
- 「全選択」がチェックされている ：「選択肢」もすべてチェックする。
- 「全選択」のチェックが外れている：「各選択肢」もすべてチェックを外す。
$(this).is(':checked')で、「全選択」のチェック状態を取得しています。
なお、この箇所は$(this).prop('checked')とかthis.checkedでもOKです。2. 「全選択」のチェック状態を切替える
JavaScript$('.item').on('change', function() { // 「全選択」のチェック状態を切替える if ($('#items :checked').length == $('#items :input').length){ $('#check_all').prop('checked', true); }else{ $('#check_all').prop('checked', false); } });各選択肢をチェックしたとき、選択肢のチェックボックス数と、チェック状態の数を比較します。
- 数が同数 ：「すべて」をチェック状態にします。 =>
.prop('checked', true)- 数が同数ではない：「すべて」のチェックを外します。 =>
.prop('checked', false)チェックした値を配列で取得
.each() を使用
JavaScript$('#get_values').on('click', function() { var vals = []; // 配列を定義 $('input[name="fruits"]:checked').each(function() { vals.push( $(this).val() ); // 配列に値を追加 }); console.log(vals); });チェック済みのinput要素を
.each()対象にするので、
input[name="name属性名"]:checkedのように、セレクタに:checkedを付けます。チェック済みの値を格納する配列
valsを定義しておき、.push()で追加しましょう。実行結果（ボタンをクリック）// 「りんご」と「オレンジ」のみチェック ["apple", "orange"]ボタンを押せば、チェック済みの値が配列で取得できます。
.map() を使用
JavaScript$('#get_values').on('click', function(){ var vals = $('input[name="fruits"]:checked').map(function() { return $(this).val(); }).get(); console.log(vals); });
.map()を使用しても、実行結果は.each()と同じです。完成（サンプル）
最後に完成形の全体コードを載せておきます。（.map()版）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>全選択したチェックボックスの値を配列で取得するサンプル</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(function() { // チェックボックスの全選択・解除 $('#check_all').on('change', function() { // 「選択肢」のチェック状態を切替える $('.item').prop('checked', $(this).is(':checked')); }); $('.item').on('change', function() { // 「全選択」のチェック状態を切替える if ($('#items :checked').length == $('#items :input').length){ $('#check_all').prop('checked', true); }else{ $('#check_all').prop('checked', false); } }); // チェックした値を配列で取得 $('#get_values').on('click', function(){ var vals = $('input[name="fruits"]:checked').map(function() { return $(this).val(); }).get(); console.log(vals); }); }); </script> </head> <body> <!-- 全選択 --> <label><input type="checkbox" id="check_all" name="check_all">すべて</label> <!-- 選択肢 --> <div id="items"> <label><input type="checkbox" name="fruits" value="apple" class="item">りんご</label> <label><input type="checkbox" name="fruits" value="banana" class="item">バナナ</label> <label><input type="checkbox" name="fruits" value="grapes" class="item">ぶどう</label> <label><input type="checkbox" name="fruits" value="orange" class="item">オレンジ</label> <label><input type="checkbox" name="fruits" value="strawberry" class="item">いちご</label> </div> <!-- ボタン --> <input type="button" value="チェックボックスの値を配列で取得" id="get_values"> </body> </html>
- 投稿日：2020-04-26T14:30:52+09:00
html 基礎・基本 フォーム作成編#3
今日も前回に引き続き第三回htmlの学習ノートをここにまとめていきます。
前回のurlも付けとくので前回のは見てないよという方はぜひ見てみてください。
前回のはこちら
それでは、今回もやっていこうと思います。入力フォーム作成！
メールアドレス入力フォームを作るには、
inputを使用して、type属性をtype="email"にします。
<form> <input type="email" name="email"></form>
こんな感じにフォームを作る際は<form></form>を忘れないようにつけよう。
ほかの例も下に記す
- 電話番号入力フォーム:type="tel"
- url入力フォーム:type="url"
- 数値入力フォーム:type="number"
- カラーピッカー:type="color"
- 日付入力フォーム:type="date"
- 時間入力フォーム:type="time"
- 日時入力フォーム:type="datetime-local"必須入力作成！
入力の際に必須入力にしたい際には、その要素に
required属性を付ける。
<input name="form" required>
また、入力チェック処理は、送信前に実行が行われる。入力値に最大と最小を！
入力値に最大最小を設ける。
入れる数値において最小と最大を設けたいときにつけたいときに使う。
<input type="number" name="maxn" min="1" max="12" value="0">文字数制限！
数字同様に文字数にも制限をかけたいとき。
<input name="len" minlength="1" maxlength="4" value="len">入力制限！
今回紹介するのは
pattern属性を使って、入力してほしい値にマッチした値を入力させるためのものです。先に例のコードを書くと
<input name="op" patter="^o.*" title="oから始まる単語" value="op">
今回入力した値で^o先頭の文字が一致するかをチェックしまうす。
また、.*これは後ろに続く値は任意とするものです。入力に応じて反応する色！
入力した結果に応じてチェックして色でエラーや正常を教えてくれると便利だよねってことで、今回使うのは
:vaildと:invalidこれはどちらも疑似的クラスを作成してcssで読み込む
input :valid { background: "色を選択" }これが正常時
こんな形で:validも作れば設定したcssが状態に合わせて使用される。入力チェック機能を無効化する！
入力チェック機能を無効化させる際は
novalidate属性を使用する
<form novalidate>と最初に着ければ適用される。入力する際の補助を適用させる!
名前などを入力する際にそれを補助する機能があります。それを追加する際には
autocomplete属性を付けて、その値をnameにします
<input name="op" autocomplete="name">
今回は名前でしたがメールなどの際は
<input name="email" type="email" autocomplete="email">
また、電話番号の場合は
<input name="tel" autocomplete="tel">
このように、属性の値を変更していけばできます。
これ以外にも、郵便番号ならpostal-codeなどがあります。入力補助を無効化する!
その場合は,
autocomplete="off"にすればいけます。
また、こうしない限りChromeでは、input要素内では自動で補助が付きます。読み取り専用のフォームを作成！
読み取り専用というのは、ユーザーが変鉱石内容にするものです。
これは、普通の入力フォーム同様に値は送信されます。
この際に使う属性はreadonlyです。プレースホルダーを作る!
プレースホルダーとは、入力する際にユーザーがなにを入力したらよいかを、入力フォーム内に後ろに表示するものです。
入力フォームにプレースホルダーを作るにはplaceholder属性を付与する。
<input type="email" name="form" placeholder="ex) nekoneko@neko.com>ページ読み込み時にフォーカスをあてる。
ページ読み込み時に入力フォームの一か所にフォーカスをあてることができる。
今回使う属性は、autofocusです。
ページの中の一つの要素だけにこの属性はあてることができる。スペルや文法をチェックし制御する。
ブラウザにはスペルチェック機能が備わっている。そのためスペルを間違うと下線に赤色の線ができる。それを無効にするには、
spellcheck属性をfalseにすればよい
<input name="nao" valuse="neko" spellcheck="false">今回はこんなところになります。
今回も何か所もわかりにくいところができてしまったかもしれません。
ここおかしいよというのがあればぜひ教えてくれると助かります。
- 投稿日：2020-04-26T14:11:28+09:00
VBAで、メーラーのアドレス帳（Thunderbird用）、ローカルhtml、PDFを生成
会社で、名刺管理アプリ、excel、メーラーでアドレス帳を各々のやり方で管理していると思います。
以下、個人的な感覚ですが。
名刺管理アプリは、外部へ個人情報を登録するので、情報セキュリティとして抵抗あります。
会社組織で推奨とする場合は、全員がそのアプリを入れる必要がありますし、名刺交換していない、シグネチャの情報も入れたいが面倒。しかし、万が一、外部からの攻撃で情報が漏れたら・・・。excelやメーラーのアドレスで各々管理していると情報がバラバラになる。チーム、グループが、１人のアドレス情報を各々登録することなります。
個人的には、標準officeソフトで扱いやすいExcel表で管理し、ExcelVBAでマスターデータから、csvやhtmlやpdfを生成する方法が最適です。
①VBAでメーラー用のcsvを生成
②VBAでローカルhtmlを生成
③VBAでPDFを生成
※生成したPDFを、スマホに飛ばせは、専用アプリ無しで誰でもアドレス帳をスマホに持ち歩くことができます。上記の機能を持ったExcelVBAのソースを列挙するので、参考にいただければ幸いです。
■トップ画面
こちらが、アドレス帳のマスターデータです。
データは、もちろん全部ダミー（疑似個人情報データ生成サービスで生成）です。
１シートのみで管理します。■ボタン
・csvエクスポートボタン
・htmlvエクスポートボタン
・PDFエクスポートボタン
生成するためのボタンを適当に、配置しておきます。■ワークシート
行5に対して、以下のように入力します。
セルB5：
<form action=#><input type=text name=search id=id_search /></form>
セルC5：●
セルD5：氏名（性）
セルE5：氏名（名）
セルF5：カナ（性）
セルG5：カナ（名）
セルH5：表示名（メーラー）
セルI5：会社名
セルJ5：メールアドレス
セルK5：電話番号
セルL5：FAX番号
セルM5：携帯電話番号
セルN5：部署名
セルO5：役職名
セルP5：メールアドレス（予備1）
セルQ5：メールアドレス（予備2）
セルR5：郵便番号
セルS5：都道府県
セルT5：市区町村
セルU5：番地1
セルV5：番地2
セルW5：ウェブページ1
セルX5：ウェブページ2
セルY5：情報1
セルZ5：情報2
セルAA5：情報3
セルAB5：情報4
セルAC5：メモセルC5の●は、csvデータ生成判定用の列です。
入力が完了したら、一端（マクロ有効ブックで）保存しておいて、次にVBAです。Atl+F11で、VBEを起動します。挿入タブから、標準モジュールと、クラスモジュールを１つずつ用意■VBA（標準モジュール）
Attribute VB_Name = "Module1"
Sub CSVエクスポート() '------------------------------------------------ '■CSVエクスポートボタン '------------------------------------------------ Dim csvStr As String Dim t As Long '------------------------------------------------ '■設定 '------------------------------------------------ 'シート名を設定 sheetName = "アドレス帳" '------------------------------------------------ '■メイン処理 '------------------------------------------------ csvStr = "" '初期化 CSVFileNameExport = ThisWorkbook.Path & "\" & Format(Now, "yyyymmdd-HHMMSS") & ".csv" 'ファイルのパスの設定 Open CSVFileNameExport For Output As #1 'ファイルオープン '■１行目のフィールド csvStr = "名" csvStr = csvStr & "," & "姓" csvStr = csvStr & "," & "表示名" csvStr = csvStr & "," & "ニックネーム" csvStr = csvStr & "," & "メールアドレス" csvStr = csvStr & "," & "別のメールアドレス" csvStr = csvStr & "," & "スクリーンネーム" csvStr = csvStr & "," & "勤務先の電話番号" csvStr = csvStr & "," & "自宅の電話番号" csvStr = csvStr & "," & "FAX 番号" csvStr = csvStr & "," & "ポケットベル番号" csvStr = csvStr & "," & "携帯電話番号" csvStr = csvStr & "," & "番地 (自宅)" csvStr = csvStr & "," & "番地 (自宅) 2" csvStr = csvStr & "," & "市区町村 (自宅)" csvStr = csvStr & "," & "都道府県 (自宅)" csvStr = csvStr & "," & "郵便番号 (自宅)" csvStr = csvStr & "," & "国 (自宅)" csvStr = csvStr & "," & "番地 (勤務先)" csvStr = csvStr & "," & "番地 (勤務先) 2" csvStr = csvStr & "," & "市区町村 (勤務先)" csvStr = csvStr & "," & "都道府県 (勤務先)" csvStr = csvStr & "," & "郵便番号 (勤務先)" csvStr = csvStr & "," & "国 (勤務先)" csvStr = csvStr & "," & "役職" csvStr = csvStr & "," & "部門" csvStr = csvStr & "," & "組織" csvStr = csvStr & "," & "ウェブページ 1" csvStr = csvStr & "," & "ウェブページ 2" csvStr = csvStr & "," & "誕生年" csvStr = csvStr & "," & "誕生月" csvStr = csvStr & "," & "誕生日" csvStr = csvStr & "," & "追加情報 1" csvStr = csvStr & "," & "追加情報 2" csvStr = csvStr & "," & "追加情報 3" csvStr = csvStr & "," & "追加情報 4" csvStr = csvStr & "," & "メモ" Print #1, csvStr csvStr = "" '■２行目以降のフィールド With Worksheets(sheetName) For k = 0 To .Cells(Rows.Count, 3).End(xlUp).row If .Cells(6 + k, 3).Value = "●" Then csvStr = .Cells(6 + k, 5).Value '01_名 csvStr = csvStr & "," & .Cells(6 + k, 4).Value '02_姓 csvStr = csvStr & "," & .Cells(6 + k, 8).Value '03_表示名 csvStr = csvStr & "," & "" '04_ニックネーム csvStr = csvStr & "," & .Cells(6 + k, 10).Value '05_メールアドレス csvStr = csvStr & "," & "" '06_別のメールアドレス csvStr = csvStr & "," & "" '07_スクリーンネーム csvStr = csvStr & "," & .Cells(6 + k, 11).Value '08_勤務先の電話番号 csvStr = csvStr & "," & "" '09_自宅の電話番号 csvStr = csvStr & "," & .Cells(6 + k, 12).Value '10_FAX 番号 csvStr = csvStr & "," & "" '11_ポケットベル番号 csvStr = csvStr & "," & .Cells(6 + k, 13).Value '12_携帯電話番号 csvStr = csvStr & "," & "" '13_番地 (自宅) csvStr = csvStr & "," & "" '14_番地 (自宅) 2 csvStr = csvStr & "," & "" '15_市区町村 (自宅) csvStr = csvStr & "," & "" '16_都道府県 (自宅) csvStr = csvStr & "," & "" '17_郵便番号 (自宅) csvStr = csvStr & "," & "" '18_国 (自宅) csvStr = csvStr & "," & .Cells(6 + k, 21).Value '19_番地 (勤務先) csvStr = csvStr & "," & .Cells(6 + k, 22).Value '20_番地 (勤務先) 2 csvStr = csvStr & "," & .Cells(6 + k, 20).Value '21_市区町村 (勤務先) csvStr = csvStr & "," & .Cells(6 + k, 19).Value '22_都道府県 (勤務先) csvStr = csvStr & "," & .Cells(6 + k, 18).Value '23_郵便番号 (勤務先) csvStr = csvStr & "," & "" '24_国 (勤務先) csvStr = csvStr & "," & .Cells(6 + k, 15).Value '25_役職 csvStr = csvStr & "," & .Cells(6 + k, 14).Value '26_部門 csvStr = csvStr & "," & "" '27_組織 csvStr = csvStr & "," & .Cells(6 + k, 23).Value '28_ウェブページ 1 csvStr = csvStr & "," & .Cells(6 + k, 24).Value '29_ウェブページ 2 csvStr = csvStr & "," & "" '30_誕生年 csvStr = csvStr & "," & "" '31_誕生月 csvStr = csvStr & "," & "" '32_誕生日 csvStr = csvStr & "," & "" '33_追加情報 1 csvStr = csvStr & "," & "" '34_追加情報 2 csvStr = csvStr & "," & "" '35_追加情報 3 csvStr = csvStr & "," & "" '36_追加情報 4 csvStr = csvStr & "," & .Cells(6 + k, 29).Value '37_メモ Print #1, csvStr csvStr = "" End If Next k End With Close #1 'ファイルクローズ '------------------------------------------------ End Sub Sub htmlエクスポート() '------------------------------------------------ '■htmlエクスポートボタン '------------------------------------------------ Dim html As Class_html 'クラスの宣言 Set html = New Class_html 'オブジェクトを生成 Dim htmlStr As String Dim t As Long '------------------------------------------------ '■設定 '------------------------------------------------ 'シート名を設定 html.LetSheetName "アドレス帳" 'HTMLヘッダーの設定 html.HTMLheader = "<!doctype html>" & vbCrLf & _ "<html lang=ja>" & vbCrLf & _ "" & vbCrLf & _ "<head>" & vbCrLf & _ "<title>アドレス帳</title>" & vbCrLf & _ "<meta charset=shift-jis>" & vbCrLf & _ "<meta name=description>" & vbCrLf & _ "" & vbCrLf & _ "<script src=js/jquery-3.3.1.min.js></script>" & vbCrLf & _ "<script src=js/jquery.quicksearch.js></script>" & vbCrLf & _ "<script>" & vbCrLf & _ "$(function () {" & vbCrLf & _ "$('input#id_search').quicksearch('table tbody tr');" & vbCrLf & _ "});" & vbCrLf & _ "</script>" & vbCrLf & _ "" & vbCrLf & _ "<link rel=stylesheet href=css/sticky.css>" & vbCrLf & _ "</head>" & vbCrLf & _ "" & vbCrLf & _ "<body>" & vbCrLf & _ "" & vbCrLf & _ "<div class=table-wrapper>" & vbCrLf & _ "" & vbCrLf & _ "" 'HTMLフッターの設定 html.HTMLfooter = "</div>" & vbCrLf & _ "" & vbCrLf & _ "</body>" & vbCrLf & _ "" & vbCrLf & _ "</html>" & vbCrLf & _ "" '------------------------------------------------ '■メイン処理 '------------------------------------------------ htmlStr = "" '初期化 HTMLFileNameExport = ThisWorkbook.Path & "\" & "index.html" 'ファイルのパスの設定 Open HTMLFileNameExport For Output As #1 'ファイルオープン htmlStr = htmlStr & html.GetHTMLheader 'HTMLヘッダー t = Worksheets("アドレス帳").Cells(Rows.Count, 2).End(xlUp).row '最終行の設定 htmlStr = htmlStr & html.GetHTMLtable(5, 2, t, 29) 'HTMLテーブル htmlStr = htmlStr & html.GetHTMLfooter 'HTMLフッター Print #1, htmlStr 'htmlファイル書込み Close #1 'ファイルクローズ '------------------------------------------------ End Sub Sub PDFエクスポート() '------------------------------------------------ '■PDFエクスポートボタン '------------------------------------------------ Sheets("アドレス帳").ExportAsFixedFormat xlTypePDF, _ ThisWorkbook.Path & "\" & "アドレス帳.pdf", _ xlQualityStandard, _ True, _ IgnorePrintAreas:=False '------------------------------------------------ End Sub■VBA（クラスモジュール）
Attribute VB_Name = "Class_html"
Public sheetName As String 'シート名(Excel) Public HTMLheader As String 'HTMLヘッダー Public HTMLfooter As String 'HTMLフッター Public HTMLtable As String 'HTMLテーブル Public Function LetSheetName(val As String) sheetName = val End Function Public Function GetHTMLheader() As String GetHTMLheader = HTMLheader End Function Public Function GetHTMLfooter() As String GetHTMLfooter = HTMLfooter End Function Public Function GetHTMLtable(rowNum1 As Long, ColumnNum1 As Long, rowNum2 As Long, ColumnNum2 As Long) As String '------------------------------------------------ HTMLtable = HTMLtable & "<table>" & vbLf '------------------------------------------------ '■１行目のフィールド '------------------------------------------------ HTMLtable = HTMLtable & "<thead>" & vbLf HTMLtable = HTMLtable & "<tr>" & vbLf For k = ColumnNum1 To ColumnNum2 HTMLtable = HTMLtable & "<th>" & Worksheets(sheetName).Cells(rowNum1, k).Value & "</th>" & vbLf Next k HTMLtable = HTMLtable & "</tr>" & vbLf HTMLtable = HTMLtable & "</thead>" & vbLf & vbLf & vbLf '------------------------------------------------ '■２行目以降のフィールド '------------------------------------------------ HTMLtable = HTMLtable & "<tbody>" & vbLf For m = 1 + rowNum1 To rowNum2 HTMLtable = HTMLtable & "<tr>" For n = ColumnNum1 To ColumnNum2 HTMLtable = HTMLtable & "<td>" & Worksheets(sheetName).Cells(m, n).Value & "</td>" Next n HTMLtable = HTMLtable & "</tr>" & vbLf Next m HTMLtable = HTMLtable & "</tbody>" & vbLf '------------------------------------------------ HTMLtable = HTMLtable & "</table>" & vbLf & vbLf '------------------------------------------------ GetHTMLtable = HTMLtable '------------------------------------------------ End Function■css
htmlテーブルのヘッダーの行・列を固定するためのcssです。
css/sticky.css として保存します。html, body { padding: 10px; height: 95%; } body { display: flex; font-size: 80%; color: #000; justify-content: center; } body { font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */ Meiryo, /* Windowsのメイリオ */ 'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */ 'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */ sans-serif; } .table-wrapper { width: 95%; overflow: scroll; } table { width: 300%; /* td要素の幅の合計（index.htmlのth要素に、width="◯"のように入れる。） */ position: relative; border: 1px solid #000000; border-collapse: collapse; } td { white-space: nowrap; border: 1px solid #888888; /* 列の罫線の色 */ padding: 5px; text-align: left; } th { white-space: nowrap; border: 1px solid #888888; /* 最上列の罫線の色 */ padding: 5px; text-align: center; } th { background-color: #aaa; position: sticky; top: -1px; z-index: 2; background-color: #faebd7 /* 最上列の色 */ } th:first-of-type { left: 0; z-index: 3; } /* 偶数行 */ tbody tr:nth-child(even) td { background: #f0ffff; color: #000000; } /* 最左行 */ tbody tr td:first-of-type { background-color: #dcdcdc; position: sticky; left: -1px; text-align: left; }■js
jQueryプラグインで、tableの検索絞り込み機能をつけます。
インターネットからダウンロードし以下の配下に保存します。
js/jquery.quicksearch.js
js/jquery-3.3.1.min.js■実行
VBAの標準モジュールと、マクロボタンの紐づけして、実行しましょう。csv、html、pdfがそれぞれ生成できれば成功です。
①csvは、サンダーバード用のcsvデータとしてアドレス帳へ登録できます。
②htmlは、ローカルウェブブラウザ（社内）で、アドレス共有ができます。
③pdfは、スマホに飛ばして、アドレス帳をpdfで持ち歩くことできます。①は、メーラーに合わせて、モジュールVBAをいじってみましょう。
②のhtmlは、入力ボックスで（リアルタイムで）文字列絞り込みも可能になります。
※東京都 で絞り込み
■最後に
ソースコードは、素人丸出しでお恥ずかしい限りですが、
何かの参考にいただければ幸いです。以上になります。
- 投稿日：2020-04-26T14:11:28+09:00
VBAで、メーラーcsv、ローカルhtml、PDFを生成
会社で、名刺管理アプリ、excel、メーラーでアドレス帳を各々のやり方で管理していると思います。
以下、個人的な感覚ですが。
名刺管理アプリは、外部へ個人情報を登録するので、情報セキュリティとして抵抗あります。
会社組織で推奨とする場合は、全員がそのアプリを入れる必要がありますし、名刺交換していない、シグネチャの情報も入れたいが面倒。しかし、万が一、外部からの攻撃で情報が漏れたら・・・。excelやメーラーのアドレスで各々管理していると情報がバラバラになる。チーム、グループが、１人のアドレス情報を各々登録することなります。
個人的には、標準officeソフトで扱いやすいExcel表で管理し、ExcelVBAでマスターデータから、csvやhtmlやpdfを生成する方法が最適です。
①VBAで（Thunderbird用アドレス帳）のcsvを生成
②VBAでローカルhtmlを生成
③VBAでPDFを生成
※生成したPDFを、スマホに飛ばせは、専用アプリ無しで誰でもアドレス帳をスマホに持ち歩くことができます。上記の機能を持ったExcelVBAのソースを列挙するので、参考にいただければ幸いです。
■トップ画面
こちらが、アドレス帳のマスターデータです。
データは、もちろん全部ダミー（疑似個人情報データ生成サービスで生成）です。
１シートのみで管理します。シート名は「アドレス帳」としておきます。■ボタン
・csvエクスポートボタン
・htmlvエクスポートボタン
・PDFエクスポートボタン
生成するためのボタンを適当に、配置しておきます。■ワークシート
行5に対して、以下のように入力します。
セルB5：
<form action=#><input type=text name=search id=id_search /></form>
セルC5：●
セルD5：氏名（性）
セルE5：氏名（名）
セルF5：カナ（性）
セルG5：カナ（名）
セルH5：表示名（メーラー）
セルI5：会社名
セルJ5：メールアドレス
セルK5：電話番号
セルL5：FAX番号
セルM5：携帯電話番号
セルN5：部署名
セルO5：役職名
セルP5：メールアドレス（予備1）
セルQ5：メールアドレス（予備2）
セルR5：郵便番号
セルS5：都道府県
セルT5：市区町村
セルU5：番地1
セルV5：番地2
セルW5：ウェブページ1
セルX5：ウェブページ2
セルY5：情報1
セルZ5：情報2
セルAA5：情報3
セルAB5：情報4
セルAC5：メモセルC5の●は、csvデータ生成判定用の列です。
入力が完了したら、一端（マクロ有効ブックで）保存しておいて、次にVBAです。Atl+F11で、VBEを起動します。挿入タブから、標準モジュールと、クラスモジュールを１つずつ用意■VBA（標準モジュール）
Attribute VB_Name = "Module1"
Sub CSVエクスポート() '------------------------------------------------ '■CSVエクスポートボタン '------------------------------------------------ Dim csvStr As String Dim t As Long '------------------------------------------------ '■設定 '------------------------------------------------ 'シート名を設定 sheetName = "アドレス帳" '------------------------------------------------ '■メイン処理 '------------------------------------------------ csvStr = "" '初期化 CSVFileNameExport = ThisWorkbook.Path & "\" & Format(Now, "yyyymmdd-HHMMSS") & ".csv" 'ファイルのパスの設定 Open CSVFileNameExport For Output As #1 'ファイルオープン '■１行目のフィールド csvStr = "名" csvStr = csvStr & "," & "姓" csvStr = csvStr & "," & "表示名" csvStr = csvStr & "," & "ニックネーム" csvStr = csvStr & "," & "メールアドレス" csvStr = csvStr & "," & "別のメールアドレス" csvStr = csvStr & "," & "スクリーンネーム" csvStr = csvStr & "," & "勤務先の電話番号" csvStr = csvStr & "," & "自宅の電話番号" csvStr = csvStr & "," & "FAX 番号" csvStr = csvStr & "," & "ポケットベル番号" csvStr = csvStr & "," & "携帯電話番号" csvStr = csvStr & "," & "番地 (自宅)" csvStr = csvStr & "," & "番地 (自宅) 2" csvStr = csvStr & "," & "市区町村 (自宅)" csvStr = csvStr & "," & "都道府県 (自宅)" csvStr = csvStr & "," & "郵便番号 (自宅)" csvStr = csvStr & "," & "国 (自宅)" csvStr = csvStr & "," & "番地 (勤務先)" csvStr = csvStr & "," & "番地 (勤務先) 2" csvStr = csvStr & "," & "市区町村 (勤務先)" csvStr = csvStr & "," & "都道府県 (勤務先)" csvStr = csvStr & "," & "郵便番号 (勤務先)" csvStr = csvStr & "," & "国 (勤務先)" csvStr = csvStr & "," & "役職" csvStr = csvStr & "," & "部門" csvStr = csvStr & "," & "組織" csvStr = csvStr & "," & "ウェブページ 1" csvStr = csvStr & "," & "ウェブページ 2" csvStr = csvStr & "," & "誕生年" csvStr = csvStr & "," & "誕生月" csvStr = csvStr & "," & "誕生日" csvStr = csvStr & "," & "追加情報 1" csvStr = csvStr & "," & "追加情報 2" csvStr = csvStr & "," & "追加情報 3" csvStr = csvStr & "," & "追加情報 4" csvStr = csvStr & "," & "メモ" Print #1, csvStr csvStr = "" '■２行目以降のフィールド With Worksheets(sheetName) For k = 0 To .Cells(Rows.Count, 3).End(xlUp).row If .Cells(6 + k, 3).Value = "●" Then csvStr = .Cells(6 + k, 5).Value '01_名 csvStr = csvStr & "," & .Cells(6 + k, 4).Value '02_姓 csvStr = csvStr & "," & .Cells(6 + k, 8).Value '03_表示名 csvStr = csvStr & "," & "" '04_ニックネーム csvStr = csvStr & "," & .Cells(6 + k, 10).Value '05_メールアドレス csvStr = csvStr & "," & "" '06_別のメールアドレス csvStr = csvStr & "," & "" '07_スクリーンネーム csvStr = csvStr & "," & .Cells(6 + k, 11).Value '08_勤務先の電話番号 csvStr = csvStr & "," & "" '09_自宅の電話番号 csvStr = csvStr & "," & .Cells(6 + k, 12).Value '10_FAX 番号 csvStr = csvStr & "," & "" '11_ポケットベル番号 csvStr = csvStr & "," & .Cells(6 + k, 13).Value '12_携帯電話番号 csvStr = csvStr & "," & "" '13_番地 (自宅) csvStr = csvStr & "," & "" '14_番地 (自宅) 2 csvStr = csvStr & "," & "" '15_市区町村 (自宅) csvStr = csvStr & "," & "" '16_都道府県 (自宅) csvStr = csvStr & "," & "" '17_郵便番号 (自宅) csvStr = csvStr & "," & "" '18_国 (自宅) csvStr = csvStr & "," & .Cells(6 + k, 21).Value '19_番地 (勤務先) csvStr = csvStr & "," & .Cells(6 + k, 22).Value '20_番地 (勤務先) 2 csvStr = csvStr & "," & .Cells(6 + k, 20).Value '21_市区町村 (勤務先) csvStr = csvStr & "," & .Cells(6 + k, 19).Value '22_都道府県 (勤務先) csvStr = csvStr & "," & .Cells(6 + k, 18).Value '23_郵便番号 (勤務先) csvStr = csvStr & "," & "" '24_国 (勤務先) csvStr = csvStr & "," & .Cells(6 + k, 15).Value '25_役職 csvStr = csvStr & "," & .Cells(6 + k, 14).Value '26_部門 csvStr = csvStr & "," & "" '27_組織 csvStr = csvStr & "," & .Cells(6 + k, 23).Value '28_ウェブページ 1 csvStr = csvStr & "," & .Cells(6 + k, 24).Value '29_ウェブページ 2 csvStr = csvStr & "," & "" '30_誕生年 csvStr = csvStr & "," & "" '31_誕生月 csvStr = csvStr & "," & "" '32_誕生日 csvStr = csvStr & "," & "" '33_追加情報 1 csvStr = csvStr & "," & "" '34_追加情報 2 csvStr = csvStr & "," & "" '35_追加情報 3 csvStr = csvStr & "," & "" '36_追加情報 4 csvStr = csvStr & "," & .Cells(6 + k, 29).Value '37_メモ Print #1, csvStr csvStr = "" End If Next k End With Close #1 'ファイルクローズ '------------------------------------------------ End Sub Sub htmlエクスポート() '------------------------------------------------ '■htmlエクスポートボタン '------------------------------------------------ Dim html As Class_html 'クラスの宣言 Set html = New Class_html 'オブジェクトを生成 Dim htmlStr As String Dim t As Long '------------------------------------------------ '■設定 '------------------------------------------------ 'シート名を設定 html.LetSheetName "アドレス帳" 'HTMLヘッダーの設定 html.HTMLheader = "<!doctype html>" & vbCrLf & _ "<html lang=ja>" & vbCrLf & _ "" & vbCrLf & _ "<head>" & vbCrLf & _ "<title>アドレス帳</title>" & vbCrLf & _ "<meta charset=shift-jis>" & vbCrLf & _ "<meta name=description>" & vbCrLf & _ "" & vbCrLf & _ "<script src=js/jquery-3.3.1.min.js></script>" & vbCrLf & _ "<script src=js/jquery.quicksearch.js></script>" & vbCrLf & _ "<script>" & vbCrLf & _ "$(function () {" & vbCrLf & _ "$('input#id_search').quicksearch('table tbody tr');" & vbCrLf & _ "});" & vbCrLf & _ "</script>" & vbCrLf & _ "" & vbCrLf & _ "<link rel=stylesheet href=css/sticky.css>" & vbCrLf & _ "</head>" & vbCrLf & _ "" & vbCrLf & _ "<body>" & vbCrLf & _ "" & vbCrLf & _ "<div class=table-wrapper>" & vbCrLf & _ "" & vbCrLf & _ "" 'HTMLフッターの設定 html.HTMLfooter = "</div>" & vbCrLf & _ "" & vbCrLf & _ "</body>" & vbCrLf & _ "" & vbCrLf & _ "</html>" & vbCrLf & _ "" '------------------------------------------------ '■メイン処理 '------------------------------------------------ htmlStr = "" '初期化 HTMLFileNameExport = ThisWorkbook.Path & "\" & "index.html" 'ファイルのパスの設定 Open HTMLFileNameExport For Output As #1 'ファイルオープン htmlStr = htmlStr & html.GetHTMLheader 'HTMLヘッダー t = Worksheets("アドレス帳").Cells(Rows.Count, 2).End(xlUp).row '最終行の設定 htmlStr = htmlStr & html.GetHTMLtable(5, 2, t, 29) 'HTMLテーブル htmlStr = htmlStr & html.GetHTMLfooter 'HTMLフッター Print #1, htmlStr 'htmlファイル書込み Close #1 'ファイルクローズ '------------------------------------------------ End Sub Sub PDFエクスポート() '------------------------------------------------ '■PDFエクスポートボタン '------------------------------------------------ Sheets("アドレス帳").ExportAsFixedFormat xlTypePDF, _ ThisWorkbook.Path & "\" & "アドレス帳.pdf", _ xlQualityStandard, _ True, _ IgnorePrintAreas:=False '------------------------------------------------ End Sub■VBA（クラスモジュール）
Attribute VB_Name = "Class_html"
Public sheetName As String 'シート名(Excel) Public HTMLheader As String 'HTMLヘッダー Public HTMLfooter As String 'HTMLフッター Public HTMLtable As String 'HTMLテーブル Public Function LetSheetName(val As String) sheetName = val End Function Public Function GetHTMLheader() As String GetHTMLheader = HTMLheader End Function Public Function GetHTMLfooter() As String GetHTMLfooter = HTMLfooter End Function Public Function GetHTMLtable(rowNum1 As Long, ColumnNum1 As Long, rowNum2 As Long, ColumnNum2 As Long) As String '------------------------------------------------ HTMLtable = HTMLtable & "<table>" & vbLf '------------------------------------------------ '■１行目のフィールド '------------------------------------------------ HTMLtable = HTMLtable & "<thead>" & vbLf HTMLtable = HTMLtable & "<tr>" & vbLf For k = ColumnNum1 To ColumnNum2 HTMLtable = HTMLtable & "<th>" & Worksheets(sheetName).Cells(rowNum1, k).Value & "</th>" & vbLf Next k HTMLtable = HTMLtable & "</tr>" & vbLf HTMLtable = HTMLtable & "</thead>" & vbLf & vbLf & vbLf '------------------------------------------------ '■２行目以降のフィールド '------------------------------------------------ HTMLtable = HTMLtable & "<tbody>" & vbLf For m = 1 + rowNum1 To rowNum2 HTMLtable = HTMLtable & "<tr>" For n = ColumnNum1 To ColumnNum2 HTMLtable = HTMLtable & "<td>" & Worksheets(sheetName).Cells(m, n).Value & "</td>" Next n HTMLtable = HTMLtable & "</tr>" & vbLf Next m HTMLtable = HTMLtable & "</tbody>" & vbLf '------------------------------------------------ HTMLtable = HTMLtable & "</table>" & vbLf & vbLf '------------------------------------------------ GetHTMLtable = HTMLtable '------------------------------------------------ End Function■css
htmlテーブルのヘッダーの行・列を固定するためのcssです。
css/sticky.css として保存します。html, body { padding: 10px; height: 95%; } body { display: flex; font-size: 80%; color: #000; justify-content: center; } body { font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */ Meiryo, /* Windowsのメイリオ */ 'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */ 'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */ sans-serif; } .table-wrapper { width: 95%; overflow: scroll; } table { width: 300%; /* td要素の幅の合計（index.htmlのth要素に、width="◯"のように入れる。） */ position: relative; border: 1px solid #000000; border-collapse: collapse; } td { white-space: nowrap; border: 1px solid #888888; /* 列の罫線の色 */ padding: 5px; text-align: left; } th { white-space: nowrap; border: 1px solid #888888; /* 最上列の罫線の色 */ padding: 5px; text-align: center; } th { background-color: #aaa; position: sticky; top: -1px; z-index: 2; background-color: #faebd7 /* 最上列の色 */ } th:first-of-type { left: 0; z-index: 3; } /* 偶数行 */ tbody tr:nth-child(even) td { background: #f0ffff; color: #000000; } /* 最左行 */ tbody tr td:first-of-type { background-color: #dcdcdc; position: sticky; left: -1px; text-align: left; }■js
jQueryプラグインで、tableの検索絞り込み機能をつけます。
インターネットからダウンロードし以下の配下に保存します。
js/jquery.quicksearch.js
js/jquery-3.3.1.min.js■実行
VBAの標準モジュールと、マクロボタンの紐づけして、実行しましょう。csv、html、pdfがそれぞれ生成できれば成功です。
①csvは、サンダーバード用のcsvデータとしてアドレス帳へ登録できます。
②htmlは、ローカルウェブブラウザ（社内）で、アドレス共有ができます。
③pdfは、スマホに飛ばして、アドレス帳をpdfで持ち歩くことできます。①は、メーラーに合わせて、モジュールVBAをいじってみましょう。
②のhtmlは、入力ボックスで（リアルタイムで）文字列絞り込みも可能になります。
※東京都 で絞り込み
■最後に
ソースコードは、素人丸出しでお恥ずかしい限りですが、
何かの参考にいただければ幸いです。以上になります。
- 投稿日：2020-04-26T13:54:42+09:00
HTML Rubyに絵文字を追加する
HTMLとRubyに?の様な絵文字を入れる方法をご紹介いたします。
絵文字の表示にはunicordを使います。
絵文字の検索はこちらで行いました。
https://lets-emoji.com/emojilist/HTML
HTMLは丸で囲っている部分をそのまま貼り付けるだけです！
😀Ruby
Rubyには画像の下線部分を使います。
下線部分を\u{}で囲むことで表示できる様になります。
\u{1F600}最後に
Line botを作った際にRubyへの絵文字挿入を行いました。
是非ご活用ください。
