[Firefox] 表示中のWebサイトを画像として保存する方法

How to save Web pages as pictures

Web ブラウザーに表示されている画面を画像として保存する方法を調べたのでその方法をまとめました。

環境

• Windows 10
• Firefox 69

アドオン・Fireshot をインストールする方法

Firefox 用アドオンの Fireshot は Firefox で開いている画面を画像として保存出来ます。
画面を画像に保存出来るアドオンはいくつかありましたが、Fireshot はスクロールしないと表示できない範囲も含めて全体を画像にできるのでこれをインストールしました。

下記 URL の Firefox のアドオンのページから Firefox をインストールします。
https://addons.mozilla.org/en-US/firefox/addon/fireshot/

Add to Fierfox をクリックします。

追加をクリックします。

OK をクリックします。

Firefox 右上当たりのツールバーに Fireshot のアイコンが追加されればインストール完了です。

画像に保存する方法

今見ている画面を画像に保存するには Fireshot のアイコンをクリックし、Capture entrie page をクリックします。

Save Screenshot という画面が表示されるので、右上の Save as Image をクリックすると保存先を指定して画像に保存できます。
PDF ファイルとしても保存できます。

関連ブログ

Selenium IDE でWebブラウザーを自動操作する方法
[Fiferox] Firefox のURLの左に隙間が出来たときの直し方
JavaScriptをWebコンテンツを見ながらデバッグする [Intenet Explorer] [firefox]
digiKam パソコン内の画像ファイルを簡単に探せるフリーソフト

digiKam パソコン内の画像ファイルを簡単に探せるフリーソフト

digiKam makes it possible to find image files in PC quickly

パソコンに保存された画像ファイルが増えと探すのに手間取ります。
そこで digiKam という寄付歓迎のオープンソース・ソフトウェアをインストールしてみました。
digiKam はパソコンやネットワーク共有ドライブに保存された画像をサムネイル表示・検索・タグ付けなどの管理ができるほか、画像編集機能も備えたソフトです。
Adobe Bridgeに似ています。
Windows、Mac、Linux、FreeBSDに対応しています。
多機能なソフトですがインストールからタグ付けまでの方法をまとめてみました。

環境

• Windows 10
• digiKam 4.12.0

最近digiKamは5.0にバージョンアップしましたが、4.12とだいたい同じです。
※ Windows版digiKamはKDE SCライブラリー由来のバグがあるので要注意とのことです。

ダウンロード

公式サイトからWindows用インストーラーをダウンロードします。
http://download.kde.org/stable/digikam/
このブログを書いている時点では digiKam-installer-4.12.0-win32.exe が最新版でした。

インストールと初期設定

ダウンロードしたインストーラーを実行します。
インストール後のインストール先フォルダーの容量は 1.33 GB ほどでした。

初回起動はウィザード形式で初期設定する必要があります。

どの項目も後から変更できるのですが、特に大事なのがこの画面。

上のテキストボックスはアルバムに設定するパスで、後から追加できます。
下のテキストボックスはデータベース(SQLite)の保存先のパスです。
このデータベースは設定情報やタグなど、使い勝手を左右する情報が保存されます。
保存先はNTFSフォーマットのドライブかSambaサーバーとされています。
初期値はなぜか ピクチャ フォルダーに設定されているので
C:\Users\ユーザー名\AppData\Roaming\digiKam
というフォルダーを作ってそこを指定しました。

この後もいくつか設定項目がありますが全て初期値のままにしました。

UIを日本語に設定する方法

日本語化の設定メニューは Settings ではなく Help にあります。
メニューの
Help - Switch Appplication Language
を開いて Primary language を Japanese に設定すると、次に digiKam を起動したときに日本語化されます。

※ 以下、英語UIで説明します。

アルバムにフォルダーを追加する方法

メニューの
Settings - Configure digiKam
の Collections (コレクション) からアルバムのフォルダーを追加・削除できます。

サブフォルダーのファイルもサムネイル表示する方法

メニューの
View - Include Album Sub-Tree (表示 - サブアルバムを含む)
をオンにすると
サブフォルダーのファイルもサムネイル表示されます。

これで画像ファイルが探しやすくなりました。

サムネイルに表示された画像ファイルはドラッグ＆ドロップ操作でGIMP・Inkscape・CLIP STUDIO PAINTなどの画像編集ソフトにインポートできました。

ファイルにタグ付けする方法

画像ファイルに「誰が映っていか」や「どこで撮影したか」などの情報をタグとして紐付けておくと後で探しやすくなります。
いくつかの操作方法がありますが、個人的に使いやすかった方法を説明します。

ファイルにタグ付けする前に digiKam にタグを登録します。
画面右の Captions/Tags (キャプション/タグ・初期状態ではアイコンだけ表示されている) をクリックして Tagsタブを開きます。

青地の Tags ツリーを右クリックして New Tag をクリックすると Tags ツリーに新しいタグを登録できます。

サムネイルビューから画像を選択して Tagsツリーに追加したタグにチェックを入れて、Apply (適用) ボタンをクリックすればタグ付け完了です。

タグを指定してファイルを探す方法

画面下や画面右の Filters (フィルタ・初期状態ではアイコンだけ表示されている) をクリックして Tags Filter からタグを絞り込んでサムネイル表示できます。
絞込解除は画面下の赤い×ボタン。

関連ブログ

[GIMP] GIFアニメーションの作り方
Live2Dを使ってみました
[Blender] Pythonで複数の設定を一瞬で編集する方法
BlenderのモデルデータをMMDに変換する方法

以上、参考になれば幸いです。

[Machine Learning] 機械学習で白黒写真をカラー化する方法

How to color monotone photo with the machine learning

ディープラーニング アプリケーション「Automatic Colorization of Grayscale Images」
https://github.com/satoshiiizuka/siggraph2016_colorization
を使って白黒写真をカラー写真にしてみました。
その手順をまとめました。

環境

• Windows 10のVirtualBoxにUbuntu Linux 15.10をインストールした

Linux OSを用意する

Cygwinへのインストールを試みましたがTorch7が「platform not supported, aborting」というエラーでインストールできませんでした。
このアプリは

• Ubuntu Linux で開発された
• GPUを使わない

とのことなので、VirtualBoxにUbuntu Linuxをインストールして使うことにしました。

ちなみにCentOSは7のみ、Fedoraは20と22のみをサポートのようです。

インストール

必要なソフトを全てインストールします。

gitをインストールする

sudo apt-get install git

Torch7をインストールする

git clone https://github.com/torch/distro.git ~/torch --recursive cd ~/torch sudo dpkg --configure -a bash install-deps ./install.sh

最後に
Do you want to automatically prepend the Torch install location to PATH and LD_LIBRARY_PATH
と表示されるので yes と入力します。
これで .bashrc にexportコマンドが追記されるので次のコマンドで環境変数を更新します。
source ~/.bashrc

インストール後のソースは不要のようです。ソースを消すコマンドは次の通り。
rm -rf ~/torch

必要なパッケージ群をインストールする

luarocks install nn luarocks install image luarocks install nngraph

siggraph2016_colorization をダウンロードする

cd ~ git clone https://github.com/satoshiiizuka/siggraph2016_colorization cd ~/siggraph2016_colorization sh download_model.sh

これで必要なソフトが揃ったはずです。

白黒画像をカラー化する方法

カラー化したい白黒の画像はpngフォーマットだと「Wrong number of input channels!」というエラーに悩まされるのでjpgフォーマットをお勧めします。
Ubuntuならconvertコマンドでjpgに変換できます。

また、画像サイズが横512×縦512ピクセルを超えると処理が遅いとのことです。
縦横とも512ピクセル以内なら1秒以内に終わります。

白黒画像をホームディレクトリに
monotoon.jpg
というファイル名で置いた場合、次のようなコマンドを実行すると result.png というファイル名でカラー化されます。

th colorize.lua ~/monotoon.jpg ~/result.png

こんな画像を処理したら

こうなりました。

白黒にする前の画像がこちらです。

別の画像ではこうなりました。
上から原画・白黒化画像・カラー化画像の順です。

いろいろ試してみましたがセピア調になることが多いです。

風景写真のカラー化は安定してますが人工物の写真やアニメ調のイラストは苦手のようです。

関連ブログ

[GPGPU] 機械学習で画風を変換する方法
Android4.0をVmwareやVirtualBoxで起動する
Windows8をVirtualBoxにインストールする

以上、参考になれば幸いです。

[GPGPU] 機械学習で画風を変換する方法 [Machine Learning]

How to install and use the chainer-gogh

2015年9月に公開された画風を変換するアルゴリズム「chainer-gogh」をインストールして使ってみました。
https://github.com/mattya/chainer-gogh
使い方までの手順をまとめてみました。

環境

• CUDAコア数が48、動作周波数が900HMzのNVIDIAグラフィックスを搭載したノートPC
• 64bit版 Ubuntu Linux 15.10

CUDA Toolkitが使えるLinux PCを用意する

CUDAはNVIDIA製の一部のグラフィックスに搭載される並列演算に特化した機能です。
CUDA ToolkitはCUDAの機能を利用するための開発環境です。
chainer-goghはCUDA Toolkitを利用すると高速に処理できます。
今回はchainer-goghをCygwinやホストOSがWindowsのVirtualBoxで実行したのですが、このブログを書いている時点ではどちらもCUDA Toolkitが利用できず、画像1枚変換するのに90時間ほどかかりそうでした。

そこでUSBメモリードライブにUbuntu 15.10をインストールして使いました。

必要な環境をインストールする

Ubuntu 15.10でchainer-goghを使えるようにするまでインストールするものが沢山ありました。
すべて端末からインストールしました。

グラフィックスドライバーをインストールする

システム設定 - ソフトウェアとアップデート - 追加のドライバー
から検証済みのドライバーをインストールしました。

NVIDIA純正のドライバーは

• インストール時にX Serverを停止する必要がある
• インストール後にOSが起動しない

などの問題がありました。

また、Ubuntu 16.04では検証済みのドライバーのインストール後にX-Windowでログインできなくなるトラブルがありました。

CUDA Toolkit をインストールする

wget http://developer.download.nvidia.com/compute/cuda/7.5/Prod/local_installers/cuda-repo-ubuntu1504-7-5-local_7.5-18_amd64.deb sudo dpkg -i cuda-repo-ubuntu1504-7-5-local_7.5-18_amd64.deb sudo apt-get update sudo apt-get install cuda

インストール後は次の環境変数の設定が必要です。~/.bachrc に追記しておくと端末起動時に自動で設定されます。
export PATH=/usr/local/cuda/bin:$PATH export LD_LIBRARY_PATH=/usr/local/cuda/lib64:$LD_LIBRARY_PATH

cuDNNに対応していればインストールする

cuDNNはCUDAの処理を最適化をする機械学習用ライブラリーです。
Accelerated Computing Developer Programにユーザー登録するとダウンロードできます。
cuDNNが使えればchainer-goghの高速化が期待できますが、今回はPCが対応してなかったので使えませんでした。

GCC4.9ををインストールする

Ubuntu 15.10はGCC5がインストールされていますが、ChainerフレームワークのインストールにはGCC4.9が必要でした。
sudo apt-get install gcc-4.9 g++-4.9 sudo ln -s /usr/bin/gcc-4.9 /usr/local/bin/gcc

Pythonのライブラリー群をインストールする

下記のコマンドだと不要なものもあるかもしれませんが、必要なものが欠けてると何もできないのでまとめてインストールします。
sudo apt-get install python-pip pip install -U setuptools sudo apt-get install build-essential autoconf libtool pkg-config python-opengl python-imaging python-pyrex python-pyside.qtopengl idle-python2.7 qt4-dev-tools qt4-designer libqtgui4 libqtcore4 libqt4-xml libqt4-test libqt4-script libqt4-network libqt4-dbus python-qt4 python-qt4-gl libgle3 python-dev sudo easy_install greenlet sudo easy_install gevent

Chainerフレームワークをインストールする

pip install chainer

次のコマンドを実行して何も表示されなければCUDAが使えます。
python -c "import cupy"

このコマンドを実行して
ImportError: No module named cupy
と表示されるようならCUDA Toolkitがインストールされてないか環境変数が正しく設定されてません。
CUDA ToolkitがインストールしてChainerフレームワークをインストールをインストールし直してください。

gitをインストールする

sudo apt-get install git

chainer-goghと学習モデルをインストールする

学習モデルは作者曰く「お手軽」のものを使いました。
cd ~ git clone https://github.com/mattya/chainer-gogh wget https://www.dropbox.com/s/0cidxafrb2wuwxw/nin_imagenet.caffemodel?dl=1 mv nin_imagenet.caffemodel?dl=1 ~/chainer-gogh/nin_imagenet.caffemodel

これで必要な環境が揃ったはずです。

使い方

ホームディレクトリに
変換したい画像 input.png

画風スタイルの画像 style.png

がある場合、次のコマンドで変換できます。
cd ~/chainer-gogh python chainer-gogh.py -m nin -i ~/input.png -s s~/tyle.png -o ~ -g 0

処理中はホームディレクトリに img_････.png という画像ファイルが作られます。
im_04950.png が完成です。下が完成の画像です。

所要時間は次の通りでした。

• CPUのみで推定90時間
• CUDAで約45分
• cuDNNは未対応なので検証不可

白地が多い画像は苦手のようです。

トラブルシューティング

実行したらCUDAに対応していなかった (cannot import name core)

CUDAを使わずに実行する
python chainer-gogh.py -m nin -i ~/input.png -s s~/tyle.png -o output_dir -g -1

cuDNNをインストールしたらcuDNNに未対応で実行できない (CUDNN_STATUS_ARCH_MISMATCH)

環境変数のcuDNNのパス設定を削除してChainerフレームワークを再インストールする。

Chainerフレームワークを再インストールする方法

pip uninstall chainer pip install -U setuptools pip install chainer

GCCを元に戻す方法

sudo rm /usr/local/bin/gcc

関連ブログ

Android4.0をVmwareやVirtualBoxで起動する
Windows8をVirtualBoxにインストールする
[Blender] Pythonで複数の設定を一瞬で編集する方法

以上、参考になれば幸いです。

[マスコットアプリ文化祭] クエリちゃん大賞受賞の報告

I got the Querychan grand prix

マスコットアプリ文化祭2015に応募したクエリちゃんMMDモデルがクエリちゃん大賞を受賞しました。
この場をかりて報告させていただきます。
クエリちゃんのタペストリーやストラップをはじめ豪華商品を沢山いただきました。
※下の写真は商品のごく一部です。

ありがとうございました。

なぜ受賞できたのか？

授賞式で聞いた話によるとポケクエが公式にクエリちゃんのMMD化を検討していたようです。
マスコットアプリ文化祭にMMDモデルを投稿したところ、偶然にもMMD化を検討中だったため受賞できたようです。

クエリちゃんMMDモデル公開までの軌跡

• 2015年9月頃
  3次元CGソフト・Blenderの脱初心者を目指す
  
• 2015年10月頃
  [Blender] ボーンを曲げてもメッシュが曲がらない原因と修正方法
  BlenderのモデルデータをMMDに変換する方法
  
• 2015年11月頃
  [MMD] クエリちゃん・クリスマス版(初版) & クエリちゃんver1.02を公開しました
  
• 2015年12月頃
  [Blender] Pythonで複数の設定を一瞬で編集する方法
  クエリちゃんMMDモデル更新
  
• サンプル動画のBGMを作ったときの裏話
  CUBASE Pro 8.5 を使ってみました
  

今後の課題

MMDモデルは「データ」です。それを使って動画を作ってはじめて意味があります。
今後はクエリちゃんのMMDモデルを動画に使ってもらうことが課題だと思ってます。

まだ未定ですが、nicovideo.jpを検索してクエリちゃんの動画をツイッターに投稿するバッチプログラム（いわゆるbot）を開発中です。

クエリちゃんのMMDモデルを公開中です

クエリちゃんのMMDモデルはOneDriveからダウンロードできます。
クエリちゃんのMMDモデルで動画を作ったらぜひ動画サイトに投稿してください。

[Blender] Pythonで複数の設定を一瞬で編集する方法

How to automate editing in Blender

3次元CG編集ソフトBlenderはPython言語で機能拡張やバッチ処理をすることができます。
マイクロソフトOfficeシリーズがVisual Basic Application言語でマクロを実行できるのに似ています。
Pythonのスクリプトを使ったら無数のボーンの設定をもれなく一瞬で編集出来たのでその方法をまとめてみました。

環境

• Windows 8.1
• Blender 2.75a

Python言語の特徴

Pythonを他のプログラミング言語に比べた場合、特に次の2点が気になりました。

• 変数名の宣言が不要
  変数名のタイプミスに気付きにくいです。
• if文やfor文の入れ子はインデント(段落)で記述する必要がある
  見やすさのためではなく仕様です。

オブジェクト指向やラムダ式なども採用されているのでC#やJavaやVB.NETの経験者ならすぐに扱えると思います。

入門編・全てボーンの名前を表示してみる

ここからBlenderを使った説明です。
どのエリアでもいいので Python Console を開きます。

上の画面に映っているキャラクターはポケットクエリーズのクエリちゃんです。
3D ViewのObject Modeでボーンを選択した状態で Python Console に次のコードをコピーペーストします。
※改行やインデントのスペースは省略できません。
for bs in bpy.context.object.data.bones: print (bs.name)

青い文字でボーンの名前が全て表示されました。

実用編・ボーンを移動禁止に一括編集する

下の画像はモデルデータを編集中の画面です。
Pose Editorでクエリちゃんの頭のボーンを間違って移動させたらこんなことになってしまいました。

人型モデルにポーズをつけるときはボーンの移動を禁止したほうが安全に操作できると思います。
移動禁止にするにはTransformのLocationのX･Y･Zそれぞれをロックします。

モデルによっては40個以上もあるボーンを一つずつ移動禁止にするのは骨の折れる作業です。
Pythonスクリプトを使えばこのような作業は一瞬で済みます。

3D ViewのObject Modeでボーンを選択した状態で Python Console に次のコードをコピーペーストします。
※改行やインデントのスペースは省略できません。
for bs in bpy.context.object.pose.bones: bs.lock_location[0] = True bs.lock_location[1] = True bs.lock_location[2] = True

これで選択したボーンが全て移動禁止になりました。

オブジェクトやプロパティはツールチップに表示される

入力欄にマウスポインターを補バーさせるとオブジェクトやプロパティがツールチップに表示されます。

スクリプトで変更したいプロパティ名はこの方法で調べられます。

関連ブログ

BlenderのモデルデータをMMDに変換する方法
[Blender] ボーンを曲げてもメッシュが曲がらない原因と修正方法
3次元CGソフト・Blenderの脱初心者を目指す
クエリちゃんMMDモデル更新
[Unity3D] 画面表示を左右反転させる方法
[Unity3D] 二つのscene(シーン)を一つにまとめる方法
[Unity3D] サイドバイサイドで立体視できるゲームを作るには
[Blender] obj2opengl.plをJava用に改造する
[Unity3D] Blender could not be found.を解決するには
[Unity3D] Unity4からUnity5へのバージョンアップでの変化

以上、参考になれば幸いです。

BlenderのモデルデータをMMDに変換する方法

How to convert FBX models into MikuMikuDance Models

前回のブログでUnityアセットのクエリちゃんのFBXファイルをBlenderに取り込んで編集する方法を内容を書きました。
[Blender] ボーンを曲げてもメッシュが曲がらない原因と修正方法

今回はBlenderに取り込んだモデルをMikuMikuDance(以下MMD)のモデルに変換する方法をまとめました。

環境

• Windows 8.1
• Blender 2.76

Blenderですること

BlenderのモデルをMMDに変換する場合はPMXにエクスポートするアドオンが必要です。
この様なアドオンは有志により複数公開されてますが、モデルデータによって変換に成功するアドオンと失敗するアドオンがあります。
複数のアドオンを使えるようにしておくことをおすすめします。

Blender2PMXアドオンは頻繁に使わせてもらってます。
ようやく改変Blender2Pmxが完成しました | KAGAYAS
http://kagayas.com/blender_blender2pmxe_addon/

エクスポート時に Repeortエラーに ValueError と表示される場合の対処方法

Blenderは実行プログラム本体とテクスチャ画像のファイルが異なるドライブに保存されていると、エクスポート時にとエラーが起きることがありました。
例えばblender.exeがDドライブにインストールされ、編集中のテクスチャ画像のファイルがCドライブにある場合など。
変換するモデルのファイルはblender.exeと同じドライブに保存してください。

ValueError: path is on mount 'C', start on mount 'D'

PMX Editorですること

pmxに変換できたらおしまいではなく、PMX Editorで編集します。
PMX Editorはこちらのサイトからダウンロードさせていただきました。
ダウンロード: とある工房
http://kkhk22.seesaa.net/category/14045227-1.html

ダウンロードして展開したら30個くらいある全てのdllファイルをセキュリティの「ブロックの解除」をしないと実行中にクラッシュします。
「ブロックの解除」はdllファイルを右クリックしてコンテキストメニューのプロパティを開くと捜査できます。

PMX Editorが使えるようになったらBlenderからエクスポートしたPMXモデルデータを次のように編集します。

• モデル名とコメントの登録
• 大きさの調整
• 材質の調整
  材質はBlenderでいうマテリアルのようなもの
• ボーンの設定
  日本語化、場所と向きの調整、指のボーンをローカル軸化、「性能」の設定、IKボーンの追加、全ての親ボーンや撚りボーンの追加など
• 肩の角度の初期設定
• モーフの設定
  クエリちゃんの場合はヘッドセット消しや表情操作を追加しました
• 表示枠の瀬邸
• 剛体の設定
  BlenderのCollisionやRigid Bodyのようなもの
• Jointの設定
  髪などの揺れものがどこにぶら下がっているかの設定

保存するときは上書きせずに別名で保存します。
少し変換作業をしたらMMDで動かして不具合がないか確認します。不具合があったら古いファイルを開いて編集をやり直します。
満足する出来になるまで数週間も数ヶ月もかかると思います。

関連ブログ

[Blender] ボーンを曲げてもメッシュが曲がらない原因と修正方法
3次元CGソフト・Blenderの脱初心者を目指す
クエリちゃんMMDモデル更新
[Unity3D] 画面表示を左右反転させる方法
[Unity3D] 二つのscene(シーン)を一つにまとめる方法
[Unity3D] サイドバイサイドで立体視できるゲームを作るには
[Blender] obj2opengl.plをJava用に改造する
[Unity3D] Blender could not be found.を解決するには
[Unity3D] Unity4からUnity5へのバージョンアップでの変化

以上、参考になれば幸いです。

[Blender] ボーンを曲げてもメッシュが曲がらない原因と修正方法

The duplicate vertex groups should be normalized

3次元CG編集ソフト・Blenderのトラブルシューティングです。
Unityアセットの「クエリちゃん」をMikuMikuDance(以下MMD)に移植するためにBlenderを使いました。
クエリちゃんの指は3種類のポーズが用意されてますが、関節を自由に曲げることが出来ません。

MMDでの使いやすさを考慮して指のボーンを追加したのですが、当初はボーンの通りに指が曲がりませんでした。
「頂点グループ」など専門用語(?)や細かい操作の説明は省略します。

環境

• Windows 8.1
• Blender 2.76

クエリちゃんをBlenderに取り込む

クエリちゃんのFBXは次の内容が設定済でした。
・ボーン
・頂点グループ
・ウェイト(重さではなくボーンの影響の強さ)

これらを保ったまま指のボーンを追加する前に必要な手順は次の通りです。

1. FBXファイルをインポートする
   !EXPERIMENTAL! Apply Transtormをオンにしたほうがいい場合と、オフにした方がいい場合があります。両方試してボーンの位置や向きが最適な方を編集します。
2. ポーズをデフォルトにする
   取り込み直後は中を浮いているようなポーズですが、Action Editorで Chr_Reference|000_Def|000_Def:BaseAnimation を選択したらデフォルトのポーズになりました。
3. マテリアルを修正する
   Blenderで正しく表示できるようにマテリアルを一つずつ修正します。
   特に顔は眉・左目・右目・口のテクスチャをそれぞれ独立して差し替えできるように分割しました。
4. テクスチャを指定する
5. ボーンの名前を変更する
   X-Asis Mirrorを有効にして左右反対側のボーンも自動で編集するための措置です。
   例：
   Chr_LeftShoulder → Chr_Shoulder.L
   Chr_RightShoulder → Chr_Shoulder.R
   
6. ボーンの向きを修正する
   ※MMD付属モデルのようにボーンの向きが頂点グループに重なるように修正します。
   
7. 足やつま先にIKボーンをつける

作業途中のクエリちゃん

指のボーンを追加する

3種類の手のポーズのうち、指がまっすぐに伸びているパーの手にボーンを入れることにします。
手を親として指のボーンを追加します。関節は各指に3つとしました。

ボーンごとに頂点グループを設定する

各ボーンと同じ名前の頂点グループを作ってそれぞれの頂点を設定します。

人差し指の先端

人差し指の真ん中

複雑な形の手から全部で30個の頂点グループを作るので慣れないうちは気が遠くなります。

曲げると明らかにおかしい

指を曲げてみるとボーンの通りに曲がりません。階段のようになってます。

原因は頂点グループの重複でした

初期設定のままだと手の頂点グループは指の先まで含まれてます。

手の頂点グループと今回新しく追加した指の頂点グループと重複したため正しく曲がらなかったようです。
手の頂点グループから指の頂点グループを削除しました。

これで指が曲がるようになりました。

ボーンを移動するとボーンに追随しなかったり変形してしまう場合は頂点グループの重複が原因かもしれません。
Blenderに頂点グループの重複を検索する機能があればいいんですね。

関連ブログ

クエリちゃんMMDモデル更新
3次元CGソフト・Blenderの脱初心者を目指す
[Unity3D] 画面表示を左右反転させる方法
[Unity3D] 二つのscene(シーン)を一つにまとめる方法
[Unity3D] サイドバイサイドで立体視できるゲームを作るには
[Blender] obj2opengl.plをJava用に改造する
[Unity3D] Blender could not be found.を解決するには
[Unity3D] Unity4からUnity5へのバージョンアップでの変化
[Unity3D] ゲーム画面をキャプチャしてMovie Studioで動画に編集する

以上、参考になれば幸いです。