2023-05-14

ChaChatというキャラクターと会話できるWebアプリ作った

ChatGPT Webサイト Webサービス作ってみたプログラミング

ChaChatという、キャラクターと好きに会話できるWebアプリ作ったので、その紹介です。

cha-chat.henteko07.com

ChaChatとは？

ChaChatとは可愛いキャラクターと会話ができるWebアプリです。元気なキャラクターと会話できるので、元気になります。(当社比)
こんな感じの画面です。

ちなみにこの可愛いキャラクターは「へんてこちゃん」と言います。

コメントを書くとそれに応じてへんてこちゃんが答えてくれます。しかも喋ってくれます。楽しすぎる。

喜怒哀楽があります

何とこのへんてこちゃん、喜怒哀楽があります。ユーザーからくるコメントに対して反応して、喜怒哀楽で反応を返します。可愛すぎるでしょ。
今回は試しに漫画調の表現にチャレンジしてみました。

利用にはOpenAIのAPI Keyが必要です

ChaChatで遊ぶにはOpenAIのAPI Keyが必要です。詳しくはChaChatの設定画面で確認してください。

本当は全員が遊べるように自分のAPI Key使って欲しいんですが、まぁお金かかるので無理ですよね。無料で運用したい。

どうやって作ったか

ChaChatでは、イラストをStable Diffusionで、ChatGPTとKoeiromapを利用しています。ちなみに今回デプロイ先としてGitHub Pagesを使ってます。GitHub Pages便利すぎ。

イラストについては以下で作り方を解説してます。大体こんな感じです。追加でClipStudioを使って、書き文字とか漫画効果を追加してます。

blog.henteko07.com

その他のChatGPTとKoeiromapについては、また今度ブログを書こうと思います。

さいごに

ぜひ遊んでみてね。

cha-chat.henteko07.com

2017-04-22

LivePhotosKitReactを作成しました

作ってみた javascript React LivePhotos

先日Appleから LivePhotos をWebでも再生できるようにした、LivePhotosKit JS が公開されたので、そのwrapper的なReactコンポーネントを作成しました

github.com

www.npmjs.com

ターミナルで以下を実行すれば使うことができます

$ npm install --save @henteko/livephotskit-react

使い方

基本的にはLivePhotosKit JSの公式ドキュメントを参考にしてもらえたら、シンプルなwrapperなので問題はないと思います
https://developer.apple.com/reference/livephotoskitjs

こんな感じで簡単に使えます

import React, { Component } from 'react'
import LivePhotosKitReact from '@henteko/livephotoskit-react';

class App extends Component {
  render () {
    return (
      <div className="App">
        <LivePhotosKitReact
          photoSrc='./test.JPG'
          videoSrc='./test.mov'
        >
        </LivePhotosKitReact>
      </div>
    );
  }
}

f:id:henteko07:20170422215656g:plain

おわりに

LivePhotosKit JS結構楽しいですが、再生方法がデフォルトだとマウスオーバーだけなのが結構辛い
LivePhotosKit JS側に play() メソッドがあるので、それを使えば再生ボタンとかも置けなくはないかも
次はこれを使って何か作ってみたいです

2014-07-20

golangでdgate-inviteというの作った #deploygate

作ってみた DeployGate golang github

概要

golangでdgate-inviteっていうコマンド作った
henteko/dgate-invite · GitHub

golangを書くことを目的に作った
少しは勉強になった気がする

dgate-invite

dgate-inviteとは、DeployGateのAPIであるInvite APIを叩くコマンドです
もともとこのInvite APIには、GET,POST,DELETEで各々各アプリのメンバーを取得出来たり追加出来たり削除出来たりするのだけど、それをコマンドで出来るようにしてる

使い方

こんな感じで使える
package名とかuser名は各々のに置き換えてもらいたい

# GET
$ dgate-invite -g -p com.henteko07.assisthack
# POST
$ dgate-invite -i -p com.henteko07.assisthack henteko2
# DELETE
$ dgate-invite -d -p com.henteko07.assisthack henteko2

実際に使ってみる

最近流行のpecoを使えばインタラクティブにメンバー一覧から探してメンバーから削除なんてことも出来る

$ dgate-invite -g -p com.henteko07.assisthack | peco | xargs dgate-invite -d -p com.henteko07.assisthack

f:id:henteko07:20140720143015g:plain

あとは社員のメンバーリストを用意してそこからインタラクティブに選択しながらinviteするみたいなことも出来る

$ cat user_list.txt | peco | xargs dgate-invite -i -p com.henteko07.assisthack

f:id:henteko07:20140720143529g:plain

peco便利や…
このgifとかはttygifとttyrec使いました、便利

ログインとか

ログインには、公式のdgateが参照しているローカルの設定ファイルを見てる
なので、dgateコマンドを既に使ってる人は特別なログイン処理とか要らない
ログインとかしたかったらこんな感じで出来る

# ログイン
$ dgate-invite -login # nameとかtoken聞かれる
# ログアウト
$ dgate-invite -logout

実装

実装は、適当な感じにやった
httpのライブラリとか、標準のnt/httpパッケージを使おうとしたけど、とりあえずmreiferson/go-httpclient · GitHubとかを使った
標準のでも良かった気がする
最初はddliu/go-httpclient · GitHubを使ってたけど、DELETEとかに対応してなかったので、自分で書いた
https://github.com/henteko/dgate-invite/blob/master/dgate/simplehttpclient.go
fileのpostも書いたけど、使ってなくて完全にミスった
多分壊れてる

あとはjmoiron/jsonq · GitHubを使ったりしたけど、これも標準のでいいかもなーとか思ってる
コマンドの入力のパースには標準のflagパッケージ使ってて、golangは大体標準でいいのかもしれないって気持ちになった

package分離

最初はGO_PATHとかよくわからなかったけど、自分で設定してるGO_PATHに移動してその中のsrc/github.com/hentekoとかいうところにdgate-inviteとか置いて、その中にpackage dgate作りたかったらdgate-invite/dgateって掘ってその中に.goファイルを入れれば、mainではimport github.com/henteko/dgate-invite/dgate で参照出来て便利だった
これはいい
public methodは先頭大文字ってのもわかりやすいなぁ

CI

CIにはhttps://drone.ioを使ってる
使ってるけど、まだテストとか書いてないのでクロスコンパイル用に回してる
drone、travisとかに比べるとgithubにpushしてからの反応が糞早くてめちゃくちゃいい
使いやすいし

最後に

golangむずかしい
お使いください

2014-03-24

はてな記法の中のhttp記法が好きだ

javascript 作ってみた

はてな記法の中のhttp記法が好きです
http記法とは - はてなキーワード
1年前くらいにmarkdownで書けるリアルタイムプレビュー出来るメモ帳的なのを作ってた時に、このhttp記法をmarkdownの中に入れ混んでた
そこときは外部に公開するつもりなかったので雑な感じで作った
今回も雑な感じで作ってみた
javascript難しい…むりぽ…

動くデモ

github

henteko/hatena-httpjs · GitHub

こんなの

[url:title]とか[url:image]とか[url:barcode]って書くとなんかそれっぽいのになる
一番めんどくさかったのが自動でurlのタイトルを取ってくるところだった
ここを使わせてもらっている
タイトル取得API for JSONP | 駄文と書評

1年前は、自分でサーバー側にAPI作ってそれらしいのを作ってた
でも今回は全てjavascriptのみでやりたかったから使わせてもらった
ありがたい

さいごに

http記法、色々種類あるし追加していきたい

2014-03-06

選択中の文字をgoogle翻訳に投げるchrome拡張作った

作ってみた Chrome拡張 javascript

作ったよ！

henteko/selectedGoogleTranslateChromeExtension · GitHub
いつも英語読めなくて辛いからgoogle翻訳を使ってるけど、いちいちgoogle検索でgoogle翻訳ってぐぐるの疲れた
ブックマークとかすればいいんだけど、なんかずっとしてなかった

要望として、文字を選択したらすぐgoogle翻訳にかけたかった
だから、選択したらgoogle翻訳に飛ばす拡張機能作ったらめっちゃ便利だった

こんなん

文字を選択する

f:id:henteko07:20140306210436p:plain

Ctr-h押す(翻訳のHだよ☆)
翻訳された

f:id:henteko07:20140306210526p:plain

さいごに

この拡張、webサイトでしか動作しない
もっと詳しく言うとbodyタグが無いと動作しない
英語論文をpdfでchromeで読んでる時にもgoogle翻訳に投げたい
どうやるのかわからない

追記

pdfでもbodyタグあった
pdfで選択中の文字が上手く取れない

2014-02-22

github上でのLGTMを高速に行うChrome拡張

作ってみた Chrome拡張 github

LGTM.in便利

LGTM.inが最近(?)流行っているようですね
githubのissueとかのコメントにLGTMの画像を貼る行為楽しいですもんね、コミュニケーションとして

僕もこのLGTM.inを使ってgithubに画像をコメントしたりしているんですが、大概ここを開いてランダムに出てきたmarkdownをコピペしてコメントしてます
時々選んだりしますが
これって自動化出来そう！とお風呂入っていて思ったのでChrome拡張で作成しました

LGTMを高速に行うChrome拡張

henteko/accelerate-lgtm · GitHub
githubで公開してます！
使い方は簡単！

リポジトリをclone
Chromeでchrome://extensions/を開く
"パッケージ化されていない拡張を読み込む"でcloneしたリポジトリを選択
後はissueのページやプルリク画面を開いてClose横のLGTMボタンを押すだけ

こんな感じになります

f:id:henteko07:20140222012156p:plain

f:id:henteko07:20140222012202p:plain

あとはコメントボタンを押すだけですね！簡単！

おわりに

1時間くらいで作ったので雑です
githubとLGTM.inのhtml変わったら動作しません

追記

ぐぐったら普通に便利そうなのあった
こっちの方が画像選べるしいいかもしれない
LGTMでめでたさを伝えるChrome拡張をつくった - Thinking-megane

2014-02-19

AssistHackってアプリを作ったよ

作ってみた Android

実際は半年前くらいに作ってましたがブログとかに載せてなかったので

deploygateでインストール出来るよ！

deploygate便利ですね
丁度本日、deploygateのβ版がリリースされてiOSもサポートされましたね！
DeployGate - Beta Program
同時にgithubアカウントとgoogleアカウントでログインも出来るようになってます
大体のエンジニアはgithubアカウント持ってるしAndroid持ってる人ならgoogleアカウントも持ってるので便利ですね
さらにさらに、インストールボタン(上記のやつ)もリリースされてます！
今まで配布ページは文字のリンクを貼るくらいだったのでこれはいいですね
どことなく見たことあるボタンのデザインもあるからgithubのリポジトリのREADMEにも貼れますね