著者アーカイブ 村上

村上 著者:村上

【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文を一緒に使ったことがないので、この使い方は新鮮に感じますね。

 

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

村上 著者:村上

【Android】ビルド時の「Error:Execution failed for task ‘:processDebugGoogleServices’.」の対処法

Cordova アプリで、新しくプラグインを追加したところ、Androidでエラーが発生したので、その対処法について。
ちなみに、追加したプラグインは「cordova-plugin-admob-free」で、アプリ内に広告を入れるためです。
が、このプラグインを追加してビルドしたところ、エラーが発生しました。

 

遭遇したエラーの全文はこちら。

Error:Execution failed for task ‘:processDebugGoogleServices’.
> Please fix the version conflict either by updating the version of the google-services plugin (information about the latest version is available at https://bintray.com/android/android-tools/com.google.gms.google-services/) or updating the version of com.google.android.gms to 9.0.0.

Google翻訳にかけてみたところ、どうやら processDebugGoogleServices の実行に失敗しているようです。
失敗する要因は、バージョンの競合とのこと。
そのため、対処法としては、build.gradle に記述されている com.google.android.gms のバージョンを 9.0.0 に更新するのが有効なようです。

具体的には下記のとおりです。

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    // SUB-PROJECT DEPENDENCIES START
    compile project(":CordovaLib")
    compile "com.google.android.gms:play-services-base:9.0.0"
    compile "com.google.android.gms:play-services-ads:9.0.0"
    compile 'com.android.support:appcompat-v7:23.2.1'
    compile "com.facebook.android:facebook-android-sdk:4.+"
    compile "com.google.firebase:firebase-core:9.0.0"
    compile "com.google.firebase:firebase-messaging:9.0.2"
    // SUB-PROJECT DEPENDENCIES END
}

上記コードの、5、6行目の com.google.android.gms:play-services-basecom.google.android.gms:play-services-ads のバージョンを 9.0.0 に変更しました。
が、これだけだとまだエラーが発生するので、9、10行目の com.google.firebase:firebase-corecom.google.firebase:firebase-messaging のバージョンも 9.0.0 に変更します。

なお、10行目の com.google.firebase:firebase-messaging だけバージョンが 9.0.2 なのは、別のエラーが発生したためです。
ついでに、7行目の com.android.support は com.android.support:support-v4:24.1.1+” から com.android.support:appcompat-v7:23.2.1 変更しており、これも別のエラーの対策のためです。

上記のコードのように build.gradle を修正したところ、問題なく実行することができました。

 

以上、ビルドエラーの対処法でした!
ちなみに、2つ目のエラーの方が、ビルドが通ってしまう分、大変でした…。
ビルドは通るのに、いざ実機で実行するとアプリが落ちるという…。
何とか解決できたので良かったです。
Codova はやっぱり難しい!

村上 著者:村上

【Cordova】アプリのアイコンの設定方法とAndroidのアイコンサイズまとめ

マージに失敗したのか、Cordovaアプリのアイコンの設定をしている記述が掻き消えたので、備忘録を兼ねてまとめ。
これでもしもう一度コードが吹っ飛んでも大丈夫!

 

アプリのアイコンは config.xml で指定します。
まず、iOSアプリのアイコンは、下記のように記述します。

<platform name="ios">
    <icon height="180" src="res/icon/ios/icon-60@3x.png" width="180" />
    <icon height="60" src="res/icon/ios/icon-60.png" width="60" />
    <icon height="120" src="res/icon/ios/icon-60@2x.png" width="120" />
    <icon height="76" src="res/icon/ios/icon-76.png" width="76" />
    <icon height="152" src="res/icon/ios/icon-76@2x.png" width="152" />
    <icon height="40" src="res/icon/ios/icon-40.png" width="40" />
    <icon height="80" src="res/icon/ios/icon-40@2x.png" width="80" />
    <icon height="57" src="res/icon/ios/icon.png" width="57" />
    <icon height="114" src="res/icon/ios/icon@2x.png" width="114" />
    <icon height="72" src="res/icon/ios/icon-72.png" width="72" />
    <icon height="144" src="res/icon/ios/icon-72@2x.png" width="144" />
    <icon height="29" src="res/icon/ios/icon-small.png" width="29" />
    <icon height="58" src="res/icon/ios/icon-small@2x.png" width="58" />
    <icon height="50" src="res/icon/ios/icon-50.png" width="50" />
    <icon height="100" src="res/icon/ios/icon-50@2x.png" width="100" />
    <icon height="1024" src="res/icon/ios/icon-1024.png" width="1024" />
</platform>

Androidのアイコンの設定はこちら。

<platform name="android">
    <icon density="ldpi" src="res/icon/android/icon-ldpi.png" />
    <icon density="mdpi" src="res/icon/android/icon-mdpi.png" />
    <icon density="hdpi" src="res/icon/android/icon-hdpi.png" />
    <icon density="xhdpi" src="res/icon/android/icon-xhdpi.png" />
    <icon density="xxhdpi" src="res/icon/android/icon-xxhdpi.png" />
</platform>

が、Androidのアイコンサイズがいまいちわからないので簡単にまとめ。
このアイコンサイズについて、毎回こういったアイコンを準備するたびに調べているので、今回まとめました。

解像度 アイコンサイズ
ldpi 36×36px
mdpi 48×48px
hdpi 72×72px
xhdpi 96×96px
xxhdpi 144×144px
xxxhdpi 192×192px

あとは、Android・iOS 共に、上の表などを参考に、それぞれの画像を用意すれば設定完了です。
(上記コードだと、res/icon ディレクトリにそれぞれ android、ios フォルダを用意し、アイコンを保存しています)
いつも通りにビルドした後、実機で実行すればアイコンが設定されています。

 

以上、Cordovaアプリ開発時に、アプリアイコンを設定する方法でした。

村上 著者:村上

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

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

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

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

薬の副作用で音が低く聞こえる!異常が起きるテグレトールなどの薬|健康生活
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 の導入を検討してみてはいかがでしょうか。