ページが見つかりませんでした https://lucklog.info Thu, 19 Jan 2023 01:12:24 +0000 ja hourly 1 https://wordpress.org/?v=6.2.4 https://lucklog.info/wp/wp-content/uploads/2020/05/icon.jpg ページが見つかりませんでした https://lucklog.info 32 32 【Cocoon】スキン「ゆっくり色が変化」を作成しました https://lucklog.info/cocoon-raku-color-changing/ https://lucklog.info/cocoon-raku-color-changing/#comments Wed, 28 Sep 2022 05:25:32 +0000 https://lucklog.info/?p=14397 2つ目のCocoonのスキンを作成してみました。

指定した4色がゆっくり入れ替わっていくスキン」です。サイトの背景色が入れ替わっていきます。

引用元:Chrome

また、「記事内のタイトル」と「サイドバーのタイトル」にもその色を適応させることができます。適応させると、選択した色を順番に適応させます。(色が薄いのは「不透明度」を設定することができるためです)

引用元:Wordpress>Cocoon

少し扱いにくいかもしれませんが…、興味がある方はお試しください!

スキンのダウンロード・アップロード

まずは、下記ページから最新版をダウンロードください。
スキン「ゆっくり色が変化」

子テーマ(Cocoon Child)にアップロード

子テーマをご利用の方はこちらをご確認ください。

ダウンロードしたファイルを解凍し、その「raku-color-changing」フォルダを下記のように「wp-content > themes > cocoon-child-master > skins 」に入れてください。

引用:Filezilla>Cocoon

そうすると、Cocoon設定>「スキン」タブの「スキン一覧」に当スキンが追加されます。

引用:Wordpress>Cocoon

親テーマ(Cocoon)にアップロード

子テーマをご利用ではない方はこちらをご確認ください。

ダウンロードしたファイルを解凍し、その「raku-color-changing」フォルダを下記のように「wp-content/themes/cocoon-master/skins 」に入れてください。

引用:Filezilla>Cocoon

そうすると、Cocoon設定>「スキン」タブの「スキン一覧」に当スキンが追加されます。

引用:Wordpress>Cocoon

使い方

使い方は下記5ステップでご利用いただけます。

  1. 当スキン「ゆっくり色が変化」を選択
  2. スキンカラーを4色選択
  3. 背景アニメーションの「一通り変化するまでの時間」「不透明度」を設定
  4. 記事内のタイトルの「不透明度」を設定
  5. サイドバー内のタイトルの「不透明度」を設定

※3、4、5はそのままの設定でも問題ありません
※4、5は適応させないことも可能です

1.当スキン「ゆっくり色が変化」を選択

上記「スキンのダウンロード・アップロード」で追加された「スキン一覧」の「ゆっくり色が変化」を選択して、「変更をまとめて保存」で保存します。
※保存は下記1~4の設定後でOKです

引用:Wordpress>Cocoon

2.スキンカラーを4色選択

当スキンを選択すると「表示スキン」の下に「スキンカラー」という項目が追加されます。

引用:Wordpress>Cocoon

そこで色を4つ選びます。選択した色は「背景アニメーション」「記事内のタイトル」「サイドバー内のタイトル」に適応されます。

 色選び

下記サイトさんが色選びの参考になると思います。
https://www.palettelist.com/ff3737/9de16f

また、下記サイトさんは、配色パターンに関するサイトをまとめてくれています(4色以外もあります)。
https://webdesign-trends.net/entry/15213

3.背景アニメーション

当スキンを選択すると「背景アニメーション」という項目も追加されます。

引用:Wordpress>Cocoon

そこで「一通り変化するまでの時間」と「不透明度」を設定できます。

一通り変化するまでの時間

背景アニメーションでは「スキンカラー」で選択した色がゆっくり入れ替わっていきます。赤・オレンジ・青・紫を選択したとすると、「赤⇒オレンジ⇒青⇒紫⇒青⇒オレンジ⇒赤」と1回のアニメーションで変化します。

この1回のアニメーションの時間を1秒~120秒の間で設定することができます。
時間を長くするとゆっくり変化し、短くすると早く変化します。

不透明度

不透明度は 1 ~ 100 を設定できます。100 にすると透明ではなくなり、1 に近づけるほどより透明になります

「Cocoon 設定 > 全体」の「サイト背景色」や「サイト背景画像」を設定しない場合は、不透明度を小さくするほど色が薄くなります。

引用:Wordpress>Cocoon

「サイト背景色」や「サイト背景画像」を設定した場合は、背景色や背景画像が透けて見えるようになります。

実際に見た方が分かりやすいと思いますので、不透明度を「30」、スキンカラーを下記4色で設定したもので各パターンを試してみます。

引用:Wordpress>Cocoon

「サイト背景色」「サイト背景画像」の設定なしの場合
背景が白いので、単純に薄くなります。

引用元:Chrome

「サイト背景色」を黒に設定した場合

引用:Wordpress>Cocoon

背景が黒いので、シックな色合いになります。雰囲気をガラッと変えることができます。

引用元:Chrome

「サイト背景画像」を設定した場合

引用:Wordpress>Cocoon

少し不思議な雰囲気が出せます。4色ともに同じ色にすると、単純に写真の雰囲気を変えることもできます。

引用元:Chrome

4.記事内のタイトル

当スキンを選択すると、「記事内のタイトル」という項目も追加されます。

引用:Wordpress>Cocoon

そこで「適応する/適応しない」と「不透明度」を設定できます。

適応する/適応しない

「適応する」を選ぶと下記のように記事内のタイトルに「スキンカラー」を順番に適応させます。「適応しない」を選ぶと記事内のタイトルには適応しません。

引用元:Chrome

不透明度(背景と線の色)

不透明度は 1 ~ 100 を設定できます。100 にするとスキンカラーで設定した色になり、1 に近づけるほど色は薄くなります

上の「適応する/適応しない」の画像が不透明度が「20」の場合です。不透明度を「100」にすると下記のようにスキンカラーと同じ色になります。

引用元:Chrome(見出し(H2)の場合)

見出しH4、H5の線にもこの不透明度が適応されます。

引用元:Chrome

不透明度(H3タイトルの左側の線の色)

Cocoonの見出し(H3)は下記のようなスタイルです。

引用元:Chrome

太い線(左側の線)と細い線(上・右・下の線)で色の濃さが異なります。

同じスタイルで設定できるように、太い線(左側の線)用に不透明度を用意しました。内容・設定方法は「不透明度(背景と線の色)」と同じです。

注意点と対処法

記事内のタイトルについて注意点があります。

たとえば、「スキンカラー」を赤・オレンジ・青・紫とした場合、記事内のH2に対して「1番目のH2を赤」「2番目のH2をオレンジ」・・・、H3も同様に「1番目のH3を赤」「2番目のH3をオレンジ」・・・というように色を付けています。H4以降も同様です。

上のような色付け方法なので、記事の構成が1段落目が「H2、H3、H3」構成、2段落目が「H2、H3」構成となると、下記色付けになります。

引用元:Chrome

「3番目のH3(青)」は青ではなく赤にしたいケースがあるかと思います。

対処法

見出しに対して「skincolor1」~「skincolor4」のクラスを設定すると、好きなスキンカラーを適応できます。

下記の場合だと「skincolor1」を指定すると赤、「skincolor2」はオレンジ、「skincolor3」は青、「skincolor4」は紫となります。

引用:Wordpress>Cocoon
ブロックエディタでの設定方法

1.見出しブロックを選択する

引用:Wordpress>Cocoon

2.画面右側にある「ブロック」をクリックする
3.一番下に「追加CSSクラス」があるのでそこに「skincolor1」~「skincolor4」を指定する

引用:Wordpress>Cocoon
旧エディタでの設定方法

1.「テキスト」タブをクリックする

引用:Wordpress

2.タグに「class=”skincolor1″」を追記する
※「skincolor1」~「skincolor4」のいずれかを指定してください

引用:Wordpress

ブロックエディタ・旧エディタでクラスを追加することで、タイトルに好きなスキンカラーを設定することができます。

引用:Wordpress>Cocoon

5.サイドバー内のタイトル

当スキンを選択すると「サイドバー内のタイトル」という項目も追加されます。

引用:Wordpress>Cocoon

そこでサイドバーのタイトルに対しても「適応する/適応しない」と「不透明度」を設定できます。内容・設定方法は上記「4.記事内のタイトル」と同じです。

色の付け方

サイドバーの場合は、「1つ目のウィジェットタイトルを赤」「2つ目のウィジェットタイトルをオレンジ」・・・というように色を付けます。タイトルがないウィジェットは数えないので、順番にスキンカラーが適応されます。

引用:Chrome

ライセンスについて

このスキンはWordPressテーマ、Cocoonのスキンです。「Cocoon」はGPLとなっておりますので、このスキン「ゆっくり色が変化」もGPLとなります。

Cocoonさんの利用規約がたいへん分かりやすいですので、リンクを掲載しておきます。
Cocoon 利用規約

何か不備な点等ありましたら、ご指摘いただけますと幸いです。

ご要望など

何かご要望がありましたら、お気軽にコメントからご連絡ください。

]]>
https://lucklog.info/cocoon-raku-color-changing/feed/ 2
【Cocoon】スキン「ゆっくり色が変化」のダウンロード https://lucklog.info/download-cocoon-raku-color-changing/ https://lucklog.info/download-cocoon-raku-color-changing/#respond Tue, 27 Sep 2022 09:00:16 +0000 https://lucklog.info/?p=14400 2022/11/22
【Cocoon】スキン「ゆっくり色が変化」を修正しました。
ゆっくり色が変化(Version: 1.1.0) 

  • Cocoon設定の「全体」の「サイトの均一化」の「サイト幅を揃える」にチェックを入れた場合も背景アニメーションが背景全体になるよう修正しました。

2022/11/16
【Cocoon】スキン「ゆっくり色が変化」を作成しました。
ゆっくり色が変化(Version: 1.0.0)

]]>
https://lucklog.info/download-cocoon-raku-color-changing/feed/ 0
【試して学習!CSS】CSSを実際に書いてみよう https://lucklog.info/css-lets-try/ https://lucklog.info/css-lets-try/#respond Sun, 31 Jul 2022 00:29:40 +0000 https://lucklog.info/?p=14209 CSSを使うとサイトの見た目を変更することができます。たとえば、文字の色や大きさ、背景の色や線を引いたりと、多くのことが出来ます。

ここでは何種類かCSSを実際に書いてもらいながら、慣れていただければと考えています^^

らくらく

カラカラカラ…
実際にCSSを使うときと、同じ形にしてるよ~

 今回のポイント
  • CSSを実際に書いてみる(★ここがメイン)
  • クラスとは?
  • CSSプロパティと値
  • 間違いやすい記号や書き忘れに注意!

早速書いてみよう!

説明は後ほど行いますので、まずは書いてみましょう!

これを実際に書いてみましょう。

.text-red {
  color: red;
}

ここに書いてください。

書いたら、下の文字をクリックしてみてください。

★このテキストに書いたCSSが適応されるよ★

らくらく

カラカラカラ…
文字が赤色に変わった?
変わらない時は、下をチェックしてみてね!小さい記号や似た記号があるから、忘れてたり、タイプミスがあるのかも(;; )

 文字の色が変わらない場合はココをチェック
  • 「text-red」の前に「.半角ドット)」はありますか?
  • 半角コロン)」と「半角セミコロン)」を間違っていませんか?
    「color」の後ろが「:(半角コロン)」で、「red」の後ろが「;(半角セミコロン)」です
  • 括弧は「{ }(中括弧)」です。違う括弧になっていませんか?
  • 入力ミスがないか確認してください
    一度「このように書いてみてください。」の内容をコピーして、「ここに書いてください。」に貼り付けてみてください。それで文字の色が変われば入力ミスの可能性が高いです。

説明

 こちらのCSSについて説明します。

.text-red {
  color: red;
}

「.text-red」とは?

まずは1行目の「.text-red」についてです。これはCSSセレクタの1つで「text-red」というクラス名を持つものに対してのCSS設定ですよという意味です。

{ }(中括弧)」で囲まれた部分がその範囲になります。これで1行目と3行目の内容が分かりました。

らくらく

カラカラカラ…
最初から完璧に理解する必要はないよ^^
よく使うものは勝手に覚えていくから、やってみるのが一番♪

クラス名を持つ?

「★このテキストに書いたCSSが適応されるよ★」という文字は「text-red」というクラス名を持っています。ウェブサイトはタグというもので囲まれていて、そのタグにクラス名が設定されています。

見た方が分かりやすいと思います。

<p class="text-red">★このテキストに書いたCSSが適応されるよ★</p>

<p>~</p>がタグです。文章などの段落には「p」タグを使います。クラスは「class=”text-red”」←ここです。このようにタグの中に「class=”~”」で設定します。

らくらく

カラカラカラ…
タグはサイト上では見えないよ、
タグ部分は人じゃなくて機械への言葉だと思ってOK♪

「color: red;」とは?

colorの後ろが「:(半角コロン)」、redの後ろが「;(半角セミコロン)」です。先ほども書きましたが、間違いやすいです。キーボード上も隣にあるので打ち間違いが多い記号です^^;

説明に戻りますね。「:(半角コロン)」の左側はCSSプロパティ名を設定します。文字の色を変更したい場合は「color」、文字の大きさを変更したい場合は「font-size」を指定します。このCSSプロパティ名は役割によって決められているので、「何を変更したいか」によって該当するCSSプロパティ名を探すことになります。

らくらく

カラカラカラ…
最初は地道に調べながらだけど、よく使うプロパティ名は自然に覚えちゃうよ^^

「:(半角コロン)」の右側はCSSプロパティ名に対する値を設定します。文字の色を赤にしたい場合は「red」、青にしたい場合は「blue」を指定します。CSSプロパティ名に対して設定できる値も決まっています。CSSプロパティ名と同様、値も探すことになります。

まとめると

まとめると、CSSの設定はが1セットとなります。

「CSSプロパティ名 」「:半角コロン)」「値」「;半角セミコロン)」

CSSプロパティを2つ書いてみよう!

今度は2つ以上のCSSを書いてみましょう!単純に2つ並べて書けばOKです(※改行しなくても大丈夫ですが、改行した方が見やすいです)。

これを実際に書いてみましょう。

.text-blue {
  color: blue;
  font-size: 36px;
}

ここに書いてください。

書いたら、下の文字をクリックしてみてください。

★このテキストに書いたCSSが適応されるよ★

らくらく

カラカラカラ…
今度は文字の色と大きさが変わるよー
もし変わらない時は、上にある「 文字の色が変わらない場合はココをチェック」を確認してみてね!

CSSを2行以上書くと、行末の「;(半角セミコロン)」を忘れるとCSSが効かなくなるので注意しましょう

まとめ

今回はここまでにします。

いかがでしょう?少しはCSSを設定することに慣れていただけたのであれば嬉しいです^^

最後にも今回のポイントをまとめておきます。

 今回のポイント
  • CSSを実際に書いてみる(★ここがメイン)
  • クラスとは?
  • CSSプロパティと値
  • 間違いやすい記号や書き忘れに注意

それでは、最後までお読みいただきありがとうございました!

]]>
https://lucklog.info/css-lets-try/feed/ 0
【CSS3】animationの各プロパティについて https://lucklog.info/css3-animation/ https://lucklog.info/css3-animation/#respond Thu, 14 Jul 2022 07:56:58 +0000 https://lucklog.info/?p=14031 animationで設定するアニメーション本体は@keyframesに記述します。animationはその@keyframesの名前を設定するだけです。

名前のほかにも、アニメーションの大枠の設定を行うのが「animation」になります。たとえば、アニメーションの開始タイミングや回数など、どのようにアニメーションが進行するかを設定することができます。

それでは、1つずつチェックしていきます。

animation-delay

animation-delayはアニメーションの開始タイミングを設定できます。

指定できる値は「s(※秒)」「ms(※ミリ秒)」でマイナス値も指定できます。初期値は「0s」です。

 複数のアニメーションを実行したいときに使えそうです。
たとえば、1つ目のアニメーションが終わってから2つ目のアニメーションを開始したときなど。

■0s(初期値)

開始まで0秒なので、すぐにアニメーションが開始します。

※●をクリックすると動きます

■2s

2秒経過後、アニメーションが開始します。

※●をクリックすると動きます

■-2s

「2秒経過した」として動作します。つまり、2秒経過後の位置からアニメーションが開始します。

※●をクリックすると動きます

animation-direction

animation-directionはアニメーションの再生方向を設定できます。

指定できる値は下記4つです。初期値は「normal」です。

  1. normal
    順方向。0%・fromから100%・toの順番
  2. reverse
    逆方向。100%・toから0%・fromの順番
  3. alternate
    1回目は順方向、2回目は逆方向、3回目以降も交互に繰り返す
    ※アニメーションの回数が1回であれば、「normal」と同じ
  4. alternate-reverse
    1回目は逆方向、2回目は順方向、3回目以降も交互に繰り返す
    ※アニメーションの回数が1回であれば、「reverse」と同じ
 「alternate」は往復させたい時など、使うタイミングがありそうです。また、「reverse」もアニメーションを簡単に反転できるので便利そうです。

■normal(初期値)

アニメーションは順方向に実行されます。2回目以降のアニメーションは「順方向の開始位置」に戻ってから再開します。

※●をクリックすると動きます

■reverse

アニメーションは逆方向に実行されます。2回目以降のアニメーションは「逆方向の開始位置」に戻ってから再開します。

※●をクリックすると動きます

■alternate

1回目のアニメーションは順方向に実行されます。2回目は逆方向に実行されます。それ以降は、順方向・逆方向を交互に繰り返します。奇数回目のアニメーションは「順方向の開始位置」、偶数回目のアニメーションは「逆方向の開始位置」から動作します。

※●をクリックすると動きます

■alternate-reverse

1回目のアニメーションは逆方向に実行されます。2回目は順方向に実行されます。それ以降は、逆方向・順方向を交互に繰り返します。奇数回目のアニメーションは「逆方向の開始位置」、偶数回目のアニメーションは「順方向の開始位置」から動作します。

※●をクリックすると動きます

animation-duration

animation-durationは1回のアニメーションに掛かる時間を設定できます。

指定できる値は「s(※秒)」「ms(※ミリ秒)」です。初期値は「0s」なのでプラスの値を設定しない限り、アニメーションは動作しません。マイナスの値は無効です。

 どれくらいの時間を掛けてアニメーションを行うか設定できます。ゆっくりしたり、早くしたりと必須のプロパティです。微調整してちょうど良いスピードに指定しましょう。

■0s(初期値)

アニメーションは動作しません。

※●をクリックすると動きます

■500ms

1回のアニメーションが500ミリ秒間で完了します。早いです。

※●をクリックすると動きます

■5s

1回のアニメーションが5秒間で完了します。ゆっくりです。

※●をクリックすると動きます

animation-fill-mode

animation-fill-modeは実行前後のスタイルを設定できます。実行前とは「animation-delay」で待機している間を指し、実行後とはアニメーション終了後を指します。

スタイルについて

分かりやすくするために@keyframesではない標準時は「●」、@keyframesの 0%・from は「」、100%・to は「となるようスタイルを指定しています。また、実行前が確認できるように「animation-delay: 1s」を設定しています。

指定できる値は下記4つです。初期値は「none」です。ただし、animation-direction・animation-iteration-countによって実行前後のスタイルは変わります。そちらについては、別途記事を作成しますが、スタイルが変わるパターンも2つ載せておきます。

  1. none
    スタイル指定はなし。よって、実行前後とも標準時のスタイル「●」となる
  2. forwards
    実行前のスタイル指定はなし、実行後は100%・toのスタイルが適応される。よって、実行前(delayの間)は「●」、実行後は「」となる
  3. backwards
    実行前は0%・from のスタイルが適応され、実行後のスタイル指定はなし。よって、実行前(delayの間)は「」、実行後は「●」となる
  4. both
    実行前は0%・from のスタイルが適応され、実行後は100%・toのスタイルが適応される。よって、実行前(delayの間)は「」、実行後は「」となる
 実装したいアニメーションをスムースに動作させるために、実行前後のスタイルを細かく設定する必要がある場合があります。下記例を見てみてください。アニメーション実行後は違うスタイルが適応されているかと思います。この部分もイメージしたアニメーションになるよう設定する必要があります。

■none(初期値)

スタイル指定はなしなので、実行前後とも標準時のスタイル「●」となります。

※●をクリックすると動きます

■forwards

実行前のスタイル指定はなし、実行後は100%・toのスタイルが適応されるので、実行前(delayの間)は「●」、実行後は「となります。

※●をクリックすると動きます

animation-iteration-countが0.35の場合

animation-iteration-count に「0.35」を指定できるのですが、その場合、アニメーションは途中で終わります。つまり、「」から「」に変わる途中で止まるので、実行後は「」となります。(※実行前は通常のforwardsと同じです)

※●をクリックすると動きます

■backwards

実行前は0%・from のスタイルが適応され、実行後のスタイル指定はなしなので、実行前(delayの間)は「」、実行後は「●」となります。

※●をクリックすると動きます

■both

実行前は0%・from のスタイルが適応され、実行後は100%・toのスタイルが適応されるので、実行前(delayの間)は「」、実行後は「となります。

※●をクリックすると動きます

animation-directionがreverseの場合

animation-direction が「reverse」の場合、アニメーションの再生は逆方向になるので、実行前(delayの間)は「」、実行後は「となります。(※上記 ■both の反対になります)

※●をクリックすると動きます

animation-iteration-count

animation-iteration-countはアニメーションを何度繰り返すかを設定できます。

指定できる値は「infinity(※無限)」と「正の整数・小数」です。「infinity」は永遠と繰り返されます。整数であれば指定回数アニメーションを繰り返し、整数ではなければ、アニメーションの途中で終了します。

初期値は「1」です。マイナスの値は無効です。

 基本的には1回もしくは無限のどちらかのパターンが多い気がします。場合によっては同じ動作を2回だけという場合もあるかもしれません。

■1(初期値)

アニメーションは1回動作します。

※●をクリックすると動きます

■2

アニメーションは2回動作します。

※●をクリックすると動きます

■1.3

アニメーションは1回と半分くらい動作します。

※●をクリックすると動きます

■infinity

アニメーションは永遠に繰り返されます。

※●をクリックすると動きます

animation-name

animation-nameは指定する@keyframesの名前を設定できます。

指定できる値は「none(※指定なし)」または「英数字・記号を使った名前」です。@keyframesで設定されていれば、そのアニメーションが動作します。初期値は「none」なので@keyframesで定義されている名称ではない限り、アニメーションは動作しません

animation-name(@keyframes)には任意の名前が付けられます。どのようなアニメーションか分かる名称にしましょう。

■none(初期値)

アニメーションは動作しません。

※●をクリックすると動きます

■move

下記@keyframes「move」が定義されています。

@keyframes move {
  0% {
    background-color: red;
    margin-left: 0;
  }
  100% {
    background-color: blue;
    margin-left: 50%;
  }
}

アニメーションは「」で一番左から始まり、「」に変化しながら中央あたりまで移動します。

※●をクリックすると動きます

■move2

@keyframes「move2」は定義されていないので、アニメーションは動作しません。

※●をクリックすると動きます

animation-play-state

animation-play-stateはアニメーションが実行中か停止中かを設定できます。

指定できる値は「running(※実行中)」「paused(※停止中)」です。アニメーションの途中で「paused」を指定すると途中でストップさせられます。初期値は「running」です。

 最初に指定することは無さそうですが、サイト訪問者にアニメーションを止めさせたい場合に使えそうです。

■running(初期値)

アニメーションが動作します。

※●をクリックすると動きます

■paused

アニメーションは停止中なので動作しませんが、開始時点(0%・from)のになります。

※●をクリックすると動きます

■javascriptで切替

最初は「paused」です。●をクリックするとrunning/pausedを切り替えられます。

animation-timing-function

animation-timing-functionは1回分のアニメーションがどのように動作するかを設定できます。例えば最初はゆっくり始まって徐々に早くなるといった感じです。

指定できる値は複数あります。初期値は「ease」です。

  1. ease
    最初と最後がゆっくりになる
  2. ease-in
    最初がゆっくりで最後に向けて速くなる
  3. ease-out
    最初が速くて最後に向けてゆっくりになる
  4. ease-in-out
    最初が速くて真ん中までゆっくりとなり、最後に向けて再度速くなる
  5. linear
    一定速度
  6. step-start
    最初に100%・toになる
  7. step-end
    最後に100%・toになる(ただし、目で確認はできない)
  8. cubic-bezier(p1, p2, p3, p4)
    二次元ベジェ曲線を指定できる(※「ease」「ease-in」「ease-out」「ease-in-out」「linear」はいずれもcubic-bezier(~)で設定できる
    ※たとえば、cubic-bezier(0.25, 0.1, 0.25, 1.0)
    ※こちらは説明が難しいので直感的に分かるようなツールを作成したいと思います
  9. steps(n, jumpterm)
    0~100%を n 個で分割して、コマ送りのアニメーションを指定できる
    ※たとえば、steps(4, end)
    ※stepsの詳細は、別途記事にしたいと思います
ease~step-endについて

「ease」「ease-in」「ease-out」「ease-in-out」「linear」「step-start」「step-end」は、colorで赤を指定する場合、「#ff0000」でも「red」でも指定できるのに似ています。

「#ff0000」が何かは分からないけど、「red」の意味は分かるという人は多いと思います。このように分かりにくいものを人が使いやすいように頻度が高いものには名前を付けてくれているわけです。「cubic-bezier(0.25, 0.1, 0.25, 1.0)」はよく分からないし覚えにくい毛d「ease」であればイメージはしにくいかもしれませんが、覚えるのは簡単になります。

 アニメーションを自然な雰囲気にするために、いくつか試して良さそうなものを選択したいです

文字で書いただけではイメージしにくいかと思いますので、実際に見てみます。

■ease(初期値)

アニメーションは最初と最後がゆっくりになります。

※●をクリックすると動きます

■ease-in

アニメーションは最初がゆっくりで最後に向けて速くなります。

※●をクリックすると動きます

■ease-out

アニメーションは最初が速くて最後に向けてゆっくりになります。

※●をクリックすると動きます

■ease-in-out

アニメーションは最初が速くて真ん中までゆっくりとなり、最後に向けて再度速くなります。

※●をクリックすると動きます

■linear

アニメーションは一定速度で変化します。

※●をクリックすると動きます

■step-start

アニメーションの最初に100%・toになります。

※●をクリックすると動きます

■step-end

アニメーションは最後に100%・toになります。ただし、アニメーションは終了し、すぐに最初の状態に戻るため、100%・toの状態は確認できません。

※●をクリックすると動きます

まとめ

「animation」の各プロパティを確認してみました。大体のことは理解できました。

animation-timing-function の細かい指定は難しそうですが「easy」など既に定義された値を使うだけでほとんどのアニメーションは対処できそうです。

頻繁ではありませんが、サイトでアニメーションを入れたいという要望があります。より理解を深めてご要望に応えたいところです^^

それでは、最後までお読みいただきありがとうございました!

]]>
https://lucklog.info/css3-animation/feed/ 0
【Cocoon】スキン「ふわっと追加」のダウンロード https://lucklog.info/download-cocoon-raku-fadein/ https://lucklog.info/download-cocoon-raku-fadein/#respond Tue, 21 Jun 2022 23:57:36 +0000 https://lucklog.info/?p=14002 2023/1/19
【Cocoon】スキン「ふわっと追加」を修正しました。
ふわっと追加(Version: 1.1.4) 

  • 不必要な処理を削除しました

2023/1/17
【Cocoon】スキン「ふわっと追加」を修正しました。
ふわっと追加(Version: 1.1.3) 

  • ブラウザへの負荷を軽減するために「jquery.inview 」から「Intersection Observer 」へ変更しました(内部処理)
  • Cocoon様の最新版をダウンロードし変更しました

2022/6/30
【Cocoon】スキン「ふわっと追加」を修正しました。
ふわっと追加(Version: 1.1.2) 

  • エディタースタイルが正常に読み込まれるよう修正

2022/6/25
【Cocoon】スキン「ふわっと追加」を修正しました。
ふわっと追加(Version: 1.1.1) 

  • フェイドインのスタイルの設定を変更しました(内部処理)

2022/6/22
【Cocoon】スキン「ふわっと追加」を修正しました。
ふわっと追加(Version: 1.0.1)

  • 設定画面の「表示スキン(ベース)」の一覧の取得方法を変更しました
  • グローバルメニューのサブメニューがアピールエリア等の文字エリアの裏に隠れてしまう不具合を修正しました

2022/6/21
【Cocoon】スキン「ふわっと追加」を作成しました。
ふわっと追加(Version: 1.0.0)

]]>
https://lucklog.info/download-cocoon-raku-fadein/feed/ 0
【Cocoon】スキン「ふわっと追加」を作成しました https://lucklog.info/cocoon-raku-fadein/ https://lucklog.info/cocoon-raku-fadein/#respond Tue, 21 Jun 2022 05:34:28 +0000 https://lucklog.info/?p=13912 Cocoonのスキンを作成してみました。

概要は「好きなスキンにふわっとした動き(フェイドイン)を追加できるスキン」です。

「スキン」とは少し違うかもしれませんが…、興味がある方はお試しください!

作った理由

Cocoonのスキンには様々なデザインがありますが、動きが少ないかなと思いました。

情報提供がメインのブログであれば、動きは不要かなと思います。ですが、少しブランディングしたい場合であれば、ふわっと表示されるだけで雰囲気が出たりします

たとえば、LP(ランディングページ)などで商品を販売するサイトなどでは利用されます。ですので、そのような方が運営するブログであれば、「雰囲気を合わせたい」などで使いたい方もいらっしゃるかなと思い作ってみました^^

スキンのダウンロード・アップロード

まずは、下記ページから最新版をダウンロードください。
スキン「ふわっと追加」

子テーマ(Cocoon Child)にアップロード

子テーマをご利用の方はこちらをご確認ください。

ダウンロードしたファイルを解凍し、その「raku-add-fadein」フォルダを下記のように「wp-content > themes > cocoon-child-master > skins 」に入れてください。

引用:Filezilla>Cocoon

そうすると、Cocoon設定>「スキン」タブの「スキン一覧」に当スキンが追加されます。

引用:Wordpress>Cocoon

親テーマ(Cocoon)にアップロード

子テーマをご利用ではない方はこちらをご確認ください。

ダウンロードしたファイルを解凍し、その「raku-add-fadein」フォルダを下記のように「wp-content/themes/cocoon-master/skins 」に入れてください。

引用:Filezilla>Cocoon

そうすると、Cocoon設定>「スキン」タブの「スキン一覧」に当スキンが追加されます。

引用:Wordpress>Cocoon

使い方

使い方はシンプルで、下記3ステップでご利用いただけます。

  1. 当スキン「ふわっと追加」を選択
  2. 使いたいスキンを選択
  3. ふわっとタイプを選択(※4種類あります)

1.当スキン「ふわっと追加」を選択

引用:Wordpress>Cocoon

上記「スキンのダウンロード・アップロード」で追加された「スキン一覧」の「ふわっと追加」を選択して、「変更をまとめて保存」を押して保存します。

2.使いたいスキンを選択

引用:Wordpress>Cocoon

当スキンを選択すると、「スキン一覧」の下に「表示スキン(ベース)」という項目が追加されます。

そこで使いたいスキンを選択し、上記1同様に「変更をまとめて保存」をクリックし保存します。
※保存は下記「3.ふわっとタイプを選択」を選択した後でOKです

3.ふわっとタイプを選択

引用:Wordpress>Cocoon

当スキンを選択すると、「スキン一覧」の下に「ふわっとタイプ」という項目が追加されます。

そこで「ふわっとタイプ」を選択し、上記1同様に「変更をまとめて保存」をクリックし保存します。

動きについて

動画も載せていますので、簡単にですが動きを確認してみてください。

■1.ふわっと

全体的にふわっと表示されます。

■2.下からふわっと

メインの中身が下からふわっと表示されます。

■3.メインは左から、サイドは右からふわっと

メインが左から、サイドが右からふわっと表示されます。

■4.ヘッダー部分は上から、メインは左から、サイドは右からふわっと

メインが左から、サイドが右からふわっと表示され、最後にヘッダーが上からふわっと表示されます。

ライセンスについて

このスキンはWordPressテーマ、Cocoonのスキンです。「Cocoon」はGPLとなっておりますので、このスキン「ふわっと追加」もGPLとなります。

Cocoonさんの利用規約がたいへん分かりやすいですので、リンクを掲載しておきます。
Cocoon 利用規約

何か不備な点等ありましたら、ご指摘いただけますと幸いです。

使用しているCDN

スクロールしてコンテンツが表示されたタイミングでclassを追加するために使わせていただいています。
jquery.inview

(2023/1/17)ブラウザへの負荷を軽減するためにCDNの読み込みを止めました。

調査・対応・テストについて

スキンを作成する上で行ったことです。スキンを使う上では関係ありません。参考までに書いておきますが、読む必要は特にありません。

調査

Cocoon 2.4.4を調査しました。使用するスキンIDを取得する関数「get_skin_url」が使用されている箇所を調査しました。

上述した「表示スキン(ベース)」を適応させる必要があるためです。

対応

調査で確認した使用箇所でスキン表示に必要な処理を当スキンの「functions.php」で「表示スキン(ベース)」も同様に読み込まれるよう対応を行いました。

テスト

選択できる全スキン(下記テンプレートは除く)のトップページ、固定ページ、投稿ページ、カテゴリ一覧ページの各4ページに対して下記を確認しました。

わいひらさんが用意されているテンプレート
  • スキンからオプション変更サンプル(CSV)
  • スキンからオプション変更サンプル(JSON)
  • スキンからオプション変更サンプル(PHP)
  • [Child]スキンテンプレート [作者: わいひら]
  • スキンテンプレート [作者: わいひら]

普通に各スキンを選択した場合と、「ふわっと追加」を選択し「表示スキン(ベース)」で各スキンを選択した場合を比較しました。

比較内容はページの見た目ソースの違いです。ページの見た目はすべて同じで「ふわっとした動き」のみ追加されていました。また、ソースも「表示スキン(ベース)」が必要な個所で読み込まれているだけでそれ以外の違いはありませんでした。

どちらも問題ありませんでしたので、記事にしました。

ご要望など

もし他のパターンも追加してほしいなどありましたら、お気軽にコメントからご連絡ください。

]]>
https://lucklog.info/cocoon-raku-fadein/feed/ 0
【WordPress】推奨はどれ?「bloginfoの非推奨」忘れちゃうからまとめとく:wpurl/url/siteurl/home/text_direction/stylesheet_url/stylesheet_directory https://lucklog.info/wp-bloginfo-not-recommended/ https://lucklog.info/wp-bloginfo-not-recommended/#respond Fri, 15 Apr 2022 04:49:55 +0000 https://lucklog.info/?p=13635 Wordpresで「jsファイル」や「cssファイル」を追加で読み込みたいとき、テーマフォルダまでのパスを取得します。その際に使う関数が「get_stylesheet_directory_uri()」なのですが、「bloginfo(‘stylesheet_directory’)」でも取得できます。

そこで、「どっちかが非推奨だったよなぁー」といつも悩んでしまいます(笑)。ということで、記事にすることで、記憶の定着を図りたいと思います。

非推奨なのは「bloginfo」(※一部の引数だけ

結論、「bloginfo」で指定する引数の一部が非推奨となっているでした。

テンプレートタグ/bloginfo – WordPress Codex 日本語版」を参考に非推奨に関して確認しました。実際は「非推奨」ではなく、「他の関数が推奨」と書かれています。

bloginfo

最初に、bloginfo()について確認しておきます。

bloginfo()は取得した情報を表示する関数です。取得だけしたい場合は、「get_bloginfo()」を使います。引数によって取得する情報を指定できます。

まとめ

1つずつ見る前に、他に推奨される関数がある引数と関数を表にまとめておきますね。

bloginfoの引数 推奨されている関数
wpurl site_url()
url
siteurl
home
home_url()
text_direction is_rtl()
stylesheet_url get_stylesheet_uri()
stylesheet_directory get_stylesheet_directory_uri()

それでは、「非推奨(他の関数が推奨)となっている引数」一覧です。推奨されている関数と「bloginfo」との違いも書いておきます。

bloginfo( ‘wpurl’ )

管理画面の設定>一般で設定された「WordPress アドレス (URL)」を取得します。

現在は「site_url()」の使用が推奨されています。試してみたところ、実際に同じ値が取得できました。

「bloginfo( ‘wpurl’ )」と「site_url()」の違い

「bloginfo( ‘wpurl’ )」とは違い、「site_url()」は値を取得するだけの関数です。「bloginfo」のように表示させたい場合は「echo」や「<?=?>」などを使用しましょう。

<?php echo site_url(); ?>
<?=site_url()?>

bloginfo( ‘url’ )、bloginfo( ‘siteurl’ )、bloginfo( ‘home’ )

管理画面の設定>一般で設定された「サイトアドレス (URL)」を取得します。
※bloginfo( ‘siteurl’ )とbloginfo( ‘home’ )はVersion 2.2で廃止されています

現在は「home_url()」の使用が推奨されています。試してみたところ、実際に同じ値が取得できました。

「bloginfo( ‘url’ )」と「home_url()」の違い

「bloginfo( ‘url’ )」とは違い、「home_url()」は値を取得するだけの関数です。「bloginfo」のように表示させたい場合は「echo」や「<?=?>」などを使用しましょう。

<?php echo home_url(); ?>
<?=home_url()?>

bloginfo( ‘text_direction’ )

HTMLページの文字の向きを取得します。文字が「左から右」の場合「ltr」(※left to right)、「右から左」の場合「rtl」(※right to left)を取得します。僕たちが慣れているのは「左から右」ですよね。

現在は「is_rtl()」の使用が推奨されています。試してみたところ、「左から右」の場合「False」、「右から左」の場合「True」が返ってきます。関数名「is_rtl」のとおり、「右から左」なのかを判定してくれる関数ですね。

「bloginfo( ‘text_direction’ )」と「is_rtl()」の違い

「bloginfo( ‘text_direction’ )」とは違い、「is_rtl()」は「左から右」の場合「False」、「右から左」の場合「True」を返す関数です。「bloginfo」では文字列で判定する必要がありましたが、「is_rtl」は、シンプルに判定できます。

if (!is_rtl()) {
  // 左から右の場合
}
if (is_rtl()) {
  // 右から左の場合
}

bloginfo( ‘stylesheet_url‘ )

適応しているテーマで使われているスタイルシートの URI を取得します。

現在は「get_stylesheet_uri() 」の使用が推奨されています。試してみたところ、実際に同じ値が取得できました。

「bloginfo( ‘stylesheet_url’ )」と「get_stylesheet_uri()」の違い

「bloginfo( ‘stylesheet_url’ )」とは違い、「get_stylesheet_uri()」は値を取得するだけの関数です。「bloginfo」のように表示させたい場合は「echo」や「<?=?>」などを使用しましょう。

<?php echo get_stylesheet_uri(); ?>
<?=get_stylesheet_uri()?>

ただ、表示ではなく「get_stylesheet_uri()」で取得したURIを関数に渡すケースの方が多いと思います。

bloginfo( ‘stylesheet_directory’ )

適応しているテーマまたは子テーマのスタイルシートがあるディレクトリの URI  を取得します。子テーマを使用している場合、そのディレクトリのURIを取得してくれるので便利です。

現在は「get_stylesheet_directory_uri() 」の使用が推奨されています。試してみたところ、実際に同じ値が取得できました。

「bloginfo( ‘stylesheet_directory’ )」と「get_stylesheet_directory_uri()」の違い

「bloginfo( ‘stylesheet_directory’ )」とは違い、「get_stylesheet_directory_uri()」は値を取得するだけの関数です。「bloginfo」のように表示させたい場合は「echo」や「<?=?>」などを使用しましょう。

<?php echo get_stylesheet_directory_uri(); ?>
<?=get_stylesheet_directory_uri()?>

基本のスタイルシート以外の「cssファイル」や「jsファイル」、「画像」のパスを指定する際に使用するケースが多いと思います。

まとめ

上記のとおり「bloginfo」で使える一部の引数は、他の関数が推奨されていました。

非推奨は今後使用できなくなる可能性もあるので、推奨されている関数を使うように気を付けたいですね。

最後にもう一度、他に推奨される関数がある引数と関数を表を載せておきます。

bloginfoの引数 推奨されている関数
wpurl site_url()
url
siteurl
home
home_url()
text_direction is_rtl()
stylesheet_url get_stylesheet_uri()
stylesheet_directory get_stylesheet_directory_uri()

 

それでは、最後までお読みいただきありがとうございました!

 

 

]]>
https://lucklog.info/wp-bloginfo-not-recommended/feed/ 0
ConohaWingでPythonを表示すると500エラー!原因と解決策 https://lucklog.info/conohawing-python-500-error/ https://lucklog.info/conohawing-python-500-error/#respond Thu, 07 Apr 2022 13:44:39 +0000 https://lucklog.info/?p=13596 ConohaWingでPythonを使うことができます。

cgiファイルでも動きますし、「.htaccess」で設定すれば、pyファイルでも動きます。今回は「.htaccess」で設定済みとして「pyファイル」をアップしています。(※cgiファイルで動かすのと大差ありません

早速「pyファイル」をアップしてみたのですが、500エラーになってしまいました…。

引用:Chrome

最終的には、正常に表示できましたが、まあまあハマってしったので、今後のために把握できた原因と解決策をまとめておきます。

作成ファイルについて

作成するファイルは、できれば新規作成が良いかなと思います。

細かい設定

引用:サクラエディタ

上記のとおり、ファイルは下記設定で保存します。

  • 文字コードセット・・・UTF-8
  • BOM・・・なし
  • 改行コード・・・LF(UNIX)
新規で作成することで…

僕は適当なファイルを複製して、ATOMで編集した結果、数時間500エラーにハマってしまいました…。どうにもならず、ファイル作成からやり直すと上手くいきました。もしかすると、見えないとこに変な設定が残ったりしているのかな?と思いました。

同じようにハマってしまった場合は、是非ファイル作成からやり直してみてくださいね^^

パーミッション

まずは、パーミッションです。

原因

何も手を加えなければ「644」でアップロードされています。

引用:FileZilla

パーミッションの数値は何を許可するかによって変わるのですが、「644」は上記のチェック有りが許可されている状態です。

この初期の状態ではPythonを動きません

解決策

引用:FileZilla

パーミッションは上記のように「755」にする必要があります。

直接「755」と数値を入力しても構いませんし、各「実行」にチェックを入れても大丈夫です。字のとおり、Pythonを実行させるために必要なわけですね。

プログラムをPythonで実行させる

上記パーミッションをクリアしてもファイルの中身が空であれば、引き続き500エラーになります。

原因

pyファイルの中身が何のプログラムで実行したら良いか不明なため、エラーとなります。

解決策

そこで、pyファイルの中身は「Python3.6で実行する」ということを設定します。設定は簡単でpyファイルの1行目に下記を書き加えるだけです。
※2022/4/7 時点、ConohaWingでPython3系を使う場合

#!/opt/alt/python36/bin/python3.6

▼Pythonのパスはこちらに書いています
https://support.conoha.jp/wing/faq/website-q/website-setting-q/?show=1141&btn_id=search

プログラムをPythonで実行させる

上記「パーミッション」をクリアしてもファイルの中身が空であれば、500エラーのままです。

原因

「pyファイル」の中身が何のプログラムで実行したら良いか不明なため、エラーとなっています。

解決策

そこで、「pyファイル」の中身は「Python3.6で実行する」ということを設定します。設定は簡単で「pyファイル」の1行目に下記コードを書き加えるだけです。
※2022/4/7 時点、ConohaWingでPython3系を使う場合

#!/opt/alt/python36/bin/python3.6

▼Pythonのパスはこちらに書いています
https://support.conoha.jp/wing/faq/website-q/website-setting-q/?show=1141&btn_id=search

表現ヘッダーを設定する

実は、上記2つをクリアしてもまだエラーのままでした。

原因

最後に、表現ヘッダー「Content-Type」を設定する必要があります。サーバとクライアントでやり取りする情報という感じです。

この表現ヘッダーは「無いと正常に動作しない」というものみたいです。

解決策

そこで、「pyファイル」内で画面出力の処理の最初に下記を書きます。お決まりだと思ってOKです。

print('Content-Type: text/html\n')
注意点

設定内容は「Content-Type: text/html」なのですが、赤字にしたとおり、末尾に改行コードを書く必要があります。
そうしないと、正常に表現ヘッダーと認識できないようです。忘れずに書きます。ハマるポイントなので注意ですね。

まとめ1

以上で、英語の出力のみであれば正常に表示できるようになります。

一度コードをまとめておきます。

#!/opt/alt/python36/bin/python3.6
print('Content-Type: text/html\n')

何も表示はされませんが、500エラーは改善されています。

確認

一応正常に表示されたか確認するために、最後に1行追加して「test」という文字を表示してみます。

#!/opt/alt/python36/bin/python3.6
print('Content-Type: text/html\n')
print('test')
引用:Chrome

正常に「test」と表示されました!

日本語も正常に表示させるには?

ここまでの対応で英語であれば表示可能になりました。ですが、日本語は表示されません

#!/opt/alt/python36/bin/python3.6
print('Content-Type: text/html\n')
print('test')
print('てすと')

試しに末尾に日本語出力を追記して確認してみても、「test」しか表示されません。

原因

画面上にエラーは出ませんが、SSH接続でコマンドで直接このファイルを動作させてみると、エラーが表示されました。

$ python t16.py
Content-Type: text/html

test
Traceback (most recent call last):
File "t16.py", line 4, in <module>
print('\u3066\u3059\u3068')
UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-2: ordinal not in range(128)

エンコードエラーですね。「てすと」が全角のため発生しているエラーだと思います。(※日本語は基本的に全角です

解決策

import sys
import io
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

上記コードを「print」の前に追記すればOKです。

「io」のTextIOWrapperによって、「sys.stdout(※標準出力)」をutf-8に設定しています。

どの言語でも出力は基本utf-8が多いですよね。

まとめ2

utf-8の設定によって、先ほど表示されていなかった日本語も出力できるようになりました。

引用:Chrome

これでようやく、サーバ上でPythonを試すことが出来そうです。

Pythonで処理した結果をHTMLでうまく表現できるといいな。

それでは、最後までお読みいただきありがとうございました!

]]>
https://lucklog.info/conohawing-python-500-error/feed/ 0
【Python】リストの基本 https://lucklog.info/python-list1/ https://lucklog.info/python-list1/#respond Wed, 06 Apr 2022 02:07:18 +0000 https://lucklog.info/?p=13552 Pythonには「リスト」という他のプログラミング言語でいう「配列」にあたるものがあります。

プログラムを作る上で、配列(やオブジェクト)を使わないことはあまりありません。この「リスト」の特性を見ていくことでリストの理解を深めていければと思います。

コード部分の説明

下記コード内に出てくる「print」の後ろ、もしくは次行の「#」の後ろにprintで出力された結果を書いています。

リストの初期化

リストの初期化は 「 ,(※半角カンマ)」区切りの要素を「 [ ] 」で囲めばOKです。「 [ ] 」の記号を使う以外、特に注意点はありません。

数字

li = [1, 2, 3, 4, 5]
print(li) # [1, 2, 3, 4, 5]

数字の場合です。そのまま「,(※半角カンマ)」区切りでOKです。

文字列

li2 = ['a', 'b', 'c', 'd', 'e']
print(li2) # ['a', 'b', 'c', 'd', 'e']

文字列の場合は、「 ‘(※シングルクォーテーション)」または「”(※ダブルクォーテーション)」で各要素を囲います

辞書

li3 = [{'x': 3, 'y': 5, 'z': 4}, {'x': 5, 'y': 6, 'z': 7}, {'x': 3, 'y': 2, 'z': 1}]
print(li3)
# [{'x': 3, 'y': 5, 'z': 4}, {'x': 5, 'y': 6, 'z': 7}, {'x': 3, 'y': 2, 'z': 1}]

文字列だけではなく辞書もリストの要素にできます。どのような型でもリスト化できますね。
※「{‘x’: 3, ‘y’: 5, ‘z’: 4}」が辞書です

空リスト(要素なし)

li4 = []
print(li4) # []

空リストは「 [] 」の中身を空にすればOKです。

リストの要素にアクセス

リストの要素には1つ目から順番に「0」「1」「2」・・・という番号(※インデックスといいます)が割り振られています。

1つ目の要素にアクセスしたい場合は、「 [] 」で番号を指定します。「li [0]」←このような感じでアクセスができます。では、具体例を見てみます。

番号(インデックス)でアクセス

li2 = ['a', 'b', 'c', 'd', 'e']
print(li2[0]) # a
print(li2[1]) # b
print(li2[2]) # c
print(li2[3]) # d
print(li2[4]) # e

割り振られた番号(インデックス)を指定することで各要素にアクセスできます。一般的なアクセス方法です。

後ろからアクセス

li2 = ['a', 'b', 'c', 'd', 'e']
print(li2[-1]) # e
print(li2[-2]) # d
print(li2[-3]) # c
print(li2[-4]) # b
print(li2[-5]) # a

「-1」を指定することで、後ろから1番目(一番後ろ)の要素にアクセスすることができます。「-2」にすると後ろから2番目の要素にアクセスできます。

こんなとき便利!

最後の要素にアクセスしたいときに、とても便利ですね。他のプログラミング言語の場合だと、要素数から最後のインデックスを求めたり、専用の標準関数を使ったりする必要があります。

pythonの場合ですと、「-1」を指定するだけでよく直感的でもありますよね。個人的には好きです^^

リストの一部にアクセス

リスト内の一部を抜き出したリストにアクセスすることもできます。たとえば、[‘a’, ‘b’, ‘c’, ‘d’, ‘e’] の [‘b’, ‘c’, ‘d’] にアクセスができます。2番から4番の要素だけを抜き出したリストですね。

最初と最後のインデックスを指定

li2 = ['a', 'b', 'c', 'd', 'e']
print(li2[ 0:1 ]) # ['a']
print(li2[ 0:2 ]) # ['a', 'b']
print(li2[ 1:2 ]) # ['b']
print(li2[ 2:3 ]) # ['c']
print(li2[ 2:4 ]) # ['c', 'd']

「:(半角コロン)」を使って [ 2 : 4 ] と指定すれば、インデックス2~3([‘c’, ‘d’])のリストを抜き出せます。

ココに注意

「 : 」の前と後ろの数で開始のインデックスと終了のインデックスを指定します。開始のインデックスの要素は取り出しますが、終了のインデックスの要素は取り出しません。指定した1つ前のインデックスまでが取り出す対象です。

よって、終了のインデックスは取得したいインデックス+1を指定する必要があります。

覚え方

下記のような感じで番号を振ると覚えやすいかなと思います。

このようにイメージすると覚えやすい

 

それでは、最後までお読みいただきありがとうございました!

]]>
https://lucklog.info/python-list1/feed/ 0
【Python】mecab-ipadic-neologdを使えるようにする方法(テキストマイニングのために) https://lucklog.info/python-mecab-ipadic-neologd/ https://lucklog.info/python-mecab-ipadic-neologd/#respond Thu, 17 Mar 2022 14:55:23 +0000 https://lucklog.info/?p=13438 テキストマイニングで通常のIPA辞書で対応していたのですが、やはり「mecab-ipadic-neologd」という辞書を使いたいと思いました。

そこで「mecab-ipadic-neologd」が使えるようになるまでの全体的な流れと、少し躓いた箇所を書き残しておきます。(※スムーズにとはいかなかったので…

新しいPCになったときにまた時間掛かっちゃうと思いますし(苦笑)、自分のためのメモですね^^;

前提

まず、僕の環境ですが、Windows10です。

では、あらかじめインストール済みだったものをざっとご紹介します。

Pythonのインストール

Python3.9.10がインストール済でした。インストールについては下記にまとめていますので、まだの方はご覧ください。

【Python】インストールする方法

Anacondaのインストール

Anaconda3もインストール済でした。インストールについては下記にまとめていますので、まだの方はご覧ください。

【Python】Anacondaをインストールする方法

Microsoft C++ Build Toolsのインストール

次に「mecab-python3」をpipでインストールするのですが、エラーが出る場合があります。その際に「Microsoft C++ Build Tools」をインストールしておくと、エラーが出なくなります。

僕の場合は、「wordcloud」をインストールしようとしたときにエラーが出たので、入れました。

ダウンロード

下記を開いてください。
https://visualstudio.microsoft.com/ja/visual-cpp-build-tools/

引用:visualstudio.microsoft.com

Build Toolsのダウンロード」をクリックすると、ダウンロードできます。

ファイルを開いてインストール

ダウンロードできたらそのファイルを開きます。下記画面が表示されますので、後は順番に進めればOKです。

引用:Build Toolsのインストーラ

続行」をクリックします。

引用:Build Toolsのインストーラ

「ダウンロード済み」「インストーラ済み」が上記のようになったら、勝手に進みます。

引用:Build Toolsのインストーラ

「C++によるデスクトップ開発」をチェックします。(←注意点はココだけです、忘れずチェックします

すると、右側に更にチェックする項目が表示されるので、赤枠で囲んだ3つ「MSVC v142・・・」「Windows 10 SDK・・・」「Windows用 C++・・・」だけチェックを入れて、

インストール」をクリックします。

引用:Build Toolsのインストーラ

後は上記赤枠内の2つのバーが100%になれば、インストール完了です!

引用:Build Toolsのインストーラ

この画面になったら、閉じてOKです。PCを再起動すれば完了です。

Microsoft C++ Build Toolsのパスを通す

コマンドプロンプトで使用したいので、インストールした「Microsoft C++ Build Tools」のパスを通します。

パスの確認

引用:Windows

旗マークをクリックします。

引用:Windows

「Visual Studio 2019」の「Dveloper Command Prompt for VS…」をクリックします。

引用:Build Tools

コマンドプロンプトみたいなものが開くので、「where cl」と入力しEnterを押します。

引用:Build Tools

そうすると、フルパスが得られますので、コピーします。

環境変数の「Path」に追加

下記ページを参考に環境変数の「Path」にコピーしたフルパスを追加します。

>【Windows10】「システム環境変数」>「Path」への追加方法

↑について「システム環境変数」ではなく「●●のユーザ環境変数」の方に追加で問題ありません。

mecab-python3をインストール

コマンドプロンプトで下記を入力しEnterを押します。

pip install mecab-python3

MeCabをインストール

ダウンロード

下記を開きます。
https://github.com/ikegami-yukino/mecab/releases/tag/v0.996.2

引用:https://github.com/ikegami-yukino/mecab/releases/tag/v0.996.2

僕のPCは64bitなので「mecab-64-0.996.2.exe」をクリックして、インストーラをダウンロードします。

インストール

ダウンロードできたらそのファイルを開きます。下記画面が表示されますので、後は順番に進めればOKです。

引用:MeCabインストーラ

OK」をクリックします。

引用:MeCabインストーラ

Python3で使用するため「UTF-8」を選んで「次へ」をクリックします。

引用:MeCabインストーラ

同意する」を選んで「次へ」をクリックします。

引用:MeCabインストーラ

次へ」をクリックします。

引用:MeCabインストーラ

次へ」をクリックします。

引用:MeCabインストーラ

インストール」をクリックします。

引用:MeCabインストーラ

いいえ」をクリックします。
※全ユーザで使用したい場合は「はい」をクリックしてください

引用:MeCabインストーラ

コマンドが動き出します。途中で止まった場合は、Enterを押してみてください。進みだすと思います。

引用:MeCabインストーラ

再起動のタイミングを決めたら、該当する方にチェックを入れて、「完了」をクリックします。

以上で、MeCabのインストールは完了です!

MeCabのパスを通す

コマンドプロンプトで使用したいので、インストールした「MeCab」のパスを通します。(※既に環境変数のPathに登録されている場合は追加不要です

環境変数の「Path」に追加

下記ページを参考に環境変数の「Path」に「C:\Program Files\MeCab\bin」を追加します。

追加するパス

インストール時に下記設定で指定したパスの中に「bin」というフォルダが作られています。その「bin」へのパスを環境変数に追加します。下記の場合ですと、「C:\Program Files\MeCab\bin」となります。

引用:MeCabインストーラ

もし違う場所にインストールされた場合は、そちらのパス+「bin」を環境変数に追加してください。

>【Windows10】「システム環境変数」>「Path」への追加方法

↑について「システム環境変数」ではなく「●●のユーザ環境変数」の方に追加で問題ありません。

mecab-ipadic-NEologdのインストール

ようやく本題の「mecab-ipadic-NEologd」のインストールです。

ダウンロード

github の下記ページからダウンロードします。
https://github.com/neologd/mecab-ipadic-neologd

引用:Github > neologd

ページを開いて「Code」をクリックして、ポップアップが開くので、「Download ZIP」をクリックするとダウンロードできます。

解凍&移動

ダウンロードしたファイルを解凍すると「mecab-ipadic-neologd-master」というフォルダ名なので「mecab-ipadic-neologd」とリネイムします。(リネイムの必須ではありません)

次に、そのフォルダをpythonを動かしているフォルダの中に入れます。

引用:コマンドプロンプト

僕の場合は、「C:\Users\info\py」でpythonを動かしているので、このフォルダ内に入れます。

引用:エクスプローラー

緑枠がダウンロードしてきたファイルです。赤枠が解凍しリネイムしたものです。

「mecab-ipadic-neologd」内の「seed」フォルダの中身を解凍

下で辞書作成時にseed内のファイルを使用するので、解凍しておきます。全部解凍してOKです。実際に使うのは「mecab-user-dict-seed.20200910.csv.xz」だけですので、それだけ解凍でもOKです!

引用:エクスプローラー

枠で囲ったものだけ解凍でもOKです。

解凍ソフト

僕は「圧縮・解凍ソフト CubeICE」を使っています。MacとWindowsで解凍すると文字化けする問題があったのですが、「CubeICE」ですと文字化けしませんでした。それ以来こちらを使わせていただいています。
https://www.cube-soft.jp/cubeice/

解凍ソフトをお持ちでない方はご検討ください^^

UFT-8の辞書を作成

MeCab\dic\ipadicを複製

64bitであれば「C:\Program Files\MeCab\dic」、32bitであれば「C:\Program Files (x86)\MeCab\dic」に「ipadic」というフォルダがあります。

それをコピーして同フォルダ内に貼り付けて「ipadic-UTF8」とリネイムします。(※フォルダ名はutf8と分かれば何でも良いです

引用:エクスプローラー

NEologdフォルダ作成

同フォルダ内に「NEologd」というフォルダを作成します。

作成した辞書を入れるフォルダになります。

引用:エクスプローラー

辞書作成

引用:コマンドプロンプト

コマンドプロンプトを開きます。

引用:コマンドプロンプト

「cd」コマンドを使って、先ほど「解凍&移動」で移動した「mecab-ipadic-neologd」の中にある「seed」に移動します。

引用:コマンドプロンプト
mecab-dict-index -d “c:\Program Files\MeCab\dic\ipadic-UTF8” -u NEologd.20200910-u.dic -f utf-8 -t utf-8 mecab-user-dict-seed.20200910\mecab-user-dict-seed.20200910.csv
  • 「c:\Program Files\MeCab\dic\ipadic-UTF8」
    ⇒「ipadic」を複製して作ったフォルダを指定します。
  • 「NEologd.20200910-u.dic」
    ⇒辞書のファイル名です。「-u」はutf8ということだと思います。
  • 「mecab-user-dict-seed.20200910\mecab-user-dict-seed.20200910.csv」
    ⇒コマンドで移動して、「C:\Users\info\py\mecab-ipadic-neologd\seed」にいます。その中に「mecab-user-dict-seed.20200910\mecab-user-dict-seed.20200910.csv」が存在するので、それを指定しています。

上のコマンドを入力しEnterを押すと、UTF8の「NEologd」の辞書「NEologd.20200910-u.dic」が「C:\Users\info\py\mecab-ipadic-neologd\seed」に作成されます。

引用:エクスプローラー

参考サイト

参考にさせていただいたサイトさんです。

https://qd-suriken.com/2020/04/22/widows%E3%81%A7mecabneologd/

辞書を使えるようにする

移動と設定で辞書を使えるようにします。

移動

上記「辞書作成」で作成された「C:\Users\info\py\mecab-ipadic-neologd\seed\NEologd.20200910-u.dic」を「NEologdフォルダ作成」で作成した「C:\Program Files\MeCab\dic\NEologd」の中に移動します。

引用:エクスプローラー

設定

「C:\Program Files\MeCab\etc」の「mecabrc」を同フォルダ内に複製します。それを「mecabrc-u」とリネイムします。

引用:エクスプローラー

mecabrc-u」をテキストエディタで開き、辞書へのパスなどを設定します。

下記コードを追記します。コメントアウトで「dicdir = 」などの行があるので、それぞれコメントの下の行などに追記すれば良いかと思います。

dicdir = C:\Program Files\MeCab\dic\ipadic-UTF8
userdic = C:\Program Files\MeCab\dic\NEologd\Neologd.20200910-u.dic
引用:コマンドプロンプト

ファイルを保存します。

これで辞書は使える状態になりました。

PythonでMeCab、NEologdが使えない

以上で設定は完了しているのですが、Pythonでその辞書を使うために下記のように書きます。

self.tagger = MeCab.Tagger("-r C:\Program Files\MeCab\dic\NEologd\mecabrc-u")

先ほど作成した「C:\Program Files\MeCab\dic\NEologd\mecabrc-u」を指定しています。

引用:コマンドプロンプト

そうすると、シンタックスエラーになります。

問題点は「Program Files」の半角スペースと「\」のようです。

対処法

半角スペースは良い方法が見つからないので、「mecabrc-u」を他のフォルダに移します。

引用:コマンドプロンプト

そして、「\」は「/」に変更します。

self.tagger = MeCab.Tagger("-r C:\Program Files\MeCab\dic\NEologd\mecabrc-u")
↓
self.tagger = MeCab.Tagger("-r C:/Users/info/py/mecab-ipadic-neologd/mecabrc-u")

以上です。

まとめ

これで、ついに「mecab-ipadic-neologd」辞書が使えるようになりました。

色々なものをインストールしたり設定する必要がありました。久しぶりにpython関係をガッツリ触りました。次回があったら、スムーズにいくと嬉しく思います。

それでは、最後までお読みいただきありがとうございました!

]]>
https://lucklog.info/python-mecab-ipadic-neologd/feed/ 0