<style>
/* basic design */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6,
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {
font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic';
text-align: left;
line-height: 1.8;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word;
color: #444;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;}
.reveal h1, .reveal h2, .reveal h3 {color: #2980b9;}
.reveal th {background: #DDD;}
.reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;}
.reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;}
.reveal table {margin: 1.0vw auto;}
.reveal code {line-height: 1.2;}
.reveal p, .reveal li {padding: 0vw; margin: 0vw;}
.reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;}
/* table design */
.reveal table {background: #f5f5f5;}
.reveal th {background: #444; color: #fff;}
.reveal td {position: relative; transition: all 300ms;}
.reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;}
.reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;}
/* blockquote design */
.reveal blockquote {
width: 90%;
padding: 0.5vw 0 0.5vw 6.0vw;
font-style: italic;
background: #f5f5f5;
}
.reveal blockquote:before{
position: absolute;
top: 0.1vw;
left: 1vw;
content: "\f10d";
font-family: FontAwesome;
color: #2980b9;
font-size: 3.0vw;
}
/* font size */
.reveal h1 {font-size: 5.0vw;}
.reveal h2 {font-size: 4.0vw;}
.reveal h3 {font-size: 2.8vw;}
.reveal h4 {font-size: 2.6vw;}
.reveal h5 {font-size: 2.4vw;}
.reveal h6 {font-size: 2.2vw;}
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;}
.reveal code {font-size: 1.6vw;}
/* new color */
.red {color: #EE6557;}
.blue {color: #16A6B6;}
/* split slide */
#right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;}
#left {left: 31.25%; text-align: left; float: left; width: 50%; z-index: -10;}
</style>
<style>
/* specific design */
.reveal h1 {
margin: 0% -100%;
padding: 2% 100% 4% 100%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 200% 200%;
animation: Gradient 60s ease infinite;
}
@keyframes Gradient {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
.reveal h2 {
text-align: center;
margin: -5% -50% 2% -50%;
padding: 4% 10% 1% 10%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
<!-- --------------------------------------------------------------------------------------- -->
---
# 100歳大学 2022/1/27
slide: https://hackmd.io/@tnkstr/SJmvNV2cY
---
## 自己紹介
情報政策課 ICT推進室 室長
* 1996(平成８)年 甲南町役場入庁 税務課
・
・
* 2004(平成１６)年 甲賀市合併 情報政策課
* 2011(平成２３)年 情報基盤整備推進室
* 2015(平成２７)年 情報政策課
* 2017(平成２９)年 税務課
* 2019(令和元)年 ICT推進室 現在に至る
---
## アジェンダ
* ICTって
* 政府の動向
* 市の動向
* キーワード
* ワーク
---
## ICTとは？
:::info
アイ・シー・ティー(Infomation and Communications technology)情報通信技術。IT（アイ・ティー）と呼ばれることも多い。
> 引用：広辞苑 [color=red]
:::
---
### ITとは？
:::info
IT（アイ・ティー Infomation technology)情報技術
情報技術：コンピューターや通信など情報を扱う工学およびその社会的応用に関する技術の総称。
> 引用：広辞苑 [color=red]
:::
---
### 結局のところICTって？
**コンピューターや通信などを利用した、身の回りにある「モノ」や「サービス」**
例えば・・・
・スマートフォン ・テレビ ・カーナビ
・ICOCA（切符・定期券） ・パソコン
・電子メール ・ホームページ（Webページ、Webサイト）
・ATM ・コンビニレジ（電子マネー・何とかPay）
---
## 政府の動向
1. デジタル庁
2. マイナンバーとマイナンバーカード
---
---
### なぜ？日本はIT先進国では？
個人情報に関する国民サービスは「自治体」が担当する
しかし、情報システムは自治体ごとにバラバラ
国も省庁毎にシステムはバラバラ
すべてが連動しない ➡ 情報のやりとりは「紙」しかない
---
### デジタル庁設立
令和３年９月１日 設立
デジタルの活用により、一人一人のニーズに合ったサービスを選ぶことができ、多様な幸せが実現できる社会 ～誰一人取り残さない、人に優しいデジタル化～
職員６００人のうち２００人は民間人
---
### デジタル庁の主な取り組み
* 行政サービスのデジタル化
* マイナンバーカードの活用推進
* 誰一人取り残されないデジタル社会の実現
ICT機器・サービスに関する相談体制の充実 デジタル活用支援 スマホ教室
情報バリアフリー環境の実現 障害者、高齢者等の利便の増進に
---
## マイナンバーカードでできること
---
## マイナンバーカードでできること
* マイナンバーを証明する書類として
* 各種行政手続のオンライン申請等に
* 本人確認の際の身分証明書として
* 各種民間のオンライン取引等に
* コンビニなどで各種証明書の取得に
* 様々なサービスがこれ一枚で
---
### 様々なサービスがこれ一枚で？
* 印鑑登録証明
* 図書館カード
* 公共施設予約
* 申請書自動作成
* 健康診断
* 各種ポイント
* 地域通貨
---
## マイナンバーとマイナンバーカード
マイナンバーとマイナンバーカードは別物です。
マイナンバー：住民票のある人に割り振られた１２桁の番号そのもの
マイナンバーカード：ＩＣチップ付きのカード。氏名、住所、生年月日、性別、顔写真、マイナンバー、電子証明書が記録されている。
---
## マイナンバーカードの使い方
４つの暗証番号
署名用電子証明書の暗証番号
利用者証明用電子証明書の暗証番号
住民基本台帳用暗証番号
券面事項入力補助用暗証番号
---
## 署名用電子証明書の暗証番号 ６から１６桁
電子申請で利用します。
署名用電子証明書は、「実印」に相当します。
住民票と印鑑証明書の添付が省略できます。
---
## 利用者証明用電子証明書の暗証番号 ４桁
カード利用者の特定を行います。
例：コンビニ交付
---
## 住民基本台帳用暗証番号 ４桁
転入や転出の際に利用します。
---
## 券面事項入力補助用暗証番号 ４桁
申請手続のとき、マイナンバーカードに記載されている事項（氏名、住所、マイナンバーなど）の入力を機械が自動に行います。
例：ワクチン接種証明書
---
## 拡大される利用方法
---
## マイナンバーの民間利用
---
## 市の動向
* 甲賀市ICT推進ビジョンの紹介
---
## キーワード
* DX
* スマートフォン
---
## DX
---
## スマホで使う市役所
## Who am I?
nhkアプリ
生活に身近な話題
地デジ ディボタン
市のホームページ見てない
防災
---
### 70% of our users are developers. Developers :heart: GitHub.
---
{%youtube E8Nj7RwXf0s %}
---
### Usage flow
---
```graphviz
digraph {
compound=true
rankdir=RL
graph [ fontname="Source Sans Pro", fontsize=20 ];
node [ fontname="Source Sans Pro", fontsize=18];
edge [ fontname="Source Sans Pro", fontsize=12 ];
subgraph core {
c [label="Hackmd-it \ncore"] [shape=box]
}
c -> sync [ltail=session lhead=session]
subgraph cluster1 {
concentrate=true
a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
b [label="HackMD Editor"] [shape=box]
sync [label="sync" shape=plaintext ]
b -> sync [dir="both"]
sync -> a [dir="both"]
label="An edit session"
}
}
```
---
### Architecture of extension
---
---
## Content script
- Bind with each page
- Manipulate DOM
- Add event listeners
- Isolated JavaScript environment
- It doesn't break things
---
# :fork_and_knife:
---
<style>
code.blue {
color: #337AB7 !important;
}
code.orange {
color: #F7A004 !important;
}
</style>
- <code class="orange">onMessage('event')</code>: Register event listener
- <code class="blue">sendMessage('event')</code>: Trigger event
---
# :bulb:
---
- Dead simple API
- Only cares about application logic
---
```typescript
import * as Channeru from 'channeru'
// setup channel in different page environment, once
const channel = Channeru.create()
```
---
```typescript
// in background script
const fakeLogin = async () => true
channel.answer('isLogin', async () => {
return await fakeLogin()
})
```
<br>
```typescript
// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true
```
---
# :100: :muscle: :tada:
---
### Wrap up
- Cross envornment commnication
- A small library to solve messaging pain
- TypeScript Rocks :tada:
---
### Thank you! :sheep:
You can find me on
- GitHub
- Twitter
- or email me
{"metaMigratedAt":"2023-06-16T16:35:48.239Z","metaMigratedFrom":"YAML","title":"100歳大学ICT講座","breaks":true,"slideOptions":"{\"theme\":\"white\",\"slideNumber\":\"c/t\",\"center\":false,\"transition\":\"none\",\"keyboard\":true,\"width\":\"93%\",\"height\":\"100%\"}","contributors":"[{\"id\":\"9f5a897a-ebb4-4c69-8728-6c92bcf5b2a7\",\"add\":8269,\"del\":622}]"}