icchi's blog | 都内で働く高専出身エンジニアのブログ

Vue製サイトのCI/CD環境をCircleCIからGitHub Actionsに移行してみた

Sun, 26 Jan 2020 19:28:00 GMT

はじめに

最近仕事で GitHub Actions を使い始めました。料金体系は従量課金制で、CircleCI を意識してか基本的に GitHub Actions のほうが安くなるような価格設定です。

プロフィールサイトを改修する機会があったので、ついでに CI/CD を CircleCI から GitHub Actions に移行してみました。

モチベーション

GitHub Actions を個人プロジェクト(無料枠)でも試してみたかった
無料枠での実行時間が CircleCI よりも長い
コード管理、CI/CD、サイト配信を GitHub で一元化
- GitHub Actions → GitHub Pages
- GitHub Actions と Issue、Pull Request との連携

移行作業

今回の移行作業を図でまとめるとこんな感じです。

サイト配信を GitHub Pages に変更

これまでサイトの配信はドメインの契約時に付随してきたサーバを利用してきました。CircleCI を利用して、Vue で静的サイトを生成(ビルド)した後、FTP でそのサーバに送信する流れです。

今回 CI/CD を GitHub Actions に移行するにあたり、配信も GitHub Pages を用いることにしました。以下の GitHub Actions の公開アクションを使って簡単にサイトを GitHub Pages で公開可能です。

また、これまで必要だった FTP の管理からも開放されるのもありがたいところ。一応 FTP を扱いたい場合も、FTP Deployという公開アクションもあるので割と簡単にはできそうです。

プロフィールサイトのリポジトリ名を変更

GitHub Pages サイトには、3 つの種類があります。プロジェクト、ユーザ、そして Organization です。プロジェクトサイトは、JavaScript ライブラリやレシピ集など、GitHub の特定のプロジェクトに関するものです。ユーザおよび Organization サイトは、特定の GitHub に関するものです。

https://help.github.com/ja/github/working-with-github-pages/about-github-pages

上のように、ユーザタイプの GitHub Pages を使うためにはリポジトリ名の制約があります。既存のプロフィールサイトリポジトリ名をprofile-siteからicchi-h.github.ioに変更しました。

必要に応じてローカルのリポジトリ内に含まれるリモート URL も変更。(<repositoty path>/.git/config)

カスタムドメイン対応

公式のドキュメントには A レコード指定方式、IP 指定方式について記載されています。

今回は CNAME 方式を採用しました。icchi.meドメインにアクセスがあった際にicchi-h.github.ioドメインを参照するようになります。

あとリポジトリの設定画面から使用するドメイン情報を保存しておきます。Setting → Overview → GitHub Pages。icchi-h.github.ioへのアクセスはicchi.meにリダイレクトしてくれます。

ソースコードのプッシュブランチを変更

GitHub Pages の仕様でユーザタイプのページは master ブランチから配信する必要があります (2020/01/26 時点)。プロジェクトタイプは自由に配信用ブランチを選択できるので、同様にしてほしかった。

仕方ないのでサイトのソースコードをproduction、配信をmasterブランチで管理することにしました。デフォルトブランチは、Code → branches → Change Default Branch から変更可能です。

CI/CD 移行

CircleCI の停止

WorkFlow の停止

CircleCI コンソール → WORKFLOWS → 今回の WorkFlow の設定 → OverView → Stop Building

WorkFlow の設定ファイルを削除

プロフィールサイトのリポジトリ内に含まれている CircleCI 用ディレクトリ.circleciを削除します。

GitHub Action 用 Deploy Key を作成

https://github.com/peaceiris/actions-gh-pages#1-add-ssh-deploy-key

GitHub Actions の設定ファイルを追加

リポジトリのルートに.github/workflows/main.ymlを作成しました。

.github/workflows/main.yml

name: CI/CD

on:
  push:
    branches:
      - production

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@master

      - name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'

      - name: Cache dependencies
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      - name: install
        run: npm install

      - name: build
        run: npm run build

      - name: deploy
        uses: peaceiris/actions-gh-pages@v2
        env:
          ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          PUBLISH_BRANCH: master
          PUBLISH_DIR: ./dist

README.md 内のバッジ更新

README.md内に記載されている CI/CD のステータスバッジを CitcleCI から GitHub Actions のものに変更しました。

<!-- CircleCI -->
[![CircleCI](https://circleci.com/gh/icchi-h/profile-site.svg?style=svg)](https://circleci.com/gh/icchi-h/profile-site)
↓
<!-- GitHub Actions -->
[![Actions Status](https://github.com/icchi-h/icchi-h.github.io/workflows/CI/CD/badge.svg)](https://github.com/icchi-h/icchi-h.github.io/actions)

デモ

GitHub リポジトリの Action タブから設定したアクションの状態が確認できます。

感想

簡単

既存のリポジトリに.github/workflows/XXX.ymlを作るだけで CI/CD 環境を構築
日本語の公式ドキュメントも充実
今回の移行規模であれば 1,2 時間で完了

便利

コード管理、CI/CD、サイト配信すべてを GitHub で完結
- 各サービス用のアカウント、決済、システム連携、などの複数管理から開放
- CI/CD の状態が issue や Pull Request 上に表示
- ブラウザのタブ間を行き来不要
- Lint を設定していれば PR 上のコードにインラインで結果を表示
  - 機能は CircleCI にはなかったような...?
公開されているアクションを利用可能

安い

無料枠においても 1 ヶ月あたりの実行時間が CircleCI よりも長くなった
有料でも従量課金制+単位時間あたりの金額が CircleCI よりも安い

おわりに

すでに GitHub をコード管理やサイト公開使っている開発者にはおすすめできるサービスだと感じました。CircleCI や Travis などにとっては頭が痛いそうだ。

Reference

チーム向け通知システムを作ってみた

Tue, 15 Oct 2019 02:55:00 GMT

はじめに

「最近、XXX(私の名前)に会ってないから名前が出てこないわー」。

開発のきっかけは 7 月の異動前に所属していたチームのリーダーからの一言でした。この煽り発言に対抗するためにはどうすればいいのか...考えました。考えた結果、定期的に(鬱陶しいぐらい)名前と顔写真を送ればいいのでは？というソリューションが頭を過りました。ただし、それだけじゃただの迷惑行為。そのため日常生活に便利な情報を付随すれば、相手も便利に感じてもらいながら本来のミッションをクリアできる(はず)という考えに至りました。

毎朝？日常的に得たい情報とは

どんな情報を通知すればいいのか...個人差もあるかと思いますが、すぐに思い当たったのか以下の項目。

天気予報
ターゲット(チームリーダー)の当日スケジュール
チーム用スケジュール
...

2 に関してはデータの取得がセキュリティ的に困難なのと、すでに確認作業がルーチン化されているため、あまり効果がないかもしれません。そこでひとまず 1,3 を実装することにしました。あと 1 の天気予報に関して、晴れ予想を通知しても恩恵があまりないので、雨天予報のときのみ通知する仕様にします。

構成

以下のような構成にしました。

通知スクリプト

毎度同じみ GAS を中心に構成。通知のための定期処理はマイトリガー機能で平日毎朝 9 時に通知関数が実行されるようにしている。

カレンダー

今回のシステムのために、新たに 1 つ API を開発した。こちらもリクエストとメインの処理は GAS で担当。スケジュールの管理は皆で編集できるように Google SpreadSheet を利用した。

(開発したあとで気付いたが、スケジュール管理なら SpreadSheet ではなく Google カレンダーで良かったのでは...笑)

天気予報 API

プログラムから天気予報を取得する問い合わせ先(無料)候補。

Open Weather Map
YOLP (Yahoo Open Local Platform)
livedoor Weather Hacks
気象庁 (要スクレイピング)
...などなど

それぞれ、取得できる期間や精度などに違いがあります。

今回の目的は午後の天気が取得することで、その点 livedoor の天気予報 API は求めている情報を加工する必要なく返却してくたので、こちらを利用。

(意外と YOLP に関する参考記事が少なかった)

結果

感想

やっぱりこういったちょっとした開発案件には GAS は最適だと思う。特に Clasp と Typescript 対応で更に DX が改善されたように思う。これが無料で使えるんだから素晴らしい。

ただし、自分の環境では doPost 関数実行時(POST リクエストを受け取った時)に、なぜか Stackdriver(ログサービス)が稼働しないようでログが残らない。そのため、実行ログやデバッグの際に少し手間取ることがあった。

加えて、Clasp で push した後のコードはスクリプトファイル(.gs)が別でもスコープ共通化されている。各々のスクリプトファイルで同名の変数が定義されていても、エラーは起きず実行タイミングによって内容が上書きされてしまう。自分は変数名のルール化や不要なコードのコメント化で対応したが、このあたりが typescript→gs へのコンバート時に考慮してもらえると、より DX が向上すると思う。

肝心の開発リーダーからの反応は今のところない。

Gatsby、Netlify、IFTTTでCI、Qiita連携対応なブログを作ってみた

Wed, 02 Oct 2019 22:00:00 GMT

はじめに

以前から興味があった静的サイトジェネレーター「Gatsby.js」でお試し的にブログを作ってみました。

高品質な Gatsby 製サイトとの出会い

これまでも巷で静的サイトジェネレータが話題になることがありました。その度に手を出してみようと思ったものの、すでに WordPress 製のブログがあることから実行には移りませんでした。ブログというアウトプット手段に時間をかけるなら、アウトプット自体に時間をかけたほうがいいのでは、という理屈です。

少し前に非常に品質の高い Gatsby 製サイトと出会いました。 takumon さんが開発されたものです。

まずサイトの品質に驚きました。どうしても静的サイトジェネレーター製のサイトは使えるテーマの成熟度から WordPress 製と同等のレベルに持っていくのは大変かと思います。上のブログは全体的なデザインはもちろん SNS の共有機能、Qiita との連携など、見た目も機能も非常に高いレベルでした。

加えて特に惹かれたのは、ブログのソースコードが GitHub でMIT ライセンスで公開されていることです。コードを自分用にカスタマイズして公開することが可能です。このレベルのコードを利用させてもらえるのは大変ありがたかったです。

Takumon さんとのブログとの出会いに後押しされ、静的サイトジェネレーターでブログを作ってみました。

構成

オリジナルから少し見た目とホスティングサービスを変更したことに加え、CI/CD を強化するためインフラ面も多少改良しました。

Qiita との連携

Qiita にも多少記事を投稿しているため、ブログと Qiita との連携機能は個人的にマストでした。一番気にしていた点でしたが、Takumon さんが開発している Gatsby プラグインを使えば簡単に実現できます。

公式ドキュメントや Takumon さんのブログのコードが参考になります。

Netlify での公開

ブログのホスティングサービスはオリジナルは GitHub Pages を利用しているようでした。こちらも手軽にデプロイできるいいサービスですが以下の点から Netlify を利用しました

読み込み速度 (参考情報:比較記事)
Build hooks
- HTTP リクエストを投げると GitHub の最新コードでビルド&デプロイが可能
ビルド環境の統一

Qiita 更新時の自動反映

Qiita と連携し Qiita 記事をブログで表示するのであれば、常に最新の記事を取得、反映したいというもの。そこで IFTTT を使い対応しました。IFTTT の Feed トリガーを用いて Qiita の RSS(Atom)を監視し、新しい投稿が検出された際には Netlify の Build Hooks にリクエストを投げる仕様です。

感想

実際に作ってみた感想をまとめます。比較対象はこれまで運用していた WordPress です。

パフォーマンス

⭕: 読み込み速度
- Netlify はフリープランでの CDN から配信
- Gatsby による仮想 DOM、Prefetch
- 静的配信によるサーバ側の計算コスト削減
- lighthouse スコアも向上

カスタマイズ性

⭕: ブログ全体をコードレベルで把握できる
- 変更が容易
⭕: Node によるパッケージ導入の容易さ
- Material UI の導入もスムーズ
⭕: Gatsby のプラグインやテーマが豊富
- 導入後の調整作業は多少必要
❌: テーマの豊富さ、反映までの速度感では WordPress に軍配

機能面

❌: プラグインの充実度では WordPress に軍配
❌: WordPress の方が PHP の動的処理で記事ランキングの実装が容易
- Gatsby でも実現はできなくないが、別途アクセス管理サービスが必要
❌: 簡単な修正をしたいときにスマホからは困難 (GitHub に push できない)

開発環境

⭕: CI/CD
⭕: GitHub によるコード管理
⭕: ローカル環境でのコーディング、デバッグ

セキュリティ

⭕: WordPress のような動的サイト故のセキュリティホールが無い

Reference

GAS、SpreadSheet、DataPortalを使って仕事の見える化システムを作ってみた (ついでに週報作成や通知の自動化)

Fri, 23 Aug 2019 12:58:00 GMT

はじめに

入社して3年目になり、最近、初めての部署異動を経験しました。

研究開発チームからビジネス系部門内の開発チームに異動し、周囲の人の雰囲気や職場の環境が大きく変わりました。正直、転職したのかなと、思ってしまうぐらいの変化で当初は戸惑いもありました。

並列して担当するプロジェクト数
打ち合わせの時間の増加
週報など文化

これらの変化に対応するため、個人的に仕事見える化プロジェクトを開始しました。

ミッション

本プロジェクトでは以下の項目をミッションとして定めました。

仕事の可視化
- 各プロジェクトごとの消費時間の可視化全体の稼働時間のうちの打ち合わせの割合
リアルタイム性
- 随時最新のデータを可視化 (例: 先週の状況)
一部タスクの抹殺
- 週報や現在取り組んでいる作業の報告などの作業を軽減or消す

システム構成

上記ミッションを解決するために、悩んだ末、以下の構成にしました。

肝となるBIツールにはGoogleデータポータルを採用。AWSでもQuicksightといった類似サービスはありますが、見た目のカスタマイズ性に優れる前者にしました。

裏側の連携するDBにはSpreadSheetを使いましたが、これは特に理由はありません。このDB部分に管理したいスケジュールデータを集中される構成です。ここのデータが更新されていけば、連携しているデータポータルでも随時最新のデータで可視化されます。

SpreadSheetへのデータの取り出しや挿入のためにGASでAPI機能を実装しました。詳しくは述べませんが、GASの実装も昔に比べ非常にDXが改善されています。今ではClaspといったGoogle公式のCLIでローカル開発ができることに加えて、若干癖はあるもののTypeScriptまで対応しています。

元データとして、最も手を加えずに情報を抱えている(プロジェクトや作業など)ExchangeサーバとGoogleカレンダーからデータを取得しています。Exchangeサーバからデータを取得するためにPythonでそれ用のスクリプトを別途実装しました。Exchange用のライブラリがあるので意外と簡単に実装できます。

あと必要に応じてGASを中心にSlack等へ通知する仕組みも用意しました。

成果物

実際に作成したデータポータルのダッシュボードです。

日付の範囲を指定して、手軽にデータ範囲を編集しながら勤務形態を可視化することができました。

まとめ

ミッションクリア。今回のシステムは実用的で意外と使えます。

最初は自己満足的な気持ちが大きかったですが、具体的に全体の3割以上が打ち合わせに消費されている事実(1日7時間勤務として、1週間で35時間、そのうちの10時間以上)が数値で具体的に可視化されるとインパクトがあります。上司に打ち合わせ改善の打診をするときにも説得力は増します。

また、今回の副産物としてありがたかったのは、定期タスクの軽減、効率化です。スケジュールに関する情報を一括で管理しているため、今週取り組んだタスクのプロジェクト別の一覧を金曜日に自動的にSlackに自分宛てに送り、週報の作成負担の軽減に繋がりました。また今取り組んでいるタスクをSlackの一部チャンネルに投稿するといった、タスク可視化のための運用ルールもあったのですが、これも本システムで消すことができました。

意外と恩恵もあったし、そもそも可視化は楽しいので今後とも取り組んでいきたい。何なら可視化が仕事としてできるようになりたい。

文字画像ジェネレーターを作ってみた

Tue, 07 May 2019 02:10:00 GMT

はじめに

先日、勤め先の社内報にこのような画像が掲載されていました。

同じチームのリスペクトして止まない先輩だったわけですが、これを見て思いました。

これは素材として使える！...と。

そんな経緯からこの画像を有効活用すべく、私の中で先輩画像ジェネレータープロジェクトが始まりました。

1. 画像の切り出し&修正

使ったツールは以下 2 つ。

MAC 純正プレビューアプリ
photopea

ご存知の通り、MAC 純正のプレビューアプリは強力な編集機能を備えています。背景の切り抜き&透明化程度なら 1 分無いうちにできてしまいます。

photopea は無料 PhotoShop 風 Web アプリです。無料の割にかなり高度な画像編集が可能で、今回の画像に対しては特定エリアの切り出しなどもささっとできてしまいました。ただ、日本語には対応しているもののドキュメントが少ないのが惜しいです。

最終的に出来上がったのがこちら

いい感じに背景とスケッチブック内の描画を切り抜くことができました。

2. 画像ジェネレーター(Web アプリ)の実装

よくある画像ジェネレーター Web アプリを用意しました。

利用した主要技術(フレームワーク)は以下 3 つ。

canvas
vue
vuetify

実装方法などの詳細はこちらのページにまとめてあります。

実際の動き

おわりに

画像ジェネレーターは案外簡単に作れた。

Vue や React なんかの SPA フレームワークのおかげで、この手のリアルてタイム描画系(バインディング)の処理実装が本当に楽になったと感じます。

地震の震度分布地図画像を自動的に生成するシステムを作ってみた

Mon, 21 Jan 2019 01:49:00 GMT

はじめに

ちょっとした要望から、地震の震度分布図を自動的に作れるようにしてみました。

地震情報から SVG 画像を生成する部分は以下の記事にまとめてあります。

今回作ったシステムは上記の記事内容から、主に以下の要素が加わっています。

新規の地震情報の検知
フロントページの作成

構成

キーワード

気象庁防災情報 XML フォーマット形式電文
IFTTT
震度観測地点位置 JSON
GeoJson
D3.js
d3-geo
jsdom
convert-svg-to-png
express

解説

新規地震情報追加の検知

気象庁からは、新規の地震情報を検知するために Pubsubhubbub の仕組みが提供されています。配信受信用の環境を作れば、リアルタイムに更新を検知することができます。ただ、環境構築以外にも利用申請が必要だったりと、多少利用ハードルがあります。

今回は更新検知のリアルタイム性もあまり必要としていなかったこともあり、Atom フィードの更新を定期的に検知するやり方をとることに。

IFTTT では RSS フィートの更新検知トリガーが利用できるため、そのトリガーが発火した際に画像生成サーバにリクエストを投げるようにレシピを作成しました。

png 画像の用意

生成される SVG 画像はベクター形式ということもあり、容量がひとつあたり数 MB もありますプロントページでリスト表示する際のサムネイル画像ようには少し大きすぎるため、png 画像を用意しておきました。

変換には以下の node package を利用。

https://github.com/neocotic/convert-svg/tree/master/packages/convert-svg-to-png

感想

IFTTT のフィード更新検知が若干遅い

IFTTT の RSS フィードトリガーを使ってみて、実際に地震が発生してから更新検知イベントが発火するまでの時間が把握できてきました。ばらつきがあるもののだいたい 5〜30 分。恐らく IFTTT サーバから定期的に 30 分周期？でチェックしているからだと思います。

理想を言えば、Atom フィードの更新と同時にイベントが発火してほしいところです。気象庁の Pubsubhubbub 以外にも IIJ の Eq-Care サービス内に WebSocket API があります。それを使えば手間はかかるものの、現状より検知タイミングを早められるのでは期待しています。

またタイミングがあれば手を加えてみようかな。

svg→png の変換がお手軽

svg→png の変換がひとつの Node package で完結できたのは非常に楽でした。

これまで svg 変換の機能をサーバに持たせようとする場合、

パッケージ内で利用するブラウザの関係で日本語が文字化け
依存関係を満たすのに別途 make install する必要

などなど手間取ることがありました。

その点今回利用している[convert-svg-to-png](https://github.com/neocotic/convert-svg/tree/master/packages/convert-svg-to-png)では headless chrome を使っているらしく、導入もnpm installだけで済みました。headless chrome は各種ディストリビューションにおいても導入もパッケージマネージャからできることが多いため、手軽でありがたいです。

2018年のまとめと2019年の抱負

Tue, 01 Jan 2019 00:00:00 GMT

あけましておめでとうございます。

若干出遅れましたが、年末年始エントリーを書いていきます。

2018 年のまとめ

1 月: グラフ生成ツールの開発に没頭 (react, d3, plotly)
2 月: 上に同じ
3 月: 上に同じ
4 月
- Web アプリ開発に没頭 (nuxt, kubernetes(+ docker), GCP, firebase(auth, RDB))
- SNS 系システム開発 4 月
5 月: 上の「2」の作業が自分の中で停滞
6 月: 4 月「1」に同じ
7 月: 余韻浸る
8 月: 画像処理をかじる
9 月: 特になし
10 月: 地図分野の周辺技術 (geo/topo json, osm, raster/vector tile, mbtiles, d3)
11 月
- 4 月の Web アプリにおけるインフラとフロントの改修に没頭 (GCP)
- 部活動で足首を剥離骨折
12 月: 足が治る

所感

インフラ・フロントの双方に主体的に関わることができたので、総合的に知見が広まったように思う。その過程で AWS や GCP などのクラウド系インフラも触る機会があり、システム開発の全体像が少しずつ見えてきたような気がして満足している。

特に React や Vue(Nuxt)をがっつり触れたのは良かった。これまで簡単なデモを作る機会はあったが、深い部分まで理解はできていなかった。今年はシステム案件としてより深く SPA フレームワークを扱うことで、既存のシステムとの統合やライフサイクルの扱いなど、細かいところも経験したことでそれなりに慣れてきた。自信や感覚を掴めた気がしている。

AWS や GCP を自由に触れたことも良かった。取り扱うシステムを Docker ベースで構築したり、勉強会で良さげだと思った技術をすぐにテストして扱っているシステムに反映できたことは非常に楽しかったし、勉強になった。来年はビルド&デプロイ系をのタスクをクラウドサービス側で自動的に実行するなど、サービス側が提供している機能フルに活用していきたい。

あと地図系の技術を調べる機会があった。この分野に関してはまったくの素人で、当初は普段利用している Google マップを始めとする地図サービスがどのように動いているのかわかっていなかった。勉強の過程で地図系技術の進化を知っていくと感心することも多かった。mapnik を利用したラスター形式の地図画像から、geo/topo json のベクター形式、より軽量化した mbtiles 形式など。mbtiles が protocol buffer を利用したように、最適な技術が思い浮かび利用できるようになりたい。

4 月「2」に関しては心残りになっている。もとは友人が企画、取りまとめていた開発プロジェクト。最初は時間が取れていたものの、忙しい時期と被ったあたりから参加できなくなっていった。企画内容自体は非常に面白いので形にしてみたかった。pending 案件。

剥離骨折

11 月末に足首の靭帯損傷と剥離骨折をしてしまった。冬場の試合中で体が温まりきっていないときに無理に動こうとしたら捻ってしまった。

で、そのあとがまた辛かった。松葉杖での出社は恥ずかしすぎたし、通勤とか打ち合わせへの移動とか面倒だった。たった 20m 先の打ち合わせコーナーに行くだけで一苦労。昼ごはんは Uber Eats や蘭州で出前を自席まで届けてもらった。(Uber Eats は初めて使ったけど支払いも楽だし、商品も多くていい感じだった) 忘年会のときは、他の人よりも 30 分早めに会社に出て、夜の銀座を松葉杖で歩いた。いろいろシュールだったと思う。

社会人になってから大きめの怪我をすると辛い、当たり前の話だが良い教訓になった。

反省

アウトプットが少ない。これに尽きる。

業務やプライベート問わず、テック的にいい経験やノウハウが獲得できたにも関わらず、全然外にその情報を出せていなかった。エンジニアにとってアウトプットが大切だということは言わずもがな。ここでは述べないでおこう。

Qiita やブログなど場所はあるので、積極的にアウトプットして記憶の整理や記録を蓄積していきたい。

2018 年目標のファクトチェック

あと年始に定めた目標のファクトチェック。

昨年の目標と結果は以下の通り。

体調を崩さない体づくり = △
サウナに月 1 程度通う = ☓
勉強会に月 1 程度参加 = ☓

https://blog.icchi.me/sammary2017

1 番の体作り以外全然達成できていなかった。反省反省。

趣味のランニングやジムで体を動かすことはサボらずできていた。おかげて 1 年通して、体の健康状態は良好だったと思う。健康診断で 1 年目のはじめに肝臓で要受診をくらったが、今年はすべて問題なしだった。

ただ、昨年の 5 月に 1 週間ほどなぞの熱で寝込むことがあった。定期的(半年ごと？)に同じ病状で倒れるので、11 月は意識して過ごしていた。結果、11 月以降は寝込むことはなかった。5 月に倒れてしまったので、ここはマイナス点。

2,3 の目標は月 1 実行はできず。社会人をやっていると忙しい時期はできてしまう。ただその時期が終わったあとに習慣化できておらず結局行かないことが多々あった。良いとわかっていても、「まぁいっか」とうの気持ちでノーアクションだった。

2019 年の抱負

これらを踏まえて、今年の目標は以下の 3 つにした。

月 1 でアウトプット (ブログ等)
月 1 で勉強会に行く
個人開発のツール等を 3 つ

1,2 は去年の引き継ぎと昨年度の反省から。3 はプライベートの時間も確保する(メリハリをつける)意味で。会社の業務に熱中することもいいが、ちゃんとそれ以外の内容も吸収したり、何か開発して形にしたい。

以上、長くなりましたが、今年も楽しく健康な 1 年になりますように。

SNSのスクショ画像からタグやURLなどを取り出すWebアプリを作ってみた

Wed, 03 Jan 2018 19:19:00 GMT

はじめに

「SNS のスクショ画像に映っている SNS のアカウント名やハッシュタグ、短縮リンクなどを手軽に取り出せれば...」知人の要望をきっかけに簡単に Web アプリを作ってみました。

システムの構成

フロントは React で実装。アップロードされたスクショ画像を OCR にかけて、結果であるテキストから必要な要素を正規表現で検出&表示する流れになっています。

React と OCR について

最近は仕事でフロントエンドを触ることが多いので、React を始め Angular や vue.js を簡単に触ったりもしました。個人的には React が好みです。やはり人気どころの UI フレームワークなので、

多種多様な Component が用意されている
関連するライブラリの開発が速い

などのメリットがいいですね。

あと、OCR は Cloud Vision API を利用。他にも無料枠がある Free OCR API なるものもあったりします。割りと使える印象ですが、さすが Google と比べると精度が落ちる印象。

文字列からメタ要素を取り出し

正規表現を使って、文字列から要素を取り出します。そのことについては次の記事にまとめました。

DEMO

公開はしていないので動作動画だけ。はたして一般的に需要があるかどうか...

スクリーンショットに表示されているアカウント・タグ・リンクを検出するWebアプリを作ってみた。フォームからリアルタイムで修正&再検出可能。 pic.twitter.com/t4s795zoHK
— i̲c̲c̲h̲i̲ (@icchi_h) January 2, 2018

せっかく React を使っているので、OCR の結果を編集してリアルタイムで要素の再検出ができるようにしてあります。

2017年のまとめと2018年の抱負

Mon, 01 Jan 2018 00:00:00 GMT

あけましておめでとうございます。

今年は実家に帰省していないため、少し寂しい年末年始を過ごしています。

今年もあっという間に終わってしまいました。2017 年は特にバタバタした年だったように思います。せっかくの年末年始なので少しまとめてみます。

2017 年のまとめ

1 月: 修論に命を費やす
2 月: 修論発表 (反動から発表終了後 3 分で MacBook Pro を購入)
3 月: 大学院卒業&引越し
4 月: 入社 (引越し先が未完成だったためしばらくホテル暮らし)
5 月: 研修
6 月: 研修
7 月: 研修終了。研究開発チームに配属
8 月: 深層学習で顔認識に従事
9 月: 上と同じ
10 月: 主に Web 系フロントの開発に従事 (React、Angular)
11 月: なぞの発熱で 1 週間寝込む
12 月: 色々

2017 年の最も大きな出来事は、やはり長年の学生生活が終わり、社会人生活が始まったこと。社会人生活については去年の 5 月にまとめたものがあります。

http://wp.blog.icchi.me/post-2053/

当時は社会人結構良いという感想でした。入社後 8 カ月、研修後 5 が月ほどたった今も変わりありません。社会人生活、割といいです。仕事も上司が私が興味のある内容を降ってくれるお陰で楽しみながらやれています。

今年の抱負

今年の主な抱負は以下の 3 つ。

体調を崩さない体づくり
サウナに月 1 程度通う
勉強会に月 1 程度参加

まず 1 つめについて。社会人になってからは割りと時間も確保していたので、大きく体調を崩すことはないと調子に乗っていました。しかし、11 月に謎の体調不良もあって、もっと危機感を持ったほうが良いと思ったわけです。これまでも「健全な精神は健全な肉体に宿る」を心がけて、運動は定期的にしていました。ただ、忙しくなるとなかなか時間もとれなかったり。そのあたりを改善して、もっと有酸素運動を取り入れようかと思っています。12 月から、今月に会社で参加する大阪実業団マラソンに向けて、会社まで走って行っているんですが、これが割りと気持ちいい。朝からスッキリするし、慣れれば昼過ぎに睡魔に襲われることもなくなりました。通勤で走っていれば、マラソン対策と言わず、定期的に生活に取り入れても良いかと。あと、自分はかなり体が硬いので、怪我対策も含めもう少し体を柔らかくしたい。

次に 2 つ目。これは 1 つ目と似たような理由です。あと、昨年、仕事の関係でよっぴーさんにお会いした際にサウナの良さについて教えていただけました。大きな変化があったそうなので、自分もトライしてみようかと思います。サウナの効果については色々記事が出ているとおりです。

家でも時々簡易的な交互浴をするときがありますが、たしかにスーッと精神が研ぎ澄まれれる瞬間があります。家でもやりつつ、もっと広い銭湯に行く習慣を生活に取り入れたい。

最後に 3 つ目。仕事が楽しかったり捗ったりすると、ついつい会社に篭りがちになる時があります。健康上も良くないし、何より生活における変化が少なくなってしまいます。その改善のために、せめて月 1 位でも勉強会に参加しようかと。昨年も気になる言語やライブラリの勉強会に何回か参加しました。他の会社の方とも繋がりができたり、技術的に気になる話を聞けたり。非常に良かったという思いしかなかったので、これも時間を確保して習慣化したい。

ぐだぐだと書いてしまいましたが、今年もどうぞよろしくお願いします。

盛大に体調を崩しました

Wed, 15 Nov 2017 00:28:00 GMT

先週末からずっと体調を崩し、最近ようやく調子が戻ってきました。40℃ 近い高熱と特に頭痛がキツかった。こんなにも長く体調が悪くなったのはほんとに久々です。

地獄のような夜行バス

ことの始まりは先週の土曜日。この日、社内バレー部の活動で大阪へ。確かにいつもに比べ調子は悪かったものの、普通にプレーできるほどでした。懇親会が終わり、夜行バスに乗ったころから体調が急変。寒気と吐き気で気分は最悪です。この日ほど、夜行バスにしたことを後悔したことはありません。(大変申し訳無いことですが、人生で初めて、運転手の方に予定よりも早く SA に寄ってもらうようお願いしてしまいました。) その後も寝れないは、吐き気は止まらないはで地獄のような一晩でした。次の日の朝、東京に着いたももの、まっすぐ歩けない。明らかに頭も重たい。いつの間にかカバンがやけに重たく感じる。何とか電車に乗って、家まで死ぬ気で歩きました。家までの 1km がハーフマラソン並に遠く感じました。

インフルエンザ？

帰宅後、熱を測ると 39℃。昨晩寝れてないこともあってすぐに寝ました。お昼過ぎになって起きると、体温は 39.6℃。ただ、喉、鼻はまったく炎症を起こしてなく、あるのは発熱と関節痛ぐらい。ググってみると、完全にインフルエンザの症状。この日は日曜で病院が休みだったため、翌日検査を受けに行くことに。とりあえず、総合風邪薬を飲むと少し熱は下がり 38 度後半に。

次の日、会社を休んで病院へ。病状を説明すると医者の先生も「インフルエンザでしょう」と検査を受けました。あの鼻の奥まで綿棒を突っ込む痛い奴です。10 分ほど待つと、結果はなんんと陰性。先生も不思議がっていましたが、恐らく風邪だろうとのこと。検査も完全ではないらしく、一応インフルに効く漢方と解熱剤をいただきました。

インフルエンザでなくて安心すると同時に、発熱の原因が気になりました。これまで、喉を痛めて、扁桃腺の炎症から高熱がでることはありましたが、今回は喉の炎症は全くありません。ただの風邪なら熱が出てもせいぜい 38℃ 弱程度です。先生によると、ウイルス性で腎臓が炎症を起こすとインフルエンザのような症状が出る場合があるとのことでしたが、今回は腎臓は特に痛くありません。先生は疲労だろうといっていましたが、正直、ここ最近は特に疲労を感じていませんでした。一体何が原因なのか…

ただ、熱はあるけど、歩いて病院まで行けるし、何よりご飯は普通に食べれたので、わりとすぐに治るだろうと思っていました。早く治すためご飯以外はほとんど寝ている生活が続きました。

熱が下がらず、頭痛が始まる

それから 2 日経過して水曜日。発熱し始めてから 4 日目。薬を飲んでも 37℃ 後半、薬が切れると 38° 半ば。ずっとこんな体温が続いていました。ご飯は食べれているのに、熱が下がりません。インフルエンザでもっと衰弱していた時も、2,3 日で熱は引いていたので、今回は長過ぎます。そして、水曜日あたりからひどい頭痛に悩まされました。目の奥がズキズキする感覚で、テレビやスマホを少し見るだけでも痛みが走ります。きっとそんなことは無いと思いますが、眼圧がすごく高くなっている感じでした。食後にスマホ見たり、テレビ見たりもできません。

明らかに、体調がおかしいので、もう一度病院へ。ただし、初回の病院が休みだったので別のところへ行きました。診察してもらうと、先生からは「風邪です」の一言。いろいろ症状を説明しましたが、全て風邪と一致するそうです。これまで、風邪で同じ症状が出たことはないので、スッキリはしませんでしたが…どちらにせよ療養するしか無いとのこと。

回復の兆し

そんなこんなで、PC もスマホもほとんと触れず、ひたすら横に。頭痛がやけに酷いのであまり眠れなかったのがキツかった。その後、金曜日から頭痛が引き始め、それと一緒に熱も薬無しで 36℃ 台に。発熱から 6 日目にしてやっと体が元に戻り始めました。

今は

今もまだ、少し頭が重かったり、目の奥に疲れが溜まっている感じがありますが、だいぶ良くなりました。ただ、結局のところ病気の原因がわからなかったのでスッキリしません。次に同じことが起きないように対策できないのが辛いところ。風邪だとするなら、体調を崩さないよう気をつけます。今回も別に弱っていたわけではないんですが。何にせよあの視神経にズキズキくる感じの頭痛は二度と経験したくないな。

特定キーワードにヒットした新着ニュースを通知するシステムを作ってみた

Sun, 14 May 2017 09:00:00 GMT

はじめに

最近、特定の記者の方々が書いた記事をニュースサイトから読むようになりました。検索対象が少なければ手動で検索しても問題ないのですが、多くなると結構な手間になります。それに、検索しても新規の記事が出稿されているとは限りません。

ニュースサイトが何かしらの機能や API を提供してれればいいのですが、今のところそのようなものはありません。

そこで、Google Apps Script(GAS)を使い、特定の検索キーワードにヒットした新着記事をメールで通知してくれるシステムを作ってみました。

システム構成

検索結果は JavaScript によって取得&表示されますが、GAS に準備されている通常の HTML 取得関数では JavaScript 実行後の HTML を取得できません。そのため、PhantomJs Cloud というスクレイピングサービスを用いることにしました。

http://qiita.com/icchi_h/items/4d560d9b451fc483a25e

HTML ソースが取得できれば、適当にパースして必要な記事情報を取り出します。記事情報の中には日付も含まれているため、それを元に新着記事の判定を行います。

あとは、この流れをすべての検索キーワードで行い、1 つ以上、新着判定された記事があれば、その結果をまとめてメールで送信する仕様にしました。サーバへの負荷対策としてループ毎に Sleep 関数を呼び出しています。GAS だと Gmail との連携も簡単にできますし、HTML 形式で本文に装飾を加えることもできます。

実際の動作

実装した GAS スクリプトを定期的に実行するように設定しています。実際の通知はこんな感じ。

東京で社会人はじめました

Sat, 13 May 2017 00:00:00 GMT

久々の更新になります。

先月 4 月、長い長い 18 年間のモラトリアム学生生活を終え、ついに社会人 1 年生になりました。今は生活も落ち着き、毎日満員電車に揺られながら社会人生活を送っています。

社会人生活はとても忙しいものかと思いきや、意外とそうでもないです(いまのところ)。毎日 6 時に仕事が終わり、何もする必要がなくなります。研究室での日々と比べるとあまりにも早い帰宅時間。帰宅後に自由な時間がある感覚にまだあまり慣れません。それに加え、資料作りも報告会もありません。もちろんミーティングで炎上することも。なんなら土日なんて完全にフリーで、何したらいいの状態です。それでいて、毎月お給料がもらえます。学生時代は年に 50 万払っていたというのに。これでいいのだろうかと若干背徳感を覚えるレベルです。

社会人、悪くないです。

あと東京ならではの嬉しいこともあります。会社帰りに秋葉原に寄ってぶらついたりもできるし、IT 系コミュニティがたくさんあったり。

少し話はそれますが、5 月末に開かれる Android Bazzar and Conrefence 2017 Spring にスタッフとして参加してきます。こういったコミュニティやイベントがあるのは東京が多いのですぐに行ける距離感はありがたいです。

こんな生活が送れるのも研修期間の今だけってのはあるとおもますが、東京でも楽しくやれたらなと思います。

Slackの絵文字をLINEのスタンプみたいに大きく使えるようにしてみた

Wed, 21 Dec 2016 07:16:00 GMT

追記

こちらの記事内で利用している API Token は旧式(Legacy Token)であり非常に強力な権限を持つものです。現在は新しいタイプの Token の利用が推奨されています。

セキュリティが甘い部分もあり、本記事の内容はあくまで参考として読んでいただけると幸いです。

この記事は『Slack Advent Calendar 2016』21 日目の記事です。

この記事は Advent Calendar 用に、以前実装したSlack 上でスタンプを表示するシステムを改良したものです。変更点についてはこちら。

Background

少し前から面白い記事に触発されてプライベートでも Slack を使い始めました。

確かに外部サービスとの連携が便利ですが、1 ヶ月ほど使っているとやはり LINE のようなスタンプが使えればと思ってしまいます。

一応 Slack にも絵文字機能があり自分で作れたりも出来るのですが、何せ小さい。

@BenJamski @technancy We have jumbomoji already、if you post a message with only emoji。Check they're enabled in your preferences

— Slack (@SlackHQ) 2016 年 8 月 5 日

公式曰くJumbomojiという機能によって絵文字単体で投稿すると通常よりも大きくなるそうですが...

ジャンボにしては小さい...

例えばこのような元画像が 400px 程度のスタンプ用画像をカスタム絵文字にしようもんなら、ほぼほぼ見えません。

やはり LINE で慣れてしまうともう少し大きいサイズがしっくりきます。皆同じことを思うようで Twitter 上では「もっとサイズを大きく出来ないの?」との質問が多数。

@SlackHQ we have to go bigger。Can it be a setting? Max emoji size? We want full 128px if possible。:) pic.twitter.com/6q6FIn9iW7

— Alex3 (@Alex3omg) 2016 年 4 月 18 日

@Alex3omg No plans to go any bigger just yet、but thanks for the feedback!

— Slack (@SlackHQ) 2016 年 4 月 18 日

それに対して公式の回答は「絵文字サイズを大きくする予定はない」

なぜなんだ Slack!

公式がこう言っている以上自分たちで解決するしか無い。

調べてみるといくつか方法があるようでした。こちらの記事ではブラウザ拡張機能を使ったり Slack のデスクトップアプリを拡張して絵文字を拡大表示させています。

Slack で LINE みたいにスタンプを使いたいと言われたので

しかし、これらのやり方だと設定した以外の端末からは大きくなりません. やはり Slack が使える全ての端末から、PC やスマホ関係なく同じようにスタンプを送信・表示できることが望ましい。

Slack で LINE みたいにスタンプを表示させるために

Slack では画像のリンクが投稿されると、その画像を展開して表示してくれます。今回はその機能を利用してスタンプを表示できるようにします。

そこで、こんなシステムを考えてみました。

具体的には, Outgoing WegHooks でカスタム絵文字の投稿を検出し、それに対応するスタンプの画像 URL があるならそれを投稿する処理を GAS で実装しました。

GAS を使って外部から処理しているため、プラットフォームに関係なく Slack が利用できる全ての端末でシステムを利用することが出来ます。

またカスタム絵文字とそれに対応する画像 URL(直接リンク)の管理は Google スプレッドシートで行います。そのためスプレッドシートを共有すればチームみんなでスタンプを増やすことが可能。

実際の動作

このシステムを使ってスタンプを表示するとこんな感じになります。

スタンプシステムの構築方法

これからシステムの作り方を説明します。

1. スタンプの準備と画像 URL の取得

まずスタンプとして使いたい画像を用意する。

サイズが大きすぎると Slack の容量を圧迫したりスタンプが大きく表示されすぎてしまうため、240~320px 程度にリサイズすることをオススメします.

無料のオンラインストレージを利用すると手軽に画像の直接リンクを取得できます。Dropbox だとファイルの右クリックから.Google Drive を利用する場合は以下のサイトが参考になります.

https://ameblo.jp/wantan-52/entry-12120519832.html

2. Slack 側の準備

Slack 側ではカスタム絵文字の登録と GAS にスタンプの通知を知らせる WebHook の設定を行う.

2.1. カスタム絵文字の登録

カスタム絵文字の登録せずともシステムは動作しますが、スタンプ投稿時に小さいながら確認できるので便利です。

1.1 で用意した画像をカスタム絵文字として登録する場合は手順が本家のサイトに載っています.

https://get.slack.help/hc/en-us/articles/206870177-Creating-custom-emoji

絵文字として登録するには画像を 128px 以下にする必要あるので(2016/12/21 時点) 以下のようなサービスを利用して画像を縮小します。

2.2. Outgoing WebHooks の設定

カスタム絵文字を投稿した際のトリガーとなる Outgoing WebHooks とあなたの Slack チームを統合。まだ統合していない方は以下のサイトがわかりやすいです。

Slack の Outgoing Webhooks を使って投稿

統合したら以下のように設定。

Channel: あなたがこのシステムを利用したいチャンネル（基本は Any で OK）
Trigger Words: :
URL: 3.2 で作成する GAS の公開アドレスを貼り付ける
Token: デフォルトで値が入っているがこれは使わない

正確に言うと:コロンが含まれている投稿全てに対して POST を投げている。その文字列が絵文字がどうかの判定は GAS 側のプログラムで行ってます。

3. GAS 側の準備

Google Drive 上の好きな場所に適当なディレクトリを作成.

3.1. Google スプレッドシートの用意

先ほどのディレクトリ内にスプレッドシートを作成。ファイル名は何でも OK。

シート 1 に対して以下のように入力。

A 列: 2.1 で登録した Emoji 名
B 列: カスタム絵文字に対応する 1.2 で取得したスタンプ画像の URL(直接リンク)

次に、シート 2 を作成し以下のように入力.

A 列: システムを利用するスラックユーザー名
B 列: ユーザの token

token は slack にログインした状態で以下の URL にアクセスすると生成可能。

https://api.slack.com/web

次にこのスプレッドシートを公開する。公開した URL は GAS のプログラム内で使うためコピーしておく。

3.2. GAS の用意

先ほどのディレクトリ内に GAS ファイルを作成。これもファイル名は何でも OK。

以下のサイトに従って、GAS への Slack ライブラリの導入。

https://qiita.com/soundTricker/items/43267609a870fc9c7453

以下のリポジトリのコードを GAS ファイルに貼り付け。

https://github.com/icchi-h/Stamp_on_Slack/blob/master/main.js

コード内の token と sheet_url に先ほど取得して値をいれる. こんな感じになっているはず。

最後に、GAS で POST を受け取るためのリンクを取得して、2.2 で設定した Outgoing WebHools の URL にセット。

その流れは以下のサイトで詳しく解説されています。

https://qiita.com/kyo_nanba/items/83b646357d592eb9a87b#gas%E3%81%A7post%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%82%92%E5%8F%97%E3%81%91%E5%8F%96%E3%82%8B

Let's try

あとは Slack でスタンプを楽しむ!

システム構築後にスタンプを追加していくには

1。(カスタム絵文字の登録と画像の直接リンクの取得)
3.1 で作成したスプレッドシートの追記

これの繰り返し。

付録. 同じ画像リンクは連続で使えない問題への対処

Slack の仕様上、1 時間以内に同じ画像 URL を連続で投稿しても 1 回目以降は展開して表示されない。

スタンプの使い方を考えるとこれはまずい。

そこで、画像 URL に UnixTime を GET のパラメータとして追記して対処しました。こうすることで一応は異なる URL として認識している。

追記. スタンプが BOT ととして投稿される問題を改善
(反映済み)

以前のものでは token を 1 つしか利用していなかったため、スタンプが BOT として投稿されていました。そのため本システムによってスタンプが投稿されると、新規メッセージとして扱われ通知が煩わしい問題がありました。

そこで、ユーザ毎の token もスプレッドシートで管理・利用することで、ユーザーの投稿になるようにしました。

csgjs-cppを使って3次元ブーリアン演算をやってみた

Thu, 17 Nov 2016 20:09:00 GMT

csg.js の c++版である csgjs-cpp を使って 3 次元ブーリアン演算をやってみました.

はじめに

最近, アルバイトの関係でCSG(空間領域構成法)を扱っています.

空間領域構成法（英: Constructive Solid Geometry, CSG）はソリッドモデリングで使われる技法のひとつである。CSG は手続き的モデリング技法として3 次元コンピュータグラフィックスやCADでしばしば使われる。ブーリアン演算を使って複雑な表面やオブジェクトを生成することができる。

wikipedia - Constructive Solid Geometry

調べてみると各言語でいろんなライブラリが提供されています.

その中でもcsg.jsが簡単で使いやすかったです.

https://github.com/evanw/csg.js

仕事の都合上, c++で実装する必要が会ったのですが, なんとcsg.js の c++版が GitHub で公開されていました.

しかもMIT ライセンス.

ありがたや.

https://github.com/dabroz/csgjs-cpp

csgjs-cpp の Example を公開

この csgjs-cpp リポジトリには csgjs.cpp 本体しか入っていません.

このままでは使いづらかったので, そのヘッダーファイルとサンプルコードを作りました.

https://github.com/icchi-h/csgjs-cpp

csgjs モデルの可視化

こんな簡単に 3 次元の CSG 処理が出来てしまって良いのかというほど手軽に扱える csgjs.

演算結果を確認するためopenFrameworksを利用して, csgjs.cpp 内で定義されている csgjs_model を可視化するプログラムを用意しました.

https://github.com/icchi-h/plot-csgjs-cpp-model>

このサンプルでは, 2 つの正方形モデル(赤, 緑)とその積演算の結果(青)を描画しています.

ただ, ここで一つ問題点.

よく見ると分かるんですが, 演算結果の頂点座標が一つ足りません. 描画部分が間違っているなら正方形モデルにも同じ現象が起こるはず. しかし, 正方形モデルは問題なく描画されています.

時間があるときにチェックしたほうが良さそうです.

おうちハックがしたい

Fri, 15 Jul 2016 12:24:00 GMT

最近「おうちハック」という言葉を耳にした.

おうちをより便利に使うために、ガジェットやサービスを組み合わせたり、工夫や努力を注ぎ込んだおうちハックすること

湯村さんという方が代表として活動しているらしい.
- https://yumulog.hatenablog.com/entry/2016/05/28/222056
ぼへみあさんの活動内容もすごい
- https://bohemia.hatenablog.com/entry/2015/12/01/163521

これらの活動をみた瞬間, 電流が走りました.

僕がこれまでやってきたことや, これからやってみたかったことそのものじゃん! と.

(ちなみにスマートなロボットが作りたいと, こんなものを構想して作ってました)

これからおうちハック関連で何かものづくりできたならと考えています.

今イメージしてるのは家の家電を一括で管理できるユニットです. 上のロボットでもその機能は実装してましたが, 作ってみて思ったのが動く必要ないし,デカくなるし,何より完成度が低かった...

新デバイスの形状イメージは Amazon echo みたいな

今回, おうちハックを見ているうちに「IRKit」なる遠隔リモコン操作できる IoT デバイスの存在を知り, しかもこれがオープンソースになってる!

こういったコード等の資産を利用しながらある程度使い続けられるようなものを作りたいですね.

まぁ時間もガッツリとることは難しいかもですが, 少しづつ空いた時間にやっていきたいと思います.

一段落

Fri, 15 Jul 2016 09:13:00 GMT

久々の更新.

3 月から就活・中間発表・国際学会の論文のタスクが立て続けにふってきたため, なかなか趣味に時間を割くことができなかった.

ようやく何かから追われる生活から一段落.

自由って素晴らしい!!

あと 1 ヶ月ほどで夏休みにも入るし, 何か作りたい.

3軸加速度データを流れるように可視化するツールを作ってみた

Mon, 07 Mar 2016 19:00:00 GMT

久々の更新です.

年始からがっつりなAndroidアプリ開発の仕事に追われバタつく日々を送っておりました.

それはさておき!

研究の一環で加速度を端末姿勢に合わせて補正する処理を開発していて, その処理後の波形を可視化する必要がありました.

今回はProcessingを使い右から左に流れるようなアニメーションで可視化するものを作ってみました.

GitHub

https://github.com/icchi-h/Visualization-ACC

実際の動作

炊飯器(象印 NP-VC10)を初期化して修理してみた

Fri, 05 Jun 2015 16:30:00 GMT

はじめに

少し前の話ですが、朝起きたら炊飯器が壊れてました。

これまで問題なく使えていたので突然の出来事。

炊飯器の時計がストップウォッチのごとく高速で進んでいます。(動画を早送してるわけではありません笑) この状態で炊飯ボタンを押しても10秒過ぎないうちに炊飯完了になってしまい、ご飯が炊けません。

サポートに電話しようにも祝日だったため電話できず、自分で直すことに。

とりあえず電源を完全に落としたいのですが、コンセントを抜いても内部電源があるのか電源が落ちません。調べた所象印のこの機種にはスイッチ等でのリセットは実装されていないようです。

じゃあバラすしかない...

分解

バラします。

ここで厄介なことに、底カバーを止めている4つのネジの内1つが星形。いい感じのサイズのマイナスドライバーでなんとか回せました。

カバーを外すと釜を温める部分が見えてきます。目的の基板は少し奥の方に入ってます。なので手前の白いカバーを外していきます。

白いカバーごと基板を取り出します。この茶色の基板が主に電源を電源あたりを扱っていると思われます。その下に緑色の液晶を制御する基板がありますが、今回の修理には関係ありませんでした。

カバーを外します。

回路の修復と初期化

電流が大きいのか放熱板もしっかりしています。

この辺りで1本束から外れた線が見つかり、回路と干渉しているようでした。適当に直します。

あとついにボタン電池が見えてきました。

しっかりくっついていますが、一度外します。

数十秒放置したところでまた取り付け。

修理後

すると...

無事動作しました。

終わりに

余談ですが、調べてみると、修理した場合は送料込みで1万ほどかかるようです。今回の作業はだいたい1時間かかってないくらいなので、時給1万円と思えばかなりラッキーでした。

あと今回はじめて炊飯器の中身を見ましたが意外と構造が図りやすく電源部分の回路はシンプル。なぜ突然壊れたのかは不明ですが...ともあれ象印さんにはぜひ本体スイッチでのリセットを実装して欲しいですね。

Vimのテーマはatom-darkがいい感じ!

Sun, 22 Feb 2015 09:13:00 GMT

最近、GitHub 製エディタ、Atom のデフォルトテーマである atom-dark にハマっています。

Hybrid や jerrybeans では地味すぎるけど Molokai はメリハリが強すぎる、なんて方にはおすすめのテーマです。lucius に似てるかな。

探してみると Vim 用のテーマも公開されていました。

https://github.com/gosukiwi/vim-atom-dark

インストール

vim ファイルをダウンロードして ~/.vim/colors に移動

git clone https://github.com/gosukiwi/vim-atom-dark.git
mv vim-atom-dark/colors/\*.vim ~/.vim/colors

vimrc または.gvimrc にテーマ適用のコードを記述

$HOME/.vimrc

syntax enable
set t_Co=256
colorscheme atom-dark-256

Galaxy S2(SC-02)にカスタムROM(Android 4.4 KitKat)をインストールしてみた

Thu, 18 Sep 2014 17:08:00 GMT

最近 Android でしか使えないアプリと発見したため、急遽机の中から Galaxy S2(SC-02)を引っ張り出してきました。

しかし iPhone に乗り換えてから長い間使っていなかったため OS とかもえらく古い感じ。せっかくの Android! この機会に 2014.09.18 時点では最新の Android 4.4 KitKat を入れてみることにしました。

うまくいかなかった部分もあったので導入の手順をまとめておこうと思います。

1. 下準備

まずインストールするカスタム ROM を選択します。カスタム ROM にもいくつか種類がありますが有名所の

CyanogenMod
- (Nightly→Snapshot→Stable の順でカスタム ROM の安定度が増します)
- https://download.cyanogenmod.org/?device=i9100
slimKat
- https://slimroms.net/index.php/downloads/dlsearch/viewcategory/1058-i9100

あたりでいいのではないかと思います。どちらもいい感じですが slimkat は比較的シンプルで扱い易いといった印象。

今回は個人的に好みな slimKat を選びました。上のリンクから 2014.09.18 現在で最新版のをダウンロード。

https://slimroms.net/index.php/downloads/dlsearch/viewdownload/1058-i9100/10774-slim-i9100-4-4-2-build-5-official-4068

カスタム ROM だけでは Google Play などの重要なアプリが入っていないためアプリのまとめたれたもの(GAPPS)を以下からダウンロードします。

https://slimroms.net/index.php/downloads/dlsearch/viewcategory/1150-addons4-4

状況に応じて mini、normal、full の中から選んでください。今回はあまりアプリはいらないので以下の mini 版を選択。

https://slimroms.net/index.php/downloads/dlsearch/viewdownload/1150-addons4-4/13394-slim-mini-gapps-4-4-4-build-7-x-187

またルート化したい場合は以下から SuperSU をダウンロード。

https://download.chainfire.eu/372/SuperSU/UPDATE-SuperSU-v1.86.zip

これらの zip ファイルを microSD のルードでもフォルダ内でも適当な場所にコピーします。あとは microSD を Galaxy S2 の中に入れておいてください。

これで下準備は完了です。

2. CWM の書き込み

カスタム ROM をインストールするためには CWM(ClockworkMod)と呼ばれるリカバリーソフトを導入する必要があります。雰囲気でいうなら PC の BIOS みたいなものです。

書き込むためのソフトは Odin を公式からダウンロード。

https://odindownload.com

また CWM はいろいろありますが以下のものを利用。

https://forum.xda-developers.com/galaxy-s2/orig-development/kernel-clockworkmod-recovery-6-0-2-9-t1118693

公式サイトにも記載してあるように

Odin を起動
Galaxy S2 を[ボリュームダウン]、[ホーム]、[電源]ボダンを同時に押してダウンロードモードで起動
Galaxy S2 を PC 接続
Odin の画面で PDA の欄から先ほどダウンロードした GT-I9100JBClockworkMod-Recovery_6.0.2.9.tar を選択
Odin の Start を押す

うまくいけばこんな感じに黄色から緑色に変化すると思います。

あとは勝手に再起動が始まり CWM が起動します。

今後電源が切れた状態で CWM を起動する際は [ボリュームアップ]、[ホーム]、[電源]ボタンを同時に長押ししてください。

3. カスタム ROM のインストール

※スマホのバックアップが必要な方は以下のフォーマット作業に入る前にここで絶対にバックアップをとっておいてください。

今回選んだ CWM ではボリュームボタンが上下、電源ボタンが決定に対応します。

CWM が起動したら以下の順番でスマホの中身を消しておいてください。

wipe data/factory reset
wipe cache partition
mount and strage → format /system

次に install zip → choose zip from external sdcard でカスタム ROM、GAPPS、SuperSU(ルート化が必要な方のみ)の順でインストールしてください。

※ここで

set_metadata_recursive: some changes failed
E:Error in /...
(Status 7)
...

なんかのエラーが出てしまった方は一度違うカスタム ROM をインストールして見てください。

P.S.

CWM が KitKat に対応していなかったことが原因のようです。詳しい対応策は最下部の追記を御覧ください

私の場合は候補にあった CyanogenMod をインストールした後フォーマットしたら slimkat のインストールが出来ました。

以上でインストールに関する作業は終了です。

reboot system now を押せば

こんなロゴが出て起動すると思います。

終わりに

今回インストールして思ったのがカスタム ROM の豊富さです。さすがオープンソースなだけあって海外で非常に幅広く開発が進められています。

こういった自由な開発ができるというのはエンジニアの端くれとして非常にありがたいですね。もちろん技術的な意味でも効果は大きいと思います。

使ってみた感想ですが 3 年以上昔のデバイスである Galaxy S2 上で最新 OS がぬるぬる動いてくれました。ちょっとした感動です。

Android が余っている。放置してあるという方は遊び半分で最近 OS を入れてみるのもいいかもしれません。OS が変わるだけで新しいデバイスも持ったような感覚になれて結構楽しいです w

P.S. (2014.12.28)

上で紹介したカスタム ROM インストール時に発生するエラーですが CWM が KitKat に対応していないことが原因のようです。対応策として gadget geeks さんのコメントを引用します。

Odin 使って、GT-I9100JBClockworkMod-Recovery_6.0.2.9.tar を導入
上記で導入した CWM を使って、KitKat 対応の CWM を導入
- https://forum.xda-developers.com/galaxy-s2/development-derivatives/cwm-clockworkmod-recovery-kit-kat-4-4-t2628412
カスタム ROM 導入

gadget geeks さん、情報提供ありがとうございました。

SainSmart製 Arduino mega 2560 互換ボードでLチカしてみる

Wed, 30 Jul 2014 09:00:00 GMT

おうちはっくに向けてラズパイやら Arduino やらを適当に買い揃えています icchi です.

SainSmart 製の Arduino mega の互換ボードを amazon で購入し, 動作チェックを兼ねて L チカしてみました. 使うにあたって IDE 設定の変更もしたのでそれをメモしておきます.

実際の動作

準備

使ったものは以下の 2 つだけ

サインスマート（SainSmart） MEGA2560 互換ボード R3
赤色 LED 5mm

今回初めて, Arduino は純正品ではなく Amazon で売っている互換品のものを購入しました. 理由は単純に安いから. 純正品の Arduino mega 2560 R3 が約 6000 円なのに対して SainSmart 製の互換ボードはその半分ほどの値段で購入できます. 海外サイトならもっとやすく購入できるでしょう.

こちらのサイトで紹介されている同製品は少しハンダ付けが荒いように感じますが, 今回届いたものは綺麗な製品でした. 運が良かったのか品質が改善されたのか...

あと本体に加えて接続用の USB ケーブルも付いてきました.

IDE の設定変更

コードの書き込みは公式の Arduino IDE を利用.

メニューバーのツールから以下の項目を画像のように設定.

回路

面倒だったので赤色 LED を本体に直刺し. 13pin に LED の+を, GND に-をセット.

プログラム

以下の L チカするコードを書き込み.

void setup() {
  pinMode(13, OUTPUT);
}

void loop() {
  digitalWrite(13, HIGH);   // set the LED on
  delay(1000);              // wait for a second
  digitalWrite(13, LOW);    // set the LED off
  delay(1000);              // wait for a second
}

飛行船の制御その3 - 飛行船操縦システムを作ってみた

Sat, 21 Jun 2014 22:57:00 GMT

3個のモータを制御する

前回まででは1つのDCモーターをプロポからの信号でPWM制御するというものでしたが、今回は実際の飛行船の制御に使う3つのDCモーターの制御に入りたいと思います。

回路はこんな感じ。

前回の内容を3つ分に増やしただけですね。ソフトの方もそんな感じです。

コード

実際に書き込んだコードがこちら

/*
2014.06.03
Airship Control System (ACS)
ver1.00
Haru
*/


//set pin num (3ch)
//--------------------------------------------
// to input
const int rcv1 = 4; // up/down
const int rcv2 = 7; // go/back
const int rcv3 = 8; // left/right

// to output
const int outPin1_1 = 3;
const int outPin1_2 = 5;
const int outPin2_1 = 6;
const int outPin2_2 = 9;
const int outPin3_1 = 10;
const int outPin3_2 = 11;
//--------------------------------------------

// init
//--------------------------------------------
int pulseNum1 = 0;
int pulseNum2 = 0;
int pulseNum3 = 0;

int speedVal1 = 0;
int speedVal2 = 0;
int speedVal3 = 0;
//--------------------------------------------


void setup(){

	//setup pin mode
	//--------------------------------------------
	pinMode(rcv1, INPUT);
	pinMode(rcv2, INPUT);
	pinMode(rcv3, INPUT);

	pinMode(outPin1_1, OUTPUT); // outPin1: back motor
	pinMode(outPin1_2, OUTPUT);
	pinMode(outPin2_1, OUTPUT); // outPin2: left motor
	pinMode(outPin2_2, OUTPUT);
	pinMode(outPin3_1, OUTPUT); // outPin3: right morot
	pinMode(outPin3_2, OUTPUT);
	//--------------------------------------------

	// test pulse
	Serial.begin(9600);
}


void loop(){

	//recieve pulse
	pulseNum1 = pulseIn(rcv1, HIGH);
	pulseNum2 = pulseIn(rcv2, HIGH);
	pulseNum3 = pulseIn(rcv3, HIGH);

	// convert pulseNum(1100~1900) to speedVal(-255~255)
	int speedVal1 = map(pulseNum1, 2000, 1000, -255, 255); // up/down
	int speedVal2 = map(pulseNum2, 2000, 1000, -255, 255); // go/back
	int speedVal3 = map(pulseNum3, 2000, 1000, -255, 255); // left/right

	// constrain speedVal
	speedVal1 = constrain(speedVal1, -255, 255);
	speedVal2 = constrain(speedVal2, -255, 255);
	speedVal3 = constrain(speedVal3, -255, 255);


	//control
	//--------------------------------------------
	// up/down
	//--------------------------------------------
	if( speedVal1 > 20){
		analogWrite(outPin1_1, speedVal1);
		digitalWrite(outPin1_2, LOW);
	}

	else if( speedVal1 < -20){
		digitalWrite(outPin1_1, LOW);
		analogWrite(outPin1_2, -speedVal1);
	} else {
		digitalWrite(outPin1_1, LOW);
		digitalWrite(outPin1_2, LOW);
	}
	//--------------------------------------------

	// go/back
	//--------------------------------------------
	// go
	if( speedVal2 > 20){
		digitalWrite(outPin2_1, LOW);
		analogWrite(outPin2_2, speedVal2);

		digitalWrite(outPin3_1, LOW);
		analogWrite(outPin3_2, speedVal2);

			}
	// back
	else if( speedVal2 < -20){
		analogWrite(outPin2_1, -speedVal2);
		digitalWrite(outPin2_2, LOW);

		analogWrite(outPin3_1, -speedVal2);
		digitalWrite(outPin3_2, LOW);

	// stop
	}
	//--------------------------------------------

	// left/right
	//--------------------------------------------
	// left
	else if( speedVal3 > 20){
		analogWrite(outPin2_1, speedVal3);
		digitalWrite(outPin2_2, LOW);

		digitalWrite(outPin3_1, LOW);
		analogWrite(outPin3_2, speedVal3);
	}

	// right
	else if( speedVal3 < -20){
		digitalWrite(outPin2_1, LOW);
		analogWrite(outPin2_2, -speedVal3);

		analogWrite(outPin3_1, -speedVal3);
		digitalWrite(outPin3_2, LOW);
	// stop
	} else {
		digitalWrite(outPin2_1, LOW);
		digitalWrite(outPin2_2, LOW);

		digitalWrite(outPin3_1, LOW);
		digitalWrite(outPin3_2, LOW);

		digitalWrite(outPin2_1, LOW);
		digitalWrite(outPin2_2, LOW);

		digitalWrite(outPin3_1, LOW);
		digitalWrite(outPin3_2, LOW);

	}
	//--------------------------------------------
	//--------------------------------------------


	// sirial monitor
	Serial.print("pulseNum1: ");
	Serial.print(pulseNum1);

	Serial.print(", pulseNum2: ");
	Serial.print(pulseNum2);

	Serial.print(", pulseNum3: ");
	Serial.print(pulseNum3);

	Serial.print(" | speedVal1: ");
	Serial.print(speedVal1);

	Serial.print(", speedVal2: ");
	Serial.print(speedVal2);

	Serial.print(", speedVal3: ");
	Serial.println(speedVal3);

}

これといって前回と大きな違いはありません。

今回の部分で飛行船の制御システムはほぼ完成したので、あとはこの回路を小型化して飛行船に下腹部に取り付ければひとまず完成といったところ。

完成がイメージできるようになってきたので、ますます飛行船を飛ばしてみたいという思いが強くなります。

実際の動作

最後に実際に動いている動画を載せておきます。

Reference

飛行船の制御その2 - プロポからArduinoを使ってDCモーターをPWM制御してみた

Sun, 15 Jun 2014 09:13:00 GMT

プロポ信号から PWM 制御

前回まではプロポからの信号を Arduino を使って読み取ることまでは行いましたが、今回はその信号をもとにモータードライバを使って DC モーターの PWM 制御を行いました。

PWM の出力にあたっては以下のサイトを参照しました。ありがとうございます。

https://monoist.atmarkit.co.jp/mn/articles/1401/07/news003_2.html

コード

今回書いたコードは以下のとおり

/*
controlDCmotorPWM.ino
2014.05.29
Control DC motor with PWM using propotional system and Arduino
ver1.00
Haru
*/


//set pin num
//--------------------------------------------
// input
const int rcv = 4; // up/down

// output
const int outPin1_1 = 3;
const int outPin1_2 = 5;
//--------------------------------------------

// init
//--------------------------------------------
int pulseNum = 0;
int speedVal = 0;
//--------------------------------------------


void setup(){

    //setup pin mode
    //--------------------------------------------
    pinMode(rcv, INPUT);

    pinMode(outPin1_1, OUTPUT); // outPin1: DC motor
    pinMode(outPin1_2, OUTPUT);
    //--------------------------------------------

    // test pulse
    Serial.begin(9600);
}


void loop(){

    pulseNum = pulseIn(rcv, HIGH); //recieve pulse
    int speedVal = map(pulseNum, 2000, 1000, -255, 255);
    // convert pulseNum(1100~1900) to speedVal(-255~255
    speedVal = constrain(speedVal, -255, 255); // constrain speedVal

    //control
    //--------------------------------------------
    if( speedVal > 20){
        analogWrite(outPin1_1, speedVal);
        digitalWrite(outPin1_2, LOW);
    }

    else if( speedVal < -20){
        digitalWrite(outPin1_1, LOW);
        analogWrite(outPin1_2, -speedVal);
    } else {
        digitalWrite(outPin1_1, LOW);
        digitalWrite(outPin1_2, LOW);
    }
    //--------------------------------------------


    // sirial monitor
    Serial.print("pulseNum: ");
    Serial.print(pulseNum);

    Serial.print(" | speedVal: ");
    Serial.println(speedVal);
}

処理の流れを簡単に説明すると

プロポから受け取った 1100~1900 までの信号を PWM 出力できる-255~255 に map 関数を使って変換。

※ただし、プロポからの信号に若干の誤差が含まれるためまれに-255~255 の範囲を超えた出力をしてしまう時があり、そうなると DC モーターにかかる電圧が急激に変動したりするので constrain 関数を使い最小値と最大値がそれぞれ範囲内に収まるように調節します。

あとは出力に設定したピンで analogwrite 関数を使い PWM 出力をしてあげればプロポのレバーの強弱に合わせて DC モーターの強弱も強弱します。

※ここでも、PWM が負の値の時に if 文の中身でマイナスを付けて打ち消さないと動作不良の原因になるので注意してください。

今回の作業でだいぶ飛行船の制御に近づいたように感じます。ただモーターが回るだけでもプロポから操作するだけで結構楽しいです(笑)

実際の動作

最後に実際に動かしている動画を載せておきます。

Reference

Processingを使った遅延再生システムを作ってみた

Sat, 07 Jun 2014 09:32:00 GMT

はじめに

所属しているバレーボール部顧問の先生にバレーに使えるものを作って欲しいとお願いされていました。

以前チームが試合に負けて悔しかったのをきっかけに Processingで映像を数秒遅らせて再生するプログラムを作ってみました。

実装 with Processing

Processingだと異なるマルチプラットフォームでも簡単に動かすことができるので便利です。

実装方法はいたって簡単。

PCに付いているライブカメラをpicture型のオブジェクトに読み込み、カメラの画像データをPImage型の用意したブッファーに溜め混んで古いものから再生するだけです。

コード

import processing.video.*;

final int delaytime = 2;

Capture cam;
PImage[] buffer;
int nFrames = (60/4)*delaytime;
int iWrite = 0, iRead = 1;

void setup(){
  size(1280, 720);

  String[] cameras = Capture.list();

  if (cameras.length == 0) {
    println("There are no cameras available for capture.");
    exit();
  }
  else {
    println("Available cameras:");
    for (int i = 0; i < cameras.length; i++) {
      println(cameras[i]);
    }

  cam = new Capture(this, cameras[0]);
  cam.start();
  buffer = new PImage[nFrames];
  }
}

void draw() {
  if(cam.available()) {
    cam.read();
    buffer[iWrite] = cam.get();
    if(buffer[iRead] != null){
      image(buffer[iRead], 0, 0);
    }
    iWrite++;
    iRead++;
    if(iRead >= nFrames-1){
      iRead = 0;
    }
    if(iWrite >= nFrames-1){
      iWrite = 0;
    }
  }
}

実際の動作

実際に2秒程度遅延させている様子です。

終わりに

MacBook Pro retina(外部グラフィックなし)で動作させてみましたが、10秒程度の遅延でも問題なくヌルヌル再生できました。フォームチェックなどバレー以外にも様々なスポーツで使う機会があるのでは無いかと思います。ただこういった遅延システムの製品を買うと数万するらしいです… ハード、ソフト、方法は様々ですがもう少し安くならないと予算の少ない部活などで手を出すには少々ハードルが高い気がします。

飛行船の制御その1 – プロポからの信号をArduinoを使って読み取ってみた

Tue, 27 May 2014 22:57:00 GMT

はじめに

2 ヶ月ほど前に化学系の学科の先生から飛行船を作るからその制御をやってもらえないかと頼まれたことからこの飛行船プロジェクト?は始まりました。

これまで AR.Drone の制御に手を加えたりはしていましたが、ただ浮くだけの飛行船を一から制御なんて完全にはじめての経験。でも面白そうなのでとりあえず的当にやってみることに。

飛行船となると航空力学?とかかなり頭のいる話になるのかと思いきや、調べてみると案外規模の小さい飛行船ではそこまで気にしなくてもいいともわかってきました。

最近になって注文していた部品も届いたものの、本来の研究の方でなかなか時間も取れずにいましたが最近少し進展があったのでまとめることに。

届いた部品一式。

プロポ T6J

送信機は自前で作ろうかと思いましたが、競技に出るには正規のコントローラーを使う必要があるということでプロポを買ってもらいました。

今回使った T6J は双葉さんから発売されている 6CH の優れもの。飛行船の制御にはハイスペックすぎる気もしますが(笑)。スペックが高すぎてはじめはずっとこれの説明書を読んでました。

プロポからの信号を受信

前置きが長くなりましたが、今回は制御の第一歩。リモコンからの信号の解析。

プロポ T6J から送られる信号を受信機 R2006GS で受信し、その受信機からの信号を Arduino で読み取ってみました。

R2006GS の仕様書がネットで手に入らなかったので的当にテスターを使い端子を調べながら、下の写真のように接続。受信機の 1~6 は CH、B が電源 (右から GND,VCC) です。

コントローラーとの対応は以下の表にまとめました。

計測にあたっては Arduino の pulseIn 関数で PWM 信号を数値がするのが手軽そうでした。計測のためのコードは以下のサイトを参照。

https://robokosaku.blog115.fc2.com/blog-entry-1093.html

ありがとうございます!

実際の動作

実際計測してみると各 CH から 1100~1900 のパルス数が出ています。リモコンからしっかりした値が計測できたので、今度は PWM を作ったモーター制御部分を実装すればシステム部分は大方出来てくるのではないでしょうか。

最後に計測の動画を載せておきます。

Reference

MacにLaTeXiT (+LaTeX) をインストール日本語化して使ってみた

Sat, 03 May 2014 12:00:00 GMT

追記.
2016年12月に内容を更新しました

これまでMacで数式を書くときはGrapherから画像を作っていたのですが、複数行の数式となるとさすがに面倒なので今回LaTeXiTを使ってみることに。当然TeXなので数式を作成にも融通が利いて便利です。

1. TeX環境の導入

今回導入するMacにはまだTeXを入れていなかったので一からTeX環境を作ります。

インストール環境

Mac OS 10.12- Sierra

参考ページが404になっていたので、適当にググってもらえればみみつかるはず。

2. LaTexiT最新版をダウンロード

MacTexに同封されているLaTeXiTは最新版でない可能性があります. そのため公式サイトからLaTexiTを入手してください。

https://pierre.chachatelier.fr/latexit/latexit-downloads.php

3. LaTeXiTを日本語対応させる

この状態でも日本語が含まれていない数式では問題ありませんが、含まれているものの場合エラーが出てしまいます。以下のようにLaTeXiTの設定を変更してください。

LaTeX、dvipdfのパスは以下のように設定。

LaTeX: /usr/local/texlive/2015basic/bin/×86_64-darwin/platex
dvipdf: /usr/local/texlive/2015basic/bin/×86_64-darwin//dvipdfmx

上記パスの太字部分はインストールしたTexに合わせて変更してください。

not two-byte family... エラーに対応するため, 日本語部分に2バイトに直すコマンドを使います。

\textmc{入力したい日本語}
\text{入力したい日本語}　※\textmcは明朝フォント指定

これで日本語が数式内にある状態でもコンパイルが通るようになりました。

ただし、日本度を多用する場合は\textを使うのも面倒なので環境設定からテンプレートでjsarticleクラスを使うほうが良いかもしれません。

Tips

Grapherで数式を作った後に右クリックでTeXのコードをコピー出来ます。TeXのコード忘れた時に便利です。

終わりに

使ってみた感想ですが、やっぱりTeXに慣れていればGrapherを使うよりも圧倒的に早く記述できますね。これでPages、Keynoteにガンガン綺麗な数式を盛り込めます。

P.S.

Twitter上でご助言をいただき、数式のコードを修正しました。場合分けを利用する時はcasesを使うとコードもだいぶスッキリします。

TeXに関しては素人なのでこういった知らない部分を教えていただけると非常に助かりますね。エラーが出ないとついこれでいいやとなってしまうので(^_^;)

インプレッサスポーツにフットランプを取り付けてみた

Wed, 30 Apr 2014 16:08:00 GMT

はじめに

インプレッサスポーツには標準でフットランプが装備されていますが、乗車後最大 30 秒までしか点灯できない仕様になっています。

友達の車に乗った際に運転時に点灯しているフットランプの印象が思いの外よかったので今回インプレッサにも取り付けてみることに。その工程を簡単にまとめてみました。

準備物

amazon さんでいくつか必要なものを購入。これまで内装系をいじったことはなかったので、配線も含めて一から購入しました。

購入した次の日に到着、さすがです!!

今回購入したのは以下の 5 点

取り付け

電源の確保

インプレッサスポーツには運転席右下にコイントレーがついていますが、それを外すと、写真のようにヒューズ BOX が見えます。

ヘッドライト点灯とフットランプを連動したかったのでヒューズは、以下の図のように No.14 リアコンビランプから取りました。意外と硬いので取り付けにはラジオペンチなど挟む工具があると捗ります。

配線

運転席側のランプはヒューズの位置が近いので問題無いですが、助手席側にはうまいこと電線を持ってくる必要があります。

配線を通す専用工具も売っているのですが高いので、外に転がっていた虫網で的当に作りました。

こんなかんじで挟める細い棒であれば何でもいいです。

↓

あとはこれをペダル左側の穴に電線を挟んで通します。

うまいこと行けば助手席側から見えるはずです。

あとはこれに接続用のコネクタを使って LED と繋げます。

最後に適当な位置に LED を貼り付ければ完成です!!

ただ、LED1 個タイプの物を使ったのに予想以上に光量が多くやんちゃな感じになってしまいました(^_^;) また暇があれば可変抵抗でも挟んで調節できるようにしておこう。

インプレッサスポーツにデイライトを取り付けてみた

Tue, 01 Apr 2014 09:16:00 GMT

郵便局の車に付いている青いライトに前々から興味があったのでインプレッサスポーツに付けてみました。

事故率低下の効果もあるんだとか。

今回買ったのは amazno で評価も高く値段も比較的安かったこちら

MIRAREED(ミラリード) ディマーカーライトパルス感知式ブルー

値段も約 3 千円弱とお手頃価格。取り付けもドライバー 1 本で済み、非常に簡単!

パッケージの中身は

デイライト本体
パルス感知センサー
取り付けステー
配線コード
粘着シール等

実際に取りけていきます。

バンパー裏にある黒いカバーが邪魔なので固定しているピン?のようなものを取り外し

センサーをヒューズボックスの側面に貼り付け

トレーをフロントの好きな位置に固定し、そこにライトを取り付けます。配線を簡単にまとめ

このタイプはバッテリーから直接電源を取るタイプなのでそのまま取り付け。ただ直付けは若干暗電流が気になります。

作業自体は 1 時間もかからない位で終了

こんな的当な配線でいいのだろうかと心配になります(汗)

実際に点灯している時の画像がこちら

値段の割には見た目もスッキリして結構気に入ってます。自作 PC でもそうですが光物は楽しいですね。

取り付けから 1 ヶ月ほど立ちますが無事問題なく動作しています。

約半世紀前のレコードプレーヤーの修理してみた

Tue, 18 Mar 2014 12:13:00 GMT

この前、ばあちゃんが誕生日を迎えるので何かしてあげたいと思っていた矢先、ふとばあちゃんが「久々にレコードが聞きたいな」と言っているのを耳にしました

これだと思い壊れたレコードプレーヤーを直すことに。とりあえずホコリまみれレコードプレーヤーを引っ張っり出してきました。

これがその YAMAHA 製レコードプレーヤー。めっちゃ重かった...

50 年くらい前に買ったものらしいのですが、なかり頑丈な作りで想像よりもかなりしっかりしてます。

50 年前となると僕よりも 2 倍以上年上の大先輩。すごく歴史を感じます。

ばあちゃんによるとターンテーブル(レコードを載せて回る台)が動かないのに加え、ダイアルを回しても反応がないらしい。

電源を入れるとディスプレイが光るので回路は生きてる。あと確かにターンテーブルは回らないが何かの動作音は聞こえます。

とりあえず簡単にばらしてみました

上の部分を引っこ抜くと

よく見ると

これだ...完全にベルトっぽいのが切れてました。

調べてみると大抵のレコードプレーヤーは軸部分の回転をベルトを介してターンテーブルを回しているようで、この手の故障が一番多いんだそうです。

ベルトを接着剤を使って補修したところで、ダイアル部分の修理へ。

ただ...実はこのダイアル壊したの僕なんですよね...

小さい時に何かと機械類を触るのが大好きだったんですが、当然こういった大きな機械には興味津々なわけでダイアルと回しまくっているうちにダイアルが空回りしてしまうようになったという...(汗)

約 20 年の月日を経て自分で壊したものを自分で直す時が来るなんて...

と少し時の流れの早さと自分の成長にしんみりしたところで回路部分を本体から外します。

これが 50 年前の回路か、と思いふける間もなく構造のシンプルさに感動しました。

なんとダイアルの先は糸で回路部分のダイアルと直結しているだけでした。ディスプレイのゲージもその動作に連動するように棒が動くようになっているだけ。

切れた糸を新品のタコ糸に交換してあげると無事ちゃんと直りました!

今回の修理で特に驚いたのが昔の製品のシンプルさと頑丈さです。今よりもひとつの製品を長く大切に使っていたってことが製品を見て伝わってきました。

昔の人は良い物作るなと関心しまくりです。

そういう点は今の人々も見らなうべきだと思います。個人的には新しいものも大好きですが、長く使い愛着のわいた製品はもっと好きになるわけで。

あとレコードが直ったことを言うとばあちゃんはものすごい喜んでくれました。満足いく誕生日プレゼントになったようで良かったです。

Aruduinoを使った重量計測システムを作ってみた

Sat, 15 Feb 2014 16:30:00 GMT

はじめに

今回はあるものづくりをする過程で重量計算をする必要が出てきたので Arduino と圧力センサーを使って簡単なものを作ってみることにしました。

要件は以下のようなものです。

精度はあまり求めずおおまかな重量測定
ある一定の重量を超えた時にブザーを鳴らす

また重量は通常では 20kg 以下を想定しています。

1. 準備物

Arduino Uno Rev3 ATmega328 マイコンボード A000066
圧力センサ FSR-406
電子ブザー HDB06LFPN
抵抗 (今回は 10kΩ を使用)

主な準備物は上の 3 つ。

Arduino 以外は全ていつもお世話になっている秋月電子さんで購入しました。

2. 接続

Arduino との接続も分圧を利用するだけなので非常にシンプル。

3. 重量表示

表示に関してはシリアル通信を使って PC モニタで見てももちろんいいんですが、以前作った I2C 通信の LCDがあったので今回はそれを使いたいと思います。

LCD モジュールの接続は上の接続例にそのまま以前の接続を追加してください。

4. プログラム

測定した電圧を重量に近似する計算部分は以下のサイト様のものを使わせていただきました。ありがとうございます。

https://www.eleki-jack.com/FC/2011/10/arduinofsr2.html

あとはそれを使ってプログラムを Arduino に書き込むだけ。

書き込んだソースはこちら

/*
use follwing device
-LCD(AQM0802A)
-FSR406
*/

#include <Wire.h>
#include <ST7032.h>

const int hone_pin = 11;
const int sensor_pin = 1;
float data = 0;
float weight = 0;
float R1 = 10.0; // register R1
float lim = 20000;
ST7032 lcd;

float calweight(float data);
void setup() {
    pinMode(hone_pin, OUTPUT);
    lcd.begin(8, 2);
    lcd.setContrast(30); // コントラスト設定
    lcd.print("Weight");
    lcd.setCursor(7, 1);
    lcd.print("g");
}

void loop() {
    data = analogRead(sensor_pin);
    weight = calweight(data);
    if(weight<0.5) weight = 0.0;  lcd.setCursor(0, 1);  lcd.print(" ");  lcd.setCursor(0, 1);  lcd.print(weight, 1);  if(weight>lim) digitalWrite(hone_pin, HIGH);
    else digitalWrite(hone_pin, LOW);
    delay(250);
}

float calweight(float data){
    float g;
    float rf;

    rf=R1*data/(1024.0-data);
    g = 880.79/rf - 0.05;// + 47.962;
    // fg= 1273.1/rf + 393.44

    return g;
}

終わりに

実際に測定している画像がこちら

これでひとまず完成です。プログラムは的当に作ったものなのでバグ等あったらすみません(笑)

あと圧力センサの特性として結果が安定するまでに多少時間がかかります。例えば 10 の圧力を加えた際に 9 まではすぐに反応するがなかなか 10 まではいってくれません。

より精度を求めるならば実際の電子体重計で使われているひずみゲージ式ロードセルを使うのが一番だと思います。自分はじめは使ってみようと思ったのですが用意する手間と歪みによる電気特性の変化を調べるのが面倒ということもあって今回は手軽な圧力センサを選びました。

圧力センサはほんとに手軽なので精度を要しないちょっとした工作には向いているのではないかと思います。

AQM0802AをArduinoで使ってみる。

Mon, 13 Jan 2014 15:42:00 GMT

学校の実験で使うため秋月で手軽な LCD を購入することに。

そこで見つけたのがこちら

AQM0802A-RN-GBW

I2C 通信を使った 8*2 の手軽な LCD です。なんといってもお値段が 320 円というのが魅力。

今回はこれを Arduino を使って動作させてみようと思います。あとこれを使うにあたって、つまずいたところもあったので簡単にまとめておきます。

1. 準備物

制御に用いる Arduino

Arduino Uno Rev3 ATmega328 マイコンボード A000066

加えて、このモジュールを使用するために必要な電子部品

10kΩ 抵抗*2
1μF コンデンサ*2

必要物はこれだけですが、AQM0802A には付属していないので用意する必要があります。

2. ピッチ変換 (ブレッドボードで使う方のみ)

ブレッドボード上でテストしようと思ったのもつかの間、このモジュールのピッチは 1.5mm とブレッドボードのピッチ幅よりも小さいので以下のリンクのようなピッチ変換済のもの、またはピッチ変換基板を用意してあげると便利です。

図のように頑張って足を広げてもブレボにはまらなかったため

ユニバーサル基板をカットして

こんな感じに的当にハンダ付けしました。

3. Arduino との接続

接続表を作ってみましたので、それを見てください

4. プログラムの書き込み

この LCD は I2C 通信を使っているため通常の LCD ライブラリでは動作しません。

AQM0802A が簡単に使えるライブラリが制作、公開されていましたのでこちらを使わせてもらうことにしました。(ありがとうございます!!)

https://ore-kb.net/archives/195

ライブラリの導入についてはリンク先サイトでも書かれていますが、 zip ファイルを解凍して出てきたフォルダ「arduino_ST7032-master」を「ST7032」にリネームし、arduino の「libraries」フォルダにコピーするだけ。

自分の場合は mac 環境なので書類 →Arduino→library の中にコピーすれはお k

ただ上のリンク先の簡単な使い方ではなぜか動作せず、lcd の bigin 関数を入れてやれば問題なく動きました。

ソースは以下もので動くはずです。

#include <Wire.h>
#include <ST7032.h>

ST7032 lcd;

void setup(){
    lcd.begin(8, 2);
    lcd.setContrast(30);
    lcd.print("HaruLab");
}

void loop(){
    lcd.setCursor(0, 1);
    lcd.print("2525");
}

あとはこれを Arduino に書き込んであげれば終了。

うまく行けばこのように動作するはず。

おまけ. 引っかかった問題点

今回初めて I2C 通信の LCD を使い、リファレンスもあまり読まないままに的当にテストしていました。抵抗だけ用意して Arduino と LCD をつなげていたため当然動作するはずもなくハンダ付けの際に IC 焼いちゃったかな? 位で考えてました(笑)

ただ、ふと研究室で AQM0802A のデータシートを見た時...

明らかに電源供給でコンデンサを使っているがわかりますよね w

手を動かす前にデータシートはちゃんと見るべきですね。

反省です w

Reference

Arduino Uno Rev3 ATmega328 マイコンボード A000066

温湿度計を修理してみた

Sun, 07 Jul 2013 19:06:00 GMT

この前、部活顧問の先生の部屋で壊れた TANITA 製温湿度計が置いてあったので貰って来ました。

話によると落としたら壊れたらしく、これなら簡単に直せそうな気がしました。

実際、部品は自体に大きな損傷は無さそうです。

こういうときはとりあえずバラす。

基板にも問題無さそうで、恐らく接触不良と判断。どうやら液晶を固定するプラスチックの部分が折れてしまっていたようです。

ただいまいちゴムのような部品の使い方がわからなかったのですが、どうやら導電ゴムのようで液晶と基板を繋げながら固定していたようです。

部品を本来あった場所に取り付け、折れた部分は接着剤で修復。

電池を電源を入れてあげると無事に表示されました。

最後に元通りに組み立てて修理完了。

案外簡単に直ったので良かったです。このまま研究室用にもらっちゃおうかと思いましたが、ちゃんと顧問の先生にお届けしました。

Arduinoを使ったmicroSD記録のデータロガー(温度、照度)を作ってみた

Tue, 09 Apr 2013 16:32:00 GMT

はじめに

父親が小屋の気温や照度のデータが取りたいと言っていたのでデータロガーを作ってみました。温度と照度を 10 分間隔で microSD に csv 形式で保存する仕様です。

今回使うセンサは以下の 2 つ

温度センサ LM61CIZ 下図右
明るさセンサ TEMT6000 下図左

microSD との接続には秋月で売っているマイクロＳＤカードスロットＤＩＰ化キットを使いました。ブレッドボードで使う場合にはピンヘッダをハンダ付けすると便利です。

接続表

まず microSD を繋げている時に問題が･･･ arduino の出力電圧が 5V に対し microSD の動作電圧は 2.7 ～ 3.6V 手元にあった 270Ω と 510Ω で分圧することで5*(510/(510+270))≒3.2V

良い感じに減圧出来ました。最後に 2 つのセンサを取り付けます。 TEMT6000 は上から出力電圧、GND、5V LM61CIZ は文字が書いてある面から見て左から 5V、出力電圧、GND 詳しくは各データシートを参照してください。各端子繋いであげるとこれでハードは出来上がりです。

あとは arduino にプログラムを書き込むだけ。今回のプログラムで microSD 関連は公式のライブラリもあったんですが、公式ライブラリをより使いやすく改良された方がいたのでこちらのサイトのものを使わせて頂きました。実際に microSD に書き込まれたログデータがこちら

arduino に書き込んだスケッチは以下のとおりです。

/*
* using DIP kit
* 2013-4-7
*log temp illumi
*/

#include<SD.h>

const int chipSelect = 10;

int ans , temp , tv ;
float VDD=5.0,R0=1,R1=10;
int lux;
long date=0;

// Subroutine for writing data in SD card,
void PrintToFile(String dataIn){
  File dataFile = SD.open("datalog.txt", FILE_WRITE);  // define the filename,
  if (dataFile) {                                      //if the file in the SD card was open to wrihte,
    dataFile.println(dataIn);                          // write data into the file,
    dataFile.close();                                  // close the file,
    Serial.println(dataIn);                           // print to the serial port too,
  }else {                                              // if the file isn't open, pop up an error message,
    Serial.println("error opening file");
  }
}

void setup(){
  Serial.print("SD read write test start...\n");

  //analogReference(INTERNAL);                         //use internal voltage(1.1 V) as the analog input reference, アナログ入力の最大電力を1.1 Vに設定
  Serial.begin(9600);
  pinMode(10, OUTPUT);
  Serial.print("Initializing SD card...");          //check the Serial communication
  pinMode(chipSelect, OUTPUT);                       //Define chipselect terminal 8 as output,
  if (!SD.begin(chipSelect)) {                       // check the SD card is available or not,
    Serial.println("Card failed, or not present");  // in the case of SD card error,
  }else{
  Serial.println("Card initialized.");              //in the case of SD card is available,
  }

  PrintToFile("date,temp,illumi");
}

void loop(){

  //calculating temp
  ans = analogRead(0);
  tv  = map(ans,0,1023,0,5000); //convert voltage sensor
  temp = map(tv,300,1600,-30,100); //convert temp voltage

  //calculating illumi
  int indata=analogRead(1);
  float ar=(indata*VDD/1024)/R1;
  lux=(20.0/0.01)*ar;

  //calculating date
  date = (millis()/1000/60); //insert elapsed time (minute)

  String dataString = "";
  dataString += date;
  dataString += ",";
  dataString += temp;
  dataString += ",";
  dataString += lux;

  PrintToFile(dataString);

  delay(1000*60*10); // run every 10 minutes
}

今回は microSD に書き込むデータロガーですがネットワークと接続して cosm などのサービスを利用するとスマホと組み合わせたりできて、より面白いような気がします。長期休みも終わり学校が始まったので更新の間隔も広まりそうですが、ちょくちょく何か面白いものを作って行きたいですね。

Reference

Arduino Uno Rev3 ATmega328 マイコンボード A000066

LCD SD1602VBWB を AVR attiny2313 で動作チェック

Fri, 22 Mar 2013 18:43:00 GMT

前に 7 セグ LED の表示を行いましたが、今回は LCD の表示を行ってみます。

使用する主な部品、環境は以下のとおり

LCD SD1602VBWB-XA
AVR attiny2313
atmel studio6.1

このままではブレッドボード上で使うときに面倒なのでピンヘッダをハンダ付けします。ちゃちゃっとハンダ付けをして LCD の準備は完了。

あとはブレッドボード上で LCD に電源、AVR をつなげます。

今回は AVR の出力にはポート D を利用しました。

PD0:RS
PD1:E
PD2:DB4
PD3:DB5
PD4:DB6
PD5:DB7

このように AVR と LCD 接続。コントラストとバックライトの電圧には半固定抵抗を使うと調節時に便利です。

キャラ型の LCD は 4bit モードで制御できるのでつなげるピンが少なくて楽ですね。

これでハードの準備は完了。あとはソフトの準備をしていきます。

今回 LCD を AVR で動作させるにあたって勉強も兼ねて制御関数を少し自分で作ってみて動作はしたんですが、結局のところ自作関数では機能が少ないので公開されているライブラリを利用しました。

やっぱり公開されているものは作りこみもすごいですね(^_^;)

今回利用させてもらったのはこちら

https://www.vector.co.jp/soft/dos/hardware/se476452.html

ダウンロードしたらライブラリフォルダに入っている 7 個のファイルをすべて atmel studio のプロジェクトにドラッグ&ドロップ

次に lcdConfig.h を開いて 13 行目をコメント

68 行目以降を AVR と LCD を繋げたように変更

/* レジスタ選択 */
#define PIN_LCD_RS_PORT LCD_PORTD.P0
#define PIN_LCD_RS_DDR LCD_DDRD.P0
#define PIN_LCD_RS_PIN LCD_PIND.P0

/* Read/Write 選択 */
#define PIN_LCD_RW_PORT LCD_PORTC.P5
#define PIN_LCD_RW_DDR LCD_DDRC.P5
#define PIN_LCD_RW_PIN LCD_PINC.P5

/* Enable 信号 */
#define PIN_LCD_E_PORT LCD_PORTD.P1
#define PIN_LCD_E_DDR LCD_DDRD.P1
#define PIN_LCD_E_PIN LCD_PIND.P1

/* DB4 */
#define PIN_LCD_DB4_PORT LCD_PORTD.P2
#define PIN_LCD_DB4_DDR LCD_DDRD.P2
#define PIN_LCD_DB4_PIN LCD_PIND.P2

/* DB5 */
#define PIN_LCD_DB5_PORT LCD_PORTD.P3
#define PIN_LCD_DB5_DDR LCD_DDRD.P3
#define PIN_LCD_DB5_PIN LCD_PIND.P3

/* DB6 */
#define PIN_LCD_DB6_PORT LCD_PORTD.P4
#define PIN_LCD_DB6_DDR LCD_DDRD.P4
#define PIN_LCD_DB6_PIN LCD_PIND.P4

/* DB7 */
#define PIN_LCD_DB7_PORT LCD_PORTD.P5
#define PIN_LCD_DB7_DDR LCD_DDRD.P5
#define PIN_LCD_DB7_PIN LCD_PIND.P5

lcdLibPrv.h の 7，8 行目を以下のように変更

#include "./lcdlib.h"
#include "./lcdConfig.h"

最後にプロジェクトの main 関数に以下のように書きました。

あとはいつもどおりビルドして AVR に書き込めば完了です。

あとなぜか C++でプロジェクトを作るとビルド時にエラーが出ました。c++のソースファイルから c で書かれたヘッダファイル上の関数を呼び出すのってなにか問題あるのかな？

カウンターのプログラムを書き込んで動作している様子です。

写真にも写ってるように電子工作してる時にはよく 3 端子レギュレータで作った 5V 電源使ってるけど USB にも 5V が通ってるんだから USB から電源作れそうな気がする。

7セグLED ダイナミック点灯制御をやってみた

Tue, 19 Mar 2013 22:06:00 GMT

今回はこの前時間の都合でできなかった 7 セグ LED のダイナミック点灯制御を行ってみました。

ダイナミック点灯とは簡単に言うと LED を制御するピンの本数を少なくできるというもの。 1 個の 7 セグ LED をで数字を表示するには 7 個のピンを制御する必要があり、3 個の 7 セグになれば 21 個と結構な数になります。これを少なくするために 7 セグ LED の各発光場所ごとにまとめてしまいます。

だたこれだと 3 つの 7 セグ LED とも同じ数字が表示されますが、表示させる LED を高速で切り替えることによって解決しようという考え。これは電光掲示板なんかでも使われる技術で案外身近にあったりするみたいです。

早速 3 個の 7 セグ LED の各発光場所ごとにまとめて前回同様 AVR の D ポート 0 ～ 6 に接続、数字を表示させてみます。

同じ信号がそれぞれの 7 セグ LED に送られているので当然すべて同じ表示光らせる 7 セグ LED を切り替えるために、各 7 セグ LED とグランドの間にトランジスタを入れて各トランジスタのベースに AVR の B ポート 0 ～ 2 を接続します。

だいぶ配線がゴチャって来ました(^_^;) 最後に適当に数字をカウントするプログラムを書いて AVR に書き込んでおしまい。切り替えの間隔を 200ms にしたのがこちら

間隔を 5ms まで小さくしてみます。

5ms まで下げると人間の目では切り替えを認識できないですね。 7 セグを使うことはほぼないと思いますがとりあえずお勉強ということで。

最後に AVR に書き込んたコードでも載せておきます。

#include <avr/io.h>
#include <util/delay.h>

void LED_output(char num){
    switch (num){
        case 0:
        PORTD = 0b00111111;
        break;
        case 1:
        PORTD = 0b00000110;
        break;
        case 2:
        PORTD = 0b01011011;
        break;
        case 3:
        PORTD = 0b01001111;
        break;
        case 4:
        PORTD = 0b01100110;
        break;
        case 5:
        PORTD = 0b01101101;
        break;
        case 6:
        PORTD = 0b11111101;
        break;
        case 7:
        PORTD = 0b00000111;
        break;
        case 8:
        PORTD = 0b01111111;
        break;
        case 9:
        PORTD = 0b01101111;
        break;
    }
}

int main(void)
{
    DDRD = 0b111111111;
    DDRB = 0b111111111;

    PORTD = 0b00000000;
    PORTB = 0b00000000;

    unsigned char num = 0;
    char dig = 1;
    char delay_interval = 5;

    while(1) {
        // devide num
        unsigned char dig1 = num % 10;
        unsigned char dig2 = (num/10)%10;
        unsigned char dig3 = (num/100)%10;

        for(int i=0; i<200; i++){
            switch (dig) {
                case 1:
                PORTB = 0b00000001;
                LED_output(dig1);
                break;
                case 2:
                PORTB = 0b00000010;
                LED_output(dig2);
                break;
                case 3:
                PORTB = 0b00000100;
                LED_output(dig3);
            }

            _delay_ms(delay_interval);
            dig++;
            if(dig==4) dig = 1;
        }

    num++;
    }

    return 0;
}

7セグメントLED NKR161で遊んでみた

Fri, 15 Mar 2013 00:14:00 GMT

本日、PC パーツなどを片付けていたんですが、ふとボロいダンボールを覗いてみると、そこにはかなり昔の電子工作キットが。

保存が悪いものは使えなさそうでしたが、袋に入っていたおかげで状態がいい 7 セグメント LED を見つけました。父親に聞いてみると 30 年ほど前のものらしい。

先輩にあたる部品に敬意を表していざ google で検索。

こちらのメーカー HP によると、この 7 セグの品番 NKR161 は N が 7 セグ、K がカソードコモン、R が赤色を意味してるらしい。

さっそく、動作するかチェック

おぉ無事点灯！！ちょっとした感動モンです(^o^ 似たような品番のデータシートとピン配置が同じで助かりました。

せっかく動作したので数字を表示させるプログラムを AVR に書き込んでみました。

ほんとうは 7 セグ LED が 3 個あったのでダイナミック制御を試してみたかったんですが、これからボードに行くので時間が足りませんでした。

また帰ってきてから続きをやりたいと思います。

マルチバイブレーターを作ってみた

Fri, 08 Mar 2013 10:47:00 GMT

トランジスタ 2 つを使ってマルチバイブレーターを作ってみました。電源は 3 端子レギュレーターを使って 5v で動作させてます。

これはトランジスタのベース前にコンデンサを挟むことによってその静電容量に比例して一定時間のパルスが発生されるというもの。

動作原理を理解するのは少し時間がかかりましたが、理解してみるとこの構造を考えた人はどんだけすごいのかと感心させられます。

100μF を使った場合

470μF を使った場合

容量が大きくなった方が充電に時間がかかりパスルの発生が置くせていることが確認できます。

コレクタの電圧を測ってみたけど少し不安定な感じ

どうもベース電流がうまく制御できていないように感じるけど、とりあえずこれで動作確認終了。

ブログ開設

Thu, 21 Feb 2013 14:17:00 GMT

ブログに興味があった＋やったことをまとめる場所が欲しかったのでブログを初めてみました。

大体は PC、プログラミング、電子工作などといった趣味の内容を書いていく予定です。ほぼ備忘録として利用します。

のんびり更新していければいいな。