この記事は、ニフティグループ Advent Calendar 2025 21日目の記事です。(遅刻)
はじめに
こんにちは。ムサシです。
みなさんは昔ゲームの攻略本やらPC系の雑誌やらについていた、デスクトップマスコットというものを知っているでしょうか？
デスクトップに常駐して時計やカレンダーを表示してくれたり、キャラクターがおしゃべりをしてくれたり、メールが来ているのをお知らせしてくれたりといろいろなものがありました。
某借金を返すゲームの攻略本についていた時計が好きだったんですよね。
というわけで、昔を懐かしみながら自分もかわいい時計を作りたいと思います。
デスクトップマスコットもいろいろ現在に生き残っているものがあるのですが、今回はその中でもカスタマイズ性が高く、時計も作れそうな「伺か」を触ってみようと思います。
「伺か」とは、簡単な言語でカスタマイズ可能な、おしゃべりするキャラクターを常駐させられるアプリのようです。
準備
まず伺かをインストールします。
起動すると、デフォルトで設定されたキャラクター(伺かでは、キャラクターのことを「ゴースト」と呼ぶそうです)と設定画面が立ち上がります。
立ち上がった設定画面を見るといろいろいじれそうでした。メールの確認や、動画配信で利用する際の表示設定など、ここにある機能だけでも普通に便利そうです。
この「ゴースト」が大量にユーザの手で作成されており、好きなゴーストを見つけて常駐させるのが一般的な使い方だと思うのですが、今回は作っていこうと思います。
時計を作るには
見た目を変えたり、会話内容を変えるのであればすごく簡単にできるようなのですが、時計を作るにはもうひと手間かかります。
まず時間を取得する必要があります。こちらはYAYAというライブラリを連携させることで簡単に行えるようです。
伺かは「栞」と呼ばれる簡単な言語によって、少し複雑な実装ができるようになるようなのですが、YAYAはその「栞」の一種となります。
（独自の用語が多く、説明すると長くなってしまうので簡易的な説明にとどめさせていただきます。）
YAYAを用いたサンプルゴーストとして「ややめちゃん」というゴーストが配布されており、これを基にして新しくゴーストを作って良い旨が書いてあったので、今回はこの子をいじって行こうと思います。とてもかわいいです。
一応ですが、何か更新があるかもしれないのでGithub上から最新のYAYAのdllファイルをゴーストの中に入れておきましょう。
また、伺かはanimationという機能で画像切り替えができるようです。
まばたきや表情変化に使うのが主目的のようですが、これとYAYAを組み合わせて時計にしていきましょう。
まとめると、YAYAで時刻を取得→animationでゴーストの数字画像を対応するものに切り替えるという流れで作成していきます。
素材を作る
時計の画像はデフォルトのキャラクターが250*380くらいで作られていたので、400pxの正方形で作成して行こうと思います。
イメージはこんな感じ。
手癖でキャラをでっちあげます。できました。ときちゃんと呼びますね。（安直）
ゴリゴリ素材を書いていきましょう。
必要なのは、土台になる部分、数字（１～９）です。
土台はこんな感じで、数字部分はお気に入りのフリーフォント「ビルの谷間と高架下(リンク先はBooth)」をお借りしようと思います。
土台部分の名称をsurface0.png、数字部分をdigit_0.png〜digit_9.pngとしました。
画像が作成出来たら中身の部分を作っていきます。
時間部分の処理
栞は複数の役割を持ったイベントを持っており、そのイベント内に処理を記述すると反映されます。詳しくはこちらで。
時間についてはOnMinuteChange{}という1分毎に起きるイベントがあるので、そこに「時間と分を取得して各桁の数字を返す処理」を書き加えます。
サンプルのややめちゃんはyaya_aitalk.dic内で既にOnMinuteChange{}を使っていたので、この中に書き加えるか上書きしてしまいます。
YAYAは複数の.dicファイルに記述された処理を見て動くのですが、重複して書かれているとエラーが起きてしまうので、サンプルファイルをいじるときは気を付けましょう。（1敗）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
OnMinuteChange { //GETTIMEで現在時刻を取得 _now = GETTIME() _h = TOINT(_now[4]) //時間（0〜23） _m = TOINT(_now[5]) //分（0〜59） //テストメッセージ。1番目のキャラクターに喋らせる。 "\C\0\b[2]現在の時刻は %(_h)時 %(_m)分 です。\e" //各桁に分ける _h10 = _h / 10 _h1 = _h % 10 _m10 = _m / 10 _m1 = _m % 10 //テストメッセージ2。2番目のキャラクターに喋らせる。 "\C\1\b[10]現在の時刻は %(_h10)%(_h1)時 %(_m10)%(_m1)分 だよ。\e" //アニメーション用の返り値 "\C\0\s[0]\i[100,%(_h10)]\i[101,%(_h1)]\i[102,%(_m10)]\i[103,%(_m1)]\e" } |
テスト用に時刻が取得できているか喋らせてみました。
1分毎に現在の時刻を話してくれたので、問題なさそうです。次に行きましょう。
アニメーションの処理
先ほどの返り値に対応した画像を表示するようにsurfaces.txtに画像の対応や処理について書いていきます。
animationXXX.interval,neverで「イベントを受け取るまで次の処理を自動実行しない」という状態になり、時間が来たら次の画像が表示となるはずです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
charset,UTF-8 surface0 { // 土台 element0,base,surface0.png,0,0 // animation番号, 描画タイミング, 描画法, ID, 待機時間, X, Y // 時の10の位 (ID 100) animation100.interval,never animation100.pattern0,overlay,100,-1,50,175 animation100.interval,never animation100.pattern1,overlay,101,-1,50,175 animation100.interval,never animation100.pattern2,overlay,102,-1,50,175 // 時の1の位 (ID 101) animation101.interval,never animation101.pattern0,overlay,100,-1,120,190 animation101.interval,never animation101.pattern1,overlay,101,-1,120,190 animation101.interval,never animation101.pattern2,overlay,102,-1,120,190 animation101.interval,never animation101.pattern3,overlay,103,-1,120,190 animation101.interval,never animation101.pattern4,overlay,104,-1,120,190 animation101.interval,never animation101.pattern5,overlay,105,-1,120,190 animation101.interval,never animation101.pattern6,overlay,106,-1,120,190 animation101.interval,never animation101.pattern7,overlay,107,-1,120,190 animation101.interval,never animation101.pattern8,overlay,108,-1,120,190 animation101.interval,never animation101.pattern9,overlay,109,-1,120,190 // 分の10の位 (ID 102) animation102.interval,never animation102.pattern0,overlay,100,-1,213,230 animation102.interval,never animation102.pattern1,overlay,101,-1,213,230 animation102.interval,never animation102.pattern2,overlay,102,-1,213,230 animation102.interval,never animation102.pattern3,overlay,103,-1,213,230 animation102.interval,never animation102.pattern4,overlay,104,-1,213,230 animation102.interval,never animation102.pattern5,overlay,105,-1,213,230 animation102.interval,never animation102.pattern6,overlay,106,-1,213,230 // 分の1の位 (ID 103) animation103.interval,never animation103.pattern0,overlay,100,-1,280,255 animation103.interval,never animation103.pattern1,overlay,101,-1,280,255 animation103.interval,never animation103.pattern2,overlay,102,-1,280,255 animation103.interval,never animation103.pattern3,overlay,103,-1,280,255 animation103.interval,never animation103.pattern4,overlay,104,-1,280,255 animation103.interval,never animation103.pattern5,overlay,105,-1,280,255 animation103.interval,never animation103.pattern6,overlay,106,-1,280,255 animation103.interval,never animation103.pattern7,overlay,107,-1,280,255 animation103.interval,never animation103.pattern8,overlay,108,-1,280,255 animation103.interval,never animation103.pattern9,overlay,109,-1,280,255 } surface100 { element0,base,digit_0.png,0,0 } surface101 { element0,base,digit_1.png,0,0 } surface102 { element0,base,digit_2.png,0,0 } surface103 { element0,base,digit_3.png,0,0 } surface104 { element0,base,digit_4.png,0,0 } surface105 { element0,base,digit_5.png,0,0 } surface106 { element0,base,digit_6.png,0,0 } surface107 { element0,base,digit_7.png,0,0 } surface108 { element0,base,digit_8.png,0,0 } surface109 { element0,base,digit_9.png,0,0 } |
ざっくりとした説明になりますが、前半は画像の表示や位置の調整、後半はIDと画像の指定を行っています。
動かしてみよう！
さて、再起動して動かしてみます！
？？？？？？？
というわけで失敗しました。
- 時刻が正しく表示されない
- 時を刻まない
- 数字が消える
- ときちゃんもたまに消える
テストで入れたおしゃべりの時報だけは正しいので、アニメーションや画像連携周りがおかしいのだと思います。
年を越してしまうのでアドベンドカレンダーとしてはこんな感じで終わろうと思います。
いかがでしたか？（やけくそ）
修正できたらまたブログ書きます。orz
余談
そういえば、VOICEVOXなどで声をあてる機能がデフォルトで付いています。
VOICEVOXインストール後、設定＞音声認識/合成＞音声合成の設定＞ボイスID横の参照ボタンから声を選んでください。
キャラを右クリックして出るメニューから機能＞音声合成を押して有効にしたら声がつきます。
最後に
時計作りは失敗しましたが、楽しかったので是非触ってみてください…！
関連記事など
- ばぐとら研究所…伺かを構成しているソフトウェアが配布されています。初めはフルセット版のSSPをDLしましょう。
- ukadoc…伺かのWikiです。
- AYAYA/03…YAYAのWikiです。
- 紺野ややめ…YAYAのテンプレートゴースト、紺野ややめちゃんの紹介サイトです。
- 【無料頒布】日本語フォント「ビルの谷間と高架下」を作りました…お気に入りのフォント制作者様のnoteです。
- VOICEVOX…おしゃべりに声を付けたい人は是非。春日部つむぎちゃんが好きです。
著作権周り
- SSPの基本情報
- この記事で紹介した「SSP」は、C.Ponapalt様およびDOIchan!様に著作権が帰属するフリーウェアです。
- ヘルプドキュメント（Chameleon Ponapalt様、す～ちゃん様著作）に基づき紹介しています。
- 「YAYA」テンプレートゴースト 紺野ややめ
- シェル作者サトウ Ｍ様、ゴースト作者はリンク先のGithubを参照ください。
- Public Domain (Unlicense)です。
