著者アーカイブ 村上

村上 著者:村上

【スマートウォッチ】体温で発電できる充電不要の「MATRIX PowerWatch」

気になるニュースを見つけたのでご紹介。
なんと、体温で発電して充電が不要なスマートウォッチ「MATRIX PowerWatch」が明日販売されます。

こちらのスマートウォッチを取り上げた記事はこちらから。

体温で発電、充電不要のスマートウォッチが明日発売。MATRIX PowerWatch日本上陸
https://japanese.engadget.com/2018/04/11/matrix-powerwatch/

「世の中はムダな熱であふれている」–体温で発電、充電不要な「MATRIX PowerWatch」
https://japan.cnet.com/article/35117601/

記事によると、なんでも身に着けた利用者の体温と外気温との温度差で発電しているのだとか。
全く発電できるイメージがわかないのですが…そんなことができるんですね。

 

私もスマートウォッチではありませんが、ドコモの「ムーヴバンド3」というヘルスバンドを愛用しています。
が、確かに充電が面倒だったりするんですよね。
スマートウォッチと比べると、はるかに消費電力が少ないので毎日充電するわけではないのですが、逆に忘れたころに充電が無くなるので、気が付けば充電が切れていた…ということもありました。
充電が少なくなると、バイブレーションで教えてくれるのですが…たまに気が付かないんですよね。

その点、この「MATRIX PowerWatch」は、そもそも充電の必要がないのが凄く良いですね。

 

スマートウォッチとしての機能は、

  1. 歩数計
  2. 消費カロリー計
  3. 睡眠量計

上記の3点ができるとのこと。
基本的な機能のみに絞られていて、使いやすそうです。
なお、最上位版では、スマートフォンと連携して、電話着信やメッセージの通知を受け取ることができるとのこと。

ディスプレイは白黒の電子ペーパーが使われており、消費電力を押さえているとのこと。
また、出荷時から日本語表示に対応しているとのことでした。

が、発電機能を備えているため、サイズは本体直径が46mm~60mmで、厚さは12.5mm~13.5mmと、結構大きめです。
華奢な女性が付けると、かなりゴツそうに見えるのではと思いますね。
お値段は3万2800円(税別)~4万2800円(税別)です。

なお、発売日はご覧の通りです。

  1. ベーシックモデル『PowerWatch Silver』…4月12日
  2. 中間モデル『PowerWatch Black Ops Pack』…4月12日
  3. 最上位モデル『PowerWatch X』…5月予定

 

気になったので取り上げはしましたが、買うかどうかというと正直買わないかな…。
見た目はすごく好みだし、機能面にもそこまで不満はないのですが、いかんせん大きすぎる気がします。
そもそも、スマートウォッチよりも、ヘルスバンドの方が私の需要にはあっているんですよね。

が、好みは人それぞれだと思いますので、気になった方は是非購入を検討してみてはいかがでしょうか?

村上 著者:村上

【CSS】要素の幅や高さを指定する単位vw、vhとは

昨日の私の記事の中で紹介したCSSプロパティに

height : 100vh;

上記のようなものがありました。
今回はこのプロパティについてです。

 

この vw や vh とは要素の幅や高さを指定する時に使用する単位です。
viewport widthviewport height の略です。

ビューポートとは何かについては下記のサイトが参考になります。

実践!スマホサイトのviewport設定 – 第1回 viewportとはなにか?|CodeGrid
https://app.codegrid.net/entry/whats-viewport

ごく簡単に説明すると、ビューポートとは表示領域のことで、PCなどのデスクトップ環境では、ブラウザのウィンドウサイズにあたります。

そのため、例えば要素に

width: 100vw;

上記のように指定すると、このCSSを指定した要素の横幅は、ウィンドウの横幅100%となります。
ウィンドウ横幅 100%=100vw なので、width: 10vw; と変更すると、要素の横幅はウィンドウ横幅 1/10、つまり10%になります。
高さを指定したいときは、viewport height を使い、例えば height: 100vh; と記述すると、要素の高さはウィンドウの100%になります。

今まで通り、width: 100%; を使ってもいいのですが、これは親要素に対してのパーセンテージになるため、仮に親要素の幅が ウィンドウの50%の幅だった場合は、width: 100%;を指定しても、ウィンドウの横幅 50% にしか広がりません。
その点、vw、vh を使えば、親要素の影響なく、ウィンドウの画面サイズを基準に、幅や高さを指定することができます。

私は主に、スマートフォンの画面デザインの時に、calc() と一緒に下記のように使うことが多かったです。

height: calc(100vh - 100px);

上記のように指定すると、このプロパティを指定した要素の高さは、ブラウザの画面の高さから 100px だけ引いた高さになります。
そのため、わざわざJavaScriptで画面の高さを取得して、そこから 100px 引いて、そしてCSSの高さを再指定して…ということをしなくて済むので、かなりコードがすっきりしました…!

 

以上、要素の高さや幅を指定するビューポートの単位 vw、vh についてでした。
なお、他にも vmax や vmin というものもあるそうですが…こちらは使ったことがないので、今回は割愛します。
興味のある方は、ご自分で調べてみてください。

村上 著者:村上

【CSS】知らないプロパティがあるかも「「出会えたことに感謝したいCSSベスト3」まとめ」

今回の記事は、「#出会えたことに感謝したいCSSベスト3」というTwitterのタグをまとめたサイトについて。
見ているだけでも、私の知らないCSSプロパティばかりで、かなり参考になりそうだったので紹介します。

サイトへのリンクはこちらから。

「出会えたことに感謝したいCSSベスト3」まとめ(随時更新中)
https://togetter.com/li/1216261

 

流し読みしているだけでも、知らないプロパティがわんさか出てくるので、かなり勉強になります。
中でも良く挙げられているのが「display: flex;」というプロパティでした。
こちらはこのプロパティを指定した直下の要素が並列になるというものです。
使ったことはないのですが、調べた感じではとても便利そうでしたので、機会があったら是非使ってみたいですね。

あとは、以前紹介した calc プロパティも挙げられていました。
私もこれは凄く便利だと思うので、TOP3の中に入れると思います。

ちなみに、私が挙げるとしたらこんな感じ。

  1. calc
  2. height: 100vh;
  3. transform: translate(-50%, -50%);

calc が 1位なのは譲れませんね。
2位は、高さを画面の 100% にしてくれる vh という単位で、これにはかなり助けられました。
3位の transform: translate(-50%, -50%); は、要素を左右上下中央揃えにしたいときに重宝しています。

 

当たり前ですが、CSSのプロパティって知らないと使えないので、こんな風に色んな人が「これ良いよ!」と紹介してくれると、知らなかったプロパティに出会えて凄く参考になります。
調べるにも限度があるので…こういうまとめサイトも積極的に目を通してみようかと思います。
興味があれば是非見てみてください!
Webデザイナーさん以外の方でも参考になると思います。

村上 著者:村上

【HTML】フォームデータの送信先を指定する「formaction」属性

デバックのためにコード見ていて、使ったことがない属性だったので、覚え書きとして。
HTML の Button要素である、「formaction」属性についてです。
なお、今回参考にさせていただいたサイトはこちら。

formaction属性 ≪ button要素 ≪ フォーム ≪ 要素 ≪ HTML5入門
http://html5.cyberlab.info/elements/forms/button-formaction.html

 

私がよく使うFormの書き方ですが、


<form action="データ送信先" method="post">
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="submit" name="submit" value="送信">
</form>

今まで、上記のように書いていました。

が、今回後輩君が書いたコードの中に、下記のような記述を発見。



<form action="[データ送信先URL]" method="post">
    <input type="text" name="name">
    <input type="email" name="email">
    <button type="submit" formaction="[データ送信先]">送信</button>
</form>


butoon要素に、見慣れない formaction という属性があります。

 

この「formaction」ですが、HTML5で新たに追加されたもので、フォームデータの送信先URLを指定するときに使う属性とのこと。
で、注意したいのが、button要素の formaction属性 で定した送信先URLは、form要素の action属性 で指定した送信先URLよりも優先されること。
そのため、下記の場合は、botton要素 で指定した「送信先URL2」が優先されます。



<form action="[データ送信先URL1]" method="post">
    <input type="text" name="name">
    <input type="email" name="email">
    <button type="submit" formaction="[データ送信先2]">送信</button>
</form>


私の場合、うっかり違うURLを指定してしまい、違う送信先に送られる!?ということをやらかしそうです。
それを回避するためには、冒頭で挙げた記述方法を使うのが良さそうですね。

 

ということで、見慣れない formaction属性 についてのまとめでした。
これ便利!使おう!というよりも、こんな属性あるよ!という意味合いの方が強いまとめでした。

村上 著者:村上

【jQuery】指定した要素に class を追加・削除する方法

今日、後輩くんに質問されたので、自分の覚書としてもまとめ。
要素に指定したクラスを削除する方法です。
もちろん、削除だけでなく、追加もできます。

参考にしたサイトはこちら。

jQuery classの追加・削除 – Qiita
https://qiita.com/NobuyaIshikawa/items/300739f6da6a95e58306

 

使うメソッドは、addClass()removeClass() です。

・addClass()

使い方は下記の通り。

<div id="content">クラスを追加する要素</div>
$("#content").addClass("add");

上記の jQuery を実行すると、id=”content” を指定したDIV要素に対して、class=”add” が追加されます。
 

・removeClass()

removeClass() の使い方は下記の通り。

<div id="content" class="remove">クラスを削除する要素</div>
$("#content").removeClass("remove");

こちらを実行すると、class=”remove” が DIV要素から削除されます。
 

・toggleClass()

こちらは今回調べて初めて知ったメソッドですが、要素に指定したクラスがあったらクラスを削除し、クラスがなかったらクラスを追加する、というものでした。
これなら、要素があるかどうかを調べる hasClass() を使って検索し、その結果で条件分岐…という処理を書かずにすみますね。
具体的には下記のとおりです。

if($("#content").hasClass("add")){  // add という class があるかを調べる
    $("#content").removeClass("add");  // あったら削除
} else {
    $("#content").addClass("add");  // なかったら追加
}

上記の処理が、下記の一行で済みます。

$("#content").toggleClass("add");

これは楽ですね!
見慣れないと、逆に何をしている処理なのかがわかりにくいので、コメントが必須かもしれませんが…コードの行数が少なくてすむ&簡略できるのは嬉しいです。

 

ということで、jQuery で class の追加・削除を行う方法でした。

村上 著者:村上

【CSS】アルファベットの大文字・小文字での表示を指定する方法

私の場合は、小文字が強制的に全て大文字になってしまったのがきっかけで調べたプロパティです。

使用するプロパティは「text-transform」です。
こちらは、アルファベットを大文字もしくは小文字で表示するかを指定できます。
指定できる値は下記のとおりです。

表示される文字の形式
none 初期値。大文字・小文字は記述した通りに表示されます
capitalize 単語の先頭文字を大文字で表示します
lowercase 全ての文字を小文字で表示します
uppercase 全ての文字を大文字で表示します

私は none を使いましたが、capitalize も便利そうですね。
が、たまに頭文字を大文字にしたくない時もあるので、そういうイレギュラーなときのことも考えると、none を使うのが無難かな。
で、今回すべての文字が大文字になった原因は、恐らく text-transform: uppercase; が body など結構上位の要素の方に指定されていたためだと思われるので、body で !important を使って強制的に上書きしました。
とりあえず、これで解決です。

 

以上、アルファベットの大文字・小文字での表示を指定する方法でした。
何故か小文字で書いたはずの英単語がすべて大文字になる!という場合は、こちらのプロパティが記述されていないか疑ってみてください。

村上 著者:村上

【Xcode】Type ‘UISlider’ does not conform to protocol ‘ValidatableInterfaceElement’エラーへの対処法

久しぶりに遭遇したXcodeでのエラーです。
特に内容を変更した記憶のないアプリを開いてみたら、いきなりビルドエラーが発生しました。
エラー分は下記のとおりです。

Type 'UISlider' does not conform to protocol 'ValidatableInterfaceElement'

どうやら、CocoaPodでインストールした「Validator」というライブラリ内部でエラーが発生していたことまでは突き止めたのですが、その原因がわからず…検索してもヒットしない状況でした。
なお、Validator についてはこちらから。

GitHub – adamwaite/Validator
https://github.com/adamwaite/Validator

が、会社にあるもう一台のMacbookでは問題なく動いていたので、そこが謎でした。

 

で、色々見てみた結果、どうやらXCodeのバージョンが影響していたことが判明!
先日、Xcode をアップデートして 9.3 にしたのですが、これを 9.2 に戻したら問題なく動き、ビルドも完了しました。
……Xcodeは不用意にアップデートしてはだめですね…。

なお、Xcodeの以前のバージョンをインストールする方法は、下記の記事を参考にしました。

Xcodeの旧バージョンをインストールする方法 – Qiita
https://qiita.com/TsukasaHasegawa/items/0d7d5c2cf3a2b8ce8993

ただ、ダウンロードに凄く時間がかかったので、何か別の作業をしながらのんびり待つことをおすすめします。
ダウンロード時間が「残り約60分」の表示を見た時は、正直ため息を付きそうになりました…。

 

ということで、ビルドエラーの解消方法でした。
同僚に聞いたところ、Xcode のバージョンの違いのせいで発生するバグってあるようなので、バグの原因が分からないときに確認するようにしましょう。

村上 著者:村上

【CSS】要素に指定したCSSスタイルを解除する方法

今回はCSSを解除する方法について。
複数のCSSファイルを適用しているサイトで、指定した要素に既に別のスタイルが指定されている場合があるかと思います。
で、その既に設定されているCSSスタイルを解除する方法です。

参考にさせていただいたサイトはこちらから。

CSSのスタイルを解除する – Qiita
https://qiita.com/kijitora-neko/items/155b1bc499a365ea1e3f

 

スタイル解除に使うのは、initial という値です。
これを、スタイルを解除したいプロパティの値に指定するだけ。

指定方法のサンプルは下記のような感じです。

div {
    display: initial;
}
span {
    text-align: initial;
}

解除方法はたったこれだけです。

 

ということで、CSSスタイルを解除する方法でした。
!important を使って上書きする方法はありますが、解除は知らなかったので、これはなかなか使えそうです。

が、Internet Explorer 10 では動作しないとのことなので、動作確認は念入りにしてください。
また、プロパティによっては初期値がある場合もあるので、その時は初期値を指定したほうがよさそうです。
状況に応じて、便利に使いましょう。

村上 著者:村上

【Mozilla Thunderbird】メールの行の折り返し文字数の設定方法

今日は4月2日ということで、今日から新入社員の方々が入社する会社も多いかと思います。
で、たいていの会社で使うであろうメールソフトで設定しておくと便利な項目が「行の折り返し文字数を設定する」だと思います。
一般的に、メールでは35~40文字で折り返すのが一般的なため、このあたりで折り返しがされるように設定しておくと便利です。
なお、今回紹介するのは「Mozilla Thunderbird」の設定方法です。

今回参考にさせていただいたサイトはこちらから。

Thunderbirdで1行の折り返し文字数を変更する方法: 小粋空間
http://www.koikikukan.com/archives/2012/04/25-000300.php

 

右上のメニューから「オプション」を選択します。

すると下の画像のようなウィンドウが表示されますので、「詳細」タブを選択し、「一般」のタブの下の方にある「設定エディタ」をクリックします。

さらにウィンドウが表示されるので、検索バーに「mailnews.wraplength」と入力します。
で、検索でヒットした要素をダブルクリックし、数値を任意の値に変更したら「OK」をクリックします。

設定は以上です。
なお、この数値は半角の文字数なので、全角の場合はその倍の数値を設定します。
私は全角35文字で改行するように指定しました。

 

以上、メールの折り返しする文字数の設定方法でした。
が、Thunderbird だと、見た目は改行されても、実際には改行されていないので、改行自体は手動で行いましょう。

村上 著者:村上

【MySQL】既存のテーブルをコピーして新しいテーブルを作る方法

すぐ忘れるので備忘録として。
データベースを扱っていると、既にあるテーブルの構造をコピーして新しいテーブルを作りたいときがあるかと思います。
今回はその方法について。

なお、参考にさせていただいた記事はこちらから。

MySQLテーブルをそのままコピーする – Qiita
https://qiita.com/ibarakids/items/bad052c55cfe6d85903d

 

SQL文はこちら。

CREATE TABLE [新しいテーブル名] LIKE [コピー元のテーブル名];

この分を実行すると、LIKE の後ろで指定した、コピー元のテーブルの構造をコピーして、新しいテーブルを作ることができます。

なお、データまでは引き継がれないので、作成されたテーブルは空です。
そのため、データもコピーしたい場合は、テーブルをコピーして作成した後、下記のSQL文を実行してください。

INSERT INTO [新しいテーブル名] SELECT * FROM [コピー元のテーブル名];

これで、データのコピーが完了します。
INSERT文と SELECT文を一緒に使ったことがないので、この使い方は新鮮に感じますね。

 

以上、テーブルを別名で複製する方法でした。
使用頻度が低いのですぐ忘れる自分のためにまとめた記事ですが、同じことをやりたい方は参考にしていただければ。