著者アーカイブ 村上

村上 著者:村上

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

 

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

村上 著者:村上

【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アプリ開発時に、アプリアイコンを設定する方法でした。