著者アーカイブ 村上

村上 著者:村上

【副作用】電子音が低く聞こえるときは咳止め薬「フラベリック錠」を疑え

今回はプログラミングに関する記事ではありません。悪しからず。

先々週くらいから体調を崩しており、内科を受診したのですが、その時に処方された薬について注意喚起です。
咳止めとして「フラベリック錠」という薬を処方されたのですが、こちら副作用として音が半音くらい低く聞こえることがあるそうです。
ちなみに、前回もこのフラベリック錠服用後に音が狂ったし、同じ薬を服用した同僚や上司も同じ症状を訴えていたので、多分これが原因で間違いないはず。

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

薬の副作用で音が低く聞こえる!異常が起きるテグレトールなどの薬|健康生活
http://health-to-you.jp/sideeffect/otofukusayo0331/

こちらのサイトによると、こういった音が低く聞こえるという現象には仮説がいくつかあるらしく、下記2点のような仮説が立てられるのだとか。

  • 記憶を司る働きも持っている大脳辺縁系にお薬が働きかけて、入ってきた情報の処理に失調を起こしているのではないか
  • 耳の機能として内耳にある蝸牛のコルチ器官と言うところに生えている外有毛細胞(音の高さを感知するための増幅を担当する)が薬の影響を受けているのではないか

なお、この音が低く聞こえる現象ですが、薬の副作用によるもののため、服用をやめれば徐々に回復していきます。
私の場合、3日も経てばほぼ元通りでしたね。
まだ若干違和感は残っておりますが…電話の音は元に戻りました。

別に音楽関係の職業ではないため大きな影響はないかと思っていましたが、電話の音が狂うので、つい反応が遅れてしまいます。
それ以外では特に問題はないかな?

面白かったのが、音がおかしく聞こえるのは、電話の音や、給湯器の音などの電子音のみだったこと。
人の声はいたって普通なんですよね。
恐らく、電子音は一定のため音を覚えやすく、そこから音が外れたときの差が分かりやすいためかなと思われます。

 

ということで、薬の副作用には皆様注意してください。

なお、症状は違いますが、気管支拡張剤にも副作用があるので、こちらも覚えておくといいかも。
薬の名前は忘れてしまいましたが、手の震えが起こる場合があるそうです。

辛い症状を和らげてくれるお薬ですが、こういった副作用があることもお忘れなく。
何か違和感を感じたら、すぐに服用をやめるか、お医者様にご相談するようにしてください。

村上 著者:村上

【Android】アプリに不要なパーミッションが追加されているときの対処法

今回初めて遭遇しましたが、開発したAndroidアプリに入れた覚えのないパーミッションが追加されているときの対処法です。
なお、追加されていたパーミッションは、android.permission.READ_PHONE_STATE でした。
が、アプリ内ではこの権限は不要のため(そもそも追加した記憶もない)、こちらを削除します。
ですが、そもそも パーミッションを記述してあるはずの AndroidManifest.xml に、READ_PHONE_STATE が記述されていないんですよね…。
本当に、一体いつ追加されたのやら。

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

対処法: 不必要なPermissionが勝手に追加されてるとき|Android開発・エラー置き場
http://android.tecc0.com/?p=161

で、削除方法ですが、

  1. targetSdkVersion を更新
  2. LibraryのtargetSdkVersion を更新
  3. AndroidManifest.xmlで上書きして削除

上記の3つがあるようです。
私は一番手っ取り早そうな3をチョイスしました。

 

3.の対処法は、AndroidManifest.xml に下記を追加して、特定のパーミッションを無効にします。

// パーミッションを無効に
<uses-permission android:name="android.permission.READ_PHONE_STATE" tools:node="remove" />

ポイントは最後の方に書かれている tools:node=”remove” です。

こちらを記述したら、あとは通常通り ビルド → 実行します。
スクショを撮り忘れましたが、設定 > アプリ からアプリの詳細を確認したところ、許可された権限の一覧から 不要な権限が削除されていました。

 

以上、アプリの不要なパーミッションを削除する方法でした。
ですが、何故このパーミッションが追加されたのか?という根本的な解決にはなっていないので、対処法 1か2で、解決策を探りたいと思います。

村上 著者:村上

【JavaScript】クライアント側にデータを無期限に保存できる「LocalStorage」

クライアント(ブラウザ)側にデータを保存する方法としては、Cookie がよく使われているかと思います。
が、個人的に使い勝手が良いと思っているのが、「Local Storage」です。

Local Storage も Cookie と同じように、ブラウザにデータを保存できます。
データの保存・取得・削除・全クリアなどの操作は、JavaScriptで行います。
Cookie と LocalStorage の違いをまとめた表はこちら。

別ウィンドウでのデータ共有 データの有効期限 データ量の上限 サーバーへのデータ送信
Cookie できる 指定期限まで有効 4KB サーバーへアクセスするたびに毎回自動送信
LocalStrage できる 永続的に有効 5MB 必要時のみスクリプトやフォームなどで送信

なお、こちらの表は、下記のサイトから転載させて頂いております。

Web Storage ‐ HTML5のAPI、および、関連仕様
http://www.htmq.com/webstorage/

 

具体的な使い方は、下記のとおりです。
 

・データの保存、上書き

window.localStorage.setItem('nickname', 'murakami');
localStorage.nickname = 'murakami';

上記のどちらでもOKです。
個人的には、上の書き方の方が好みなので、こちらを使っています。
なお、1つめの記述方法ですが、window は省略可能です。
 

・データの取得

var name;
name = window.localStorage.getItem('nickname');
name = localStorage.nickname;

取得するための記述はこんな感じ。
なお、こちらの書き方についても、window は省略できます。
 

・データの削除

window.localStorage.removeItem('nickname');  // 'nickname'の値を削除
window.localStorage.clear();  // 全削除(初期化)

最後はデータの削除ですが、アイテム名を指定して、その値のみを削除する方法と、全データを削除する方法があります。
無いとは思いますが…書き間違えにご注意ください。
なお、例にもれず、こちらも window を省略可です。

 

個人的には、Cookie よりも直感的に操作出来るし、意図的にデータを消さない限りデータが半永久的に残るので使いやすいです。
Cookieで苦しめられた記憶のある方は、こちらの Local Storage の導入を検討してみてはいかがでしょうか。

村上 著者:村上

【コマンド】フォルダ構造をファイル名まで含めてツリー階層で表示する方法

使用頻度が少ないとすぐに忘れてしまうので、覚え書きとしてまとめ。
今回は、フォルダ構造をツリー階層で表示してくれるコマンドプロンプトのコマンド「tree」についてです。

 

コマンドプロンプト上で「tree」コマンドを実行すると、下の画像のように、現在のディレクトリ以下のフォルダをツリー階層で表示します。

※なお、一部のディレクトリ名等は、念のため伏せさせていただきました。
が、これだけだと、ディレクトリ名までしか表示されません。

で、ディレクトリ内にあるフォルダの名前まで表示するためには、コマンドのオプションを使用します。
使うのは「/F」というオプションで、tree コマンドの後ろに付けて実行します。
実行結果は下記のとおりです。

ちゃんとファイル名まで表示されました。

オプションはこれ以外にも、「/A」という ASCII文字で表示するものもあります。
こちらを指定すると、下のように表示されます。

そこまで大きく変化はしていませんが…線の表現の仕方で何となく見やすい気がしますね。
今回はあまり変化がよく分かりませんでした。

 

以上、フォルダ構造をツリー階層で表示する方法でした。
linux でもコマンドがインストールしてあれば使えるので、Windows・Macの両方で使えます。
資料作成の時に便利そうなので、機会があったらどんどん活用してきたいと思います。

村上 著者:村上

【JavaScript】クリックイベント等で取得したオブジェクトの中身

JavaScrip の クリックイベント等で、よく下記のようなコードを書くかと思います。

$("#button").on("click",function(event){
    // クリック時に実行したい処理
});

で、この時に取得できるオブジェクトから取得できる値の中で、使用頻度の高そうなものをまとめてみました。
今までは、イベントをキャンセルする event.preventDefault(); くらいしか使ったことがなかったんですよね。

 

・DOM要素の取得

var dom = event.target;

クリックしたDOM要素を取得できます。
が、これはこのまま使うよりも、後述する、ID・class名の取得と一緒に使う事の方が多そうですね。
 

・クリックした座標の取得

// x座標
var x = event.x;
// y座標
var y = event.y;

こちらはクリックした位置を取得できます。
click イベント以外にも、mousemove イベントや touchmove イベントでももちろん使えます。
 

・ID、class名の取得

// ID名取得
var id = event.target.id;
// class名取得
var class = event.target.className;

先述した、DOM要素の取得で取得できた要素の ID名、class名を取得できます。
 

・要素の幅と高さ

var width = event.target.offsetWidth;
var height = event.target.offsetHeight;

target で取得できた要素の幅と高さを取得する方法です。
単に width、height と記述しただけでは取得できないので、そこは要注意ですね
 

・要素のスタイル

var eventType = event.target.style;

要素のスタイルを取得できます。
これは .css() メソッドと一緒に使うことが多そうかな?
 

・イベントタイプの取得

var eventType = event.type;

イベントの種類を取得する方法です。
これも便利そうですね。

個人的には、要素名を取得するメソッドがあるとよかったのですが、無さそうだったので…今回はclass名の取得で対処しました。
まあ、でもclass名でも問題はなかったです。
…良く思うのですが、一度アルゴリズムでハマって考え込んでしまうと、「このやり方でなければいけない」と思い込んでしまうので、柔軟な発想って重要だなとつくづく思います。

 

以上、クリックイベント等で取得したオブジェクトから取得できる値の一覧でした。
他にも、要素の親要素・子要素を取得する方法もありましたが、今回は割愛します。
詳しくは、今回参考にさせていただいた下記のサイトをご覧ください。

【JavaScript】クリックイベントで取得したオブジェクトの使い方 まとめ|Web制作会社スタイル
http://www.hp-stylelink.com/news/2014/04/20140422.php

村上 著者:村上

プログラミング初心者におすすめの学習動画サイト「ドットインストール」

HTMLなど、プログラミングの勉強方法でおすすめなのが、こちらの「ドットインストール」というサイトです。

ドットインストール – 3分動画でマスターする初心者向けプログラミング学習サイト
https://dotinstall.com/

1つが約3分程の動画になっており、長すぎず見やすいです。
私も先輩スタッフにこのサイトのことを教えてもらいました。

 

実際の画面はこんな感じ。

こちらはHTMLのレッスン1「#01 HTMLとはなにか?」の画面です。
動画なので、分からないところを繰り返し聞けておすすめです。

また、学習できる言語は、HTMLのほかにも、CSS、JavaScript、jQuery、PHP、Ruby などがあります。
さらに、業務で使えそうなWordPress入門だったり、Android、iOSアプリの作り方だったり、サーバ環境の作り方だったり、ゲームプログラミングについてのレッスンもあります。
レッスンは、目的別で分類してあるので探しやすいです。

有料会員でないと見られない、中・上級者向けのプレミアムコンテンツもありますが、初歩的なことを勉強するなら、無料会員でも問題はなさそう。
少なくとも入門あたりであれば、どの言語・コンテンツでも見られます。
ちなみにプレミアム会員は、月額980円です。

 

ということで、おすすめのプログラミング学習サイトでした。
経験がある人には物足りないと思いますが、「プログラミングをやってみたいけど、何から勉強していいかわからない!」という入門者・初心者の方にはぴったりだと思います。
プログラミングを勉強したい人は、参考にしてみてください。

村上 著者:村上

【CSS】iOSで画面を滑らかにスクロールさせる方法

iOSの端末で縦に長い画面をスクロールさせた時に、慣性スクロールが効かず、途中でつっかえるような、ぎこちない動きになってしまったときの対処法です。
と言っても対処法というほど難しいことはなく、そのスクロールする要素に対して -webkit-overflow-scrolling プロパティを適用するだけです。
具体的には下記のとおりです。

<div class="scroll">
    <p>スクロールさせたい要素です</p>

    // 以下、要素の中身を記述
</div>
.scroll {
    height: 300px;
    overflow: scroll;
    -webkit-overflow-scrolling : touch;
}

重要なのは、4行目の -webkit-overflow-scrolling : touch; です。
これを指定することで、慣性スクロールが有効になります。

この -webkit-overflow-scrolling プロパティは、値に auto もしくは touch を指定します。
なお、デフォルト値は auto で、この場合は慣性スクロールが適用されません。

 

ということで、iOS で慣性スクロールを適用する方法でした。
この指定があるのとないのでは、実際に使っているときの感覚に大分違いがあるので、スマートフォンでの閲覧が考えられる場合は、記述しておいた方が無難だと思います。
スマートフォンでのスクロールがカクつくと、ここまでなのか!と意外なくらい、ストレスを感じました。

村上 著者:村上

【CSS】改行された文章で2行目以降の文字の始まりを字下げする方法

タイトルだけだとわかりにくいですが…要するに下の画像のように表示する方法です。

こちらは先日上司に、「これをやりたいんだけど方法を知ってる?」と聞かれて調べたのがきっかけです。
が、その時は既にやり方をご存知だった先輩がお答えしてくださいました。

 

使うCSSのプロパティは text-indent です。
文章の段落などの一行目のインデント幅を指定する際に使用するプロパティで、負の数を指定することもできます。

で、上の画像のように表示するには、下記のように記述します。

p{
    width: 200px;
    text-indent: -1em;
    padding-left: 1em; 
}
<p>※長い文章を書いたときに、2行目以降の始まりを字下げする方法です。<\p>

上のコードでは、まず text-indent を使って、一行目を左に 1em だけずらしています。
が、このままでは、ブラウザウィンドウの左端にめり込んでしまうため、padding-left プロパティで、p要素全体を 1em 分だけ、右に移動させています。
やっているのはこれだけ!
ちなみに、width は改行させるためにわざと入れているので、字下げには直接関係はありません。

勿論、字下げの幅は変更できますので、例えば【!注意!】のような文字分だけ、少し長めに字下げする、ということも可能です。

 

質問されるまで、このプロパティを知らなかったのですが…調べるたびに新しいプロパティがポコポコと出てくる感じがします。
全部覚えるのは無理にしても、少なくとも実際に調べて使ったものに関してはきちんと覚えておきたい…!
ちなみに、今のお気に入りは calc() です。
これ凄く便利!

村上 著者:村上

【jQuery】要素直下の子要素を取得する方法

これまた業務中に方法を調べたものについてまとめ。
今回は、指定した要素の直下の子要素を取得する方法です。

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

jQueryで子要素を取得する方法:children(), find()
http://uxmilk.jp/10873

子要素を取得する方法には、children() メソッドと、find() メソッドを使う、二通りの方法があります。
なお、私は children() メソッドを使いました。

 

使い方はこんな感じ。

var children = $("#parent").children("span");
<div id="parent">
    <span>子要素です</span>
</div>

上記のようにすると、idparent が指定された要素の直下にある子要素の span を取得できます。
要素名を指定すればOKなので、id名 や class名 がわからなくても使うことができます。

 

取得したい子要素の class名 や id名 が分かっている場合は、find() メソッドを使用します。
サンプルコードはこちら。

var children = $("#parent").find(".children");
<div id="parent">
    <div class="children">子要素1です</div>
    <div class="children">子要素2です</div>
</div>

こちらを実行すると、id 名が parent 要素の子要素である class 名が children が指定された要素を取得することができます。
なお、この find() メソッドは、子要素だけでなく、孫要素も対象となっているので、子要素の中にさらに class=children が指定された要素があれば、その孫要素も取得できます。
一括でごっそりと要素を取得したいときに便利そうですね。

 

ということで、以上、要素直下の子要素を取得する方法でした。
また、昨日の記事で紹介した、クラス名を取得する attr() メソッドをあわせて使えば、親要素が parent である span 要素のクラス名を取得する、ということも出来ちゃいます。
単体では使い道があまりないかもしれませんが…こういった合わせ技をしたいときにすごく便利なメソッドですね。

なお、昨日の記事はこちらから。

【jQuery】要素に指定したclass名などの属性の値を取得する方法

こちらも参考になれば幸いです。

村上 著者:村上

【jQuery】要素に指定したclass名などの属性の値を取得する方法

HTML要素に指定された class 名や id 名などを取得する方法です。
私は今回、class名を取得するのに使いました。

 

使用するメソッドは「attr()」です。
サンプルコードはこちら。

// div要素のclass名を取得
var className = $("div").attr("class");

<div class="sample">DIV要素です</div>

上記を実行すると、変数 className には div要素のクラス名である「sample」が代入されます。

属性の取得についてはこんな感じです。
とても簡単でした!

 

また attr メソッドは、属性を取得するだけではなく、追加することもできます。
サンプルコードはこちら。

// div要素のid名にsampleと指定
$("div").attr("id", "sample");

<div>DIV要素です</div>

こちらを実行すると、div要素に id=”sample” が追加されます。

classの追加なら .addClass() メソッドもありますが、こちらの attr() メソッドは、属性名と値を指定できるので、class以外にも、id、href、type、value なんかも追加できます。
また、下記のように属性を一度に複数追加することもできるので、コードがすっきりして分かりやすいです。

$("div").attr({id : "sample",
               class : "text"});

 

追加があるなら削除もできる、ということで、属性の削除には removeAttr() メソッドを使います。

// div要素のclass名を削除
$("div").removeAttr("class");

<div class="sample">DIV要素です</div>

上記を実行すると、class属性が削除されます。

このあたりはセットで覚えておくと良さそうですね。

 

ということて、要素に指定された属性の値を取得する方法でした!
class名に○○が指定された要素を取得、というのは使用したことがあるのですが、divに設定されたクラス名自体を取得する、というのはやったことがなかったので、今回調べてまとめてみました。
似たような箇所で悩んでいる方は、是非ご参考にしてください。