Omron製品音波式電動歯ブラシ、HT-B551の電池交換してみた。

ども。
久しぶりのプライベートな記録です。

3年ほど前に購入した、オムロンの音波式電動歯ブラシ、HT-B551の電池の持ちが悪くなりました。
24時間ずっと充電して、1回の歯磨きしかできない状態となりました。

オムロン製の電動歯ブラシの充電式のものについては、説明書にオフィシャルでは電池交換はできない旨が書かれています。
※参考:取扱い説明書http://www.healthcare.omron.co.jp/product/ht/ht-b551.html


新しい歯ブラシ買うのはお金がかかるし。
なんとかして電池交換できないかな?とネットで探していたら、他機種ですがやってる人がいたので、そのブログを参考に自身もやってみました。

参考
http://ys-net.co.jp/blog/?p=888
http://shiozoku.blogspot.jp/2014/10/blog-post.html
http://cayman1024.exblog.jp/20348452/


まず、電池を取り出す作業から。
説明書にやり方が書いてあるので、それを参考にするといいでしょう。
※参考:取扱い説明書http://www.healthcare.omron.co.jp/product/ht/ht-b551.html

私は説明書を見ずにやったので試行錯誤でした。
底にあるシールをはがし、ねじを取ります。
そして、上下にスライドさせればいいのですが、結構硬い。
なかなか動かなかったので、ゴムのところにねじが隠れてたりするのかな?とかいろいろやってみたので、ぼろぼろになってしまいました。

そんなわけで、こんな感じで取り出しました。
2015-02-28_tooth01.jpg

電池ははんだ付けとテープでガチガチにコードにつながっていたので、はんだこてで溶かしながらコードをはがしました。

電池はニッケル水素電池で1.2Vのものを直列に二つつなぎ、2.4Vを出すようにしているみたいです。
2015-02-28_tooth02.jpg

2015-02-28_tooth03.jpg

大きさは単三電池ほどの大きさでした。


さて、電池の調達なのですが、これが苦労しました。
先ほど参考にしたブログ記事をもとに、
リチウムイオン充電池で、単四型10440もしくは単三型14500ならいけるかな?と思いながら、
秋葉原に4回くらい訪れ、そのたびに三月兎1号、2号、3号を回っていたので入荷されてなくて。
先日、やっと入荷したのか大量にあったので、10440を購入しました。
14500で、ケースに収まらなかったらむなしいので。
ultraFire製、リチウムイオン電池10440(単4ほどの大きさ)、500mA、3.6V。500円



2015-02-28_tooth04.jpg

電池のでっぱりがあるほうを赤いコード、でっぱりがないほうを黒いコードに、はんだつけ。
歯ブラシが動くこと、充電できてるっぽいことを確認したあと、セロテープで電池をしっかり固定してケース収納しました。

ふー。
電池復活した歯ブラシで歯磨きしたら、快適。
しばらく様子見しながら使っていきます。




















--------------------------------------------------------------------------------------

メモ。リッチテキストエリアに入れた画像のURLを引っこ抜いて、Visualforceに表示する。

お仕事メモです。

Salesforceを扱う作業にて、以下のような依頼がきました。
・経費?に関してレコードを作成し、領収書などの画像をアップロードする。
・アップロードした画像をチェックするため、Visualforceで一覧で表示できるようにしてほしい。
・(できれば)画像をマウスオーバーしたら拡大するようにしてほしい。

それに対し、
・画像はリッチテキストにてアップロードする。
・1レコードのリッチテキストに2つ以上画像をアップロードした場合は最初の画像のみ一覧に表示する。
・リッチテキストエリアには基本的に文字などを入力しない。画像アップロード用の項目とする。
という前提条件で開発することになりましたとさ。

2015-02-02_04.jpg

2015-02-02_05.jpg


2015-02-02_06.jpg



さて、実験ということで、取引先オブジェクトでやってみました。

開発環境の取引先オブジェクトにリッチテキスト項目(画像用。image__c)を作成し、画像をアップロードしたらどうなるか、開発者コンソールで試してみました。

2015-02-02_01.jpg

2015-02-02_02.jpg  

14:15:10:055 USER_DEBUG [3]|DEBUG|ああああ<img alt="ユーザが追加した画像" src="https://c.na15.content.force.com/servlet/rtaImage?eid=001i000000eKFhT&amp;feoid=00Ni000000EpiUa&amp;refid=0EMi0000000Prhq" style="height: 375px; width: 500px;"></img>いいいいい


前提。
・アップロードするファイルは1つ。
・リッチテキストに文字は基本的には入れない。
なので、" src="のあとのhttps://●● と次の"までを引っこ抜けば良さげ。

ということで、Apexのコントローラで

if(String.isNotEmpty(account.image__c) && account.image__c.indexOf('" src="') > 0){
    //" src="から後ろ、 最初に"が出てくるまでを取り出す。
     Integer startpo = account.image__c.indexOf('" src="') + 7;
     Integer endpo = account.image__c.indexOf('"', startpo);
    account.image__c.substring(startpo, endpo);

}


こんな感じで引っこ抜きます。
画像がアップロードされていないケースもありうるのでnull、空文字チェックと" src="の記述チェックを入れてます。



さて、Visualforceは一覧で表示させたいということで、コントローラは
・取引先のラッパークラスを作成。画像URLの文字列をラッパークラスに突っ込む。
・ラッパークラスのリストをプロパティで作ってあげる。
という形にしました。

public with sharing class DemoController {

    public List<AccountWrap> accountWrapList{get;set;}

    public class AccountWrap{
        public Account ac{get;set;}
        public String imageSrc{get;set;}

        public AccountWrap(){
            ac = new Account();
            imageSrc = '';
        }
    }

    //初期処理
    public void init(){
        accountWrapList = new List<AccountWrap>();

        for(Account a :[select id, name, phone, image__c from Account]){
            AccountWrap wrap = new AccountWrap();
            wrap.ac = a;
            if(String.isNotEmpty(a.image__c) && a.image__c.indexOf('" src="') > 0){
                //tableに表示させる画像URL
                Integer startpo = a.image__c.indexOf('" src="') + 7;
                Integer endpo = a.image__c.indexOf('"', startpo);

                wrap.imageSrc = a.image__c.substring(startpo, endpo);
            }

            accountWrapList.add(wrap);
        }
    }
}


Visualforceで画像を表示するには
<apex:image value="{画像URL}" />
のようにすればOKです。


さて、次に画像にマウスを乗せると、画像が拡大される件。
私はJavascript、jQueryには疎いので、素直にネットに転がっているライブラリを使わせてもらいました。
今回は「Easiest Tooltip and Image Preview Using jQuery」を使用してみました。

参考URL
http://www.css-lecture.com/log/javascript/jquery-tooltip-image-preview.html
http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/

tooltip.zip内にあるmain.jsをダウンロードし、静的リソースにアップロード。またはvisualforceにコピペ。

リンクのタグ<a>にcssクラスとして"preview"を付ければいいということです。
Visualforceで該当するのは<apex:outputLink>のstyleclassが該当します。

 <apex:outputLink value="{!ac.imageSrc}" styleclass="preview" target="_blank" >
    <apex:image value="{!ac.imageSrc}" width="30px" height="30px" />
</apex:outputLink>

また、CSSも静的リソースまたはvisualforceに以下のような記述を入れます。

<style>
#preview{
    position: absolute;
    border: 3px solid #333;
    background: #444;
    padding: 5px;
    display: none;
    color: #FFF;
    text-align: center;
}
</style>


これで、マウスオーバーで画像拡大します。


マウスオーバーしても、画像の表示位置、ブラウザ、モニタの大きさによっては全体が表示されないかも?
で、このような要望をしてくる顧客なので、クリックして画像表示する際に別ウィンドウはあまりよろしくないし、同一ウィンドウで入力内容などが消えるのはNGなのかな?

クリックしたらLightBoxチックにポップアップ表示でいこうということで、ライブラリのLightBox Plusを実装してみることにしました。
参考URL
http://allabout.co.jp/gm/gc/23975/
http://serennz.sakura.ne.jp/toybox/lightbox/
ダウンロードするといろいろ入っていますが、必要となるのはResourceフォルダ内のもの。

リンクタグ<a>にrel="lightbox"と入れればよいということで、Visualforceでは<apex:outputLink>が該当します。
 <apex:outputLink value="{!ac.imageSrc}" styleclass="preview" rel="lightbox[demo]" target="_blank" >
    <apex:image value="{!ac.imageSrc}" width="30px" height="30px" />
</apex:outputLink>


ResourceはZipでまとめて静的リソースに入れるわけですが、Zipにする前にlightbox_plus.jsに記述されているgifファイルの設定をしてあげる必要があります。
いろいろ試してみたのですが、loadingimg:{!URLFOR($Resource.lightbox, 'resource/loading.gif')}のようにしてもうまくいかないので、パス指定をする必要がありそうです。

開発しているvisualforceのページのソースを表示し、他の静的リソースはどこかな?
と探してみます。

2015-02-02_03.jpg

というわけで、ここを参考に以下のように書き換えて、ZIPにしました。

Spica.Event.run(function() {
  new Lightbox({
    loadingimg:'/resource/1422585715000/秘密/lightbox/resource/loading.gif',
    expandimg:'/resource/1422585715000/秘密/lightbox/resource/expand.gif',
    shrinkimg:'/resource/1422585715000/秘密/lightbox/resource/shrink.gif',
    blankimg:'/resource/1422585715000/秘密/lightbox/resource/blank.gif',
    previmg:'/resource/1422585715000/秘密/lightbox/resource/prev.gif',
    nextimg:'/resource/1422585715000/秘密/lightbox/resource/next.gif',
    closeimg:'/resource/1422585715000/秘密/lightbox/resource/close.gif',
    effectimg:'/resource/1422585715000/秘密/lightbox/resource/zzoop.gif',
    effectpos:{x:-40,y:-20},
    effectclass:'effectable',
    resizable:true,
    animation:true
  });
}


そんなわけで、全部入れたVisualforceはこんな感じ。

<apex:page controller="DemoController" action="{!init}" sidebar="false">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-1.11.1.min.js')}" />

<!--lightboxを設定 -->
<apex:includeScript value="{!URLFOR($Resource.lightbox, 'lightbox/resource/lightbox_plus.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.lightbox, 'lightbox/resource/lightbox.css')}"/>


<!--imgpreview.jsをリンクを設定 -->

    <apex:pageBlock title="取引先一覧" id="pageblock">
        <apex:form id="form">
            <apex:pageblockTable value="{!accountWrapList}" var="ac" id="table">
                <apex:column >
                    <apex:facet name="header">name</apex:facet>
                    <apex:outputField value="{!ac.ac.name}" />
                </apex:column>
               <apex:column >
                    <apex:facet name="header">id</apex:facet>
                    <apex:outputField value="{!ac.ac.id}" />
                </apex:column>
               <apex:column >
                    <apex:facet name="header">電話</apex:facet>
                    <apex:outputField value="{!ac.ac.phone}" />
                </apex:column>

                <apex:column >
                    <apex:facet name="header">画像</apex:facet>
                        <apex:outputLink value="{!ac.imageSrc}" styleclass="preview" rel="lightbox[demo]" target="_blank" ><apex:image value="{!ac.imageSrc}" width="30px" height="30px" /></apex:outputLink>
                </apex:column>
 
            </apex:pageblockTable>
        </apex:form>
    </apex:pageBlock>


<style>
    #preview{
    position: absolute;
    border: 3px solid #333;
    background: #444;
    padding: 5px;
    display: none;
    color: #FFF;
    text-align: center;
}
</style>
<script>
/*
 * Image preview script
 * powered by jQuery (http://www.jquery.com)
 *
 * written by Alen Grakalic (http://cssglobe.com)
 *
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 
this.imagePreview = function(){
    /* CONFIG */
       
        xOffset = 10;
        yOffset = 10;
       
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result
       
    /* END CONFIG */
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";   
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                               
        $("#preview")
            .css("top",(e.pageY + yOffset) + "px")
            .css("left",(e.pageX + xOffset) + "px")
           .fadeIn("fast");                       

    },
    function(){
        this.title = this.t;   
        $("#preview").remove();
    });
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY + yOffset) + "px")
            .css("left",(e.pageX + xOffset) + "px");
    });        
};


// starting the script on page load
$(document).ready(function(){
    imagePreview();
});
</script>
</apex:page>





--------------------------------------------------------------------------------------

このブログについて
  • 全記事一覧(時間順)
  • このブログについて
  • 私のプロフィール
  • 当ブログで扱っている動画について
  • 記事違いなコメントのお返事

  • カテゴリー
    twitter
    カレンダー
    01 | 2015/02 | 03
    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
    Amazon
    でたらめな当ブログにぴったりな商品を自動で表示するみたいです。



    月別アーカイブ
    プロフィール

    たづみ

    Author:たづみ
    ・1981年生まれの男
    ・もう少し詳細なプロフィールはこちらで

    最新コメント
    アクセスランキング
    [ジャンルランキング]
    日記
    1757位
    アクセスランキングを見る>>

    [サブジャンルランキング]
    会社員・OL
    357位
    アクセスランキングを見る>>