2018年5月

  • Shinologyの NASを導入してみた

    すごく便利です

    目的としては、macのタイムマシンをワイヤレスで常にやっときたいなーと思ったことです。
    macの容量を増やしたんですが、これがぶっこわれたらやべーな、という思いから導入を決めました。

    まずNASについて調べてみたんですよ

    NASとは「ネットワークに繋がったHDD」といったイメージのものです。
    通常のパソコンをファイルサーバーで使う場合、それ用にできてないので無駄にオーバースペックだったり、継続して起動し続けることに最適化されていなかったりします。

    NASはファイルを共有することに特化しており、PCと考えると低スペックだがその代わりに安定性が高く消費電力も非常低く、継続利用するために最適化されています。

    NASを買う目的って
    ・PCのバックアップが取りたい
    ・音楽置き場にしたい
    ・動画置き場にしたい
    ・写真置き場にしたい

    といったところだと思うんですね。自分は一番上のものだけなんですけど、下の3つも対応機器と連携できるみたいなのですごく便利そうです。

    HDD付属のものと、取り付けが必要なタイプが有る

    HDD付属のものは、必要な機能が揃っていてすぐ使える初心者向けの製品。
    もとから用意されたことしかできない。

    HDDを自分で取り付けるタイプのものは、多少知識がある人向けでいろんなアプリケーションが用意されており、やり方次第でかなりいろんなことができる。
    サーバーとしてサイト公開もできちゃう、みたいな製品です。
    (公開しちゃいけないデータをいっぱい入れると思うんで、できるからと言ってやらないほうがよさそうですが)

    後者のいろいろできるやつ面白そう、とおもって導入してみました。
    買ったのは shinologyのNASです。

    HDDを2台積んでそれぞれを同じ内容を書き込み、どちらかが壊れてももんだいないようにする仕組みが一般的みたいです。だから、2台以上HDDを積める製品が多いんですね。

    でも自分は仕事で使うとはいえ個人利用だし、タイムマシンが目的なので本体PCとバックアップが同時に死ぬことは少ないだろうという楽観的な感覚でHDDは一台のみにすることにしました。
    しかし、NASはHDDを2台積めるタイプにしておきました。拡張性大事です。

    設定とかしてみる

    PCに慣れてる人なら造作のない組み立てを行い、LAN内の他のPCからURLに接続して、ファイルをダウンロードしてソフトをHDDにインストールして・・・・

    やっぱり初心者向けのデバイスではないかもですね。多少知識がないと躓くポイントがありそう。
    個人的にはしばらく待つだけでかんたんに使えちゃった、という印象でした。

    タイムマシンを適用

    タイムマシン用のユーザーを用意してあげる感じです。
    使い方のページに手順が載ってました。
    「DISKえらべる!やったぜ!」
    って感じでした。

    ちょっと使った感想だと、
    やっぱり遅くて、初回のバックアップはべらぼうに時間がかかります。しばらく放置する時間が必要です。
    初期設定だと一時間毎にバックアップを取ってくれるみたいなんですが、「多いわ!」って感じました。
    一日一回ぐらいでいいかなぁ。一日以内の作業量だったら諦めがつきます。
    そんなことない?

    おや?これは便利だぞ?

    出先でかんたんにアクセスできるんすよ!
    ファイルをちゃんと置いとけば、これに助けられることもありそう、っていうかネット環境がしっかりしてるところなら作業環境がどこでもいっしょな感じです。

    ついてるアプリケーションがおもしろい

    小規模な会社なら、これ一つあるだけでだいぶ便利に使えるな、と思いました。
    まずファイル置き場にできるし、チャットもできちゃうし、googleドライブみたいなソフトもついてる(すごくよくできてる)。

    そういう仕事系のサービスは結構有料だったりするので、意外と経費の節約になるんじゃないかな?と思いました。
    通常のサーバーみたいにも使えるみたいなので、社内用のツールを動かしたり、開発用のテストで使うこともできそうな感じです。

    あと、ファイルをパスワード付きでダウンロード公開にするのが、めちゃ簡単でびっくりしました。
    アップローダいらないじゃん。設定も細かくできるじゃん。
    googledriveとかdropboxのファイルサイズ制限ないやつやん!ってなりました。
    今後もしかしたら役立つときが来るかもしれません。
    NASを晒すのはちょっと怖い感じもするので、信用できる人とのやりとりのみにしようかなと思いました。

    googledriveの同期を切った

    nasの中で同期をしておいて、出先はそれにアクセスすればいいだけなのです。
    なのでノートPCの同期設定は切りました。
    ちょっぴり負荷が減った感じで、容量にもすこ~し空きがでました。(8GB)
    内蔵の容量が128GBだったときは致命的な容量だったんですが、1TBだとほんとにちょっとですね。
    大容量はパワーですわ・・・。

    googleはメインで2つのアカウントを使ってるんですけど、両方同期できました。
    公式の同期ツールだとけっこう制限がありそうなこのようなことも全然問題なくできたので「やべぇ」と思いました。

    思ってたより全然すごい

    すごく便利です。
    便利な半面、セキュリティのリスクはある気がします。
    本来なら、タイムマシン目的なのでその用途だけに使い、出先で接続なんでしないほうが安全に決まってます。

    でも便利さには抗えねぇ。使っちゃうんですねー。

    自分はわりと「蓄積していく」ってのがあまり得意じゃないんですよね。
    過去は精算したいし、ファイル全消しとかしたくなっちゃう。

    実際古いファイルもっていて役にたったなーと思うことはほとんどなく、わりと近い範囲で「バックアップとっときゃよかった」ってなる程度です。

    うまいこと使っていけば「身になるデータ蓄積」も身につくようになるのかなぁ?
    しばらく使ってまたレポートしたいと思います。

  • ラジオ・スターダストボーイズのイベントに参加してイベントでお金を取るとはこういうことだと思った

    スターダストボーイズのラジオイベントに参加して来た

    超簡単に説明すると、ラジオの構成作家さんと芸人さんとでニコニコで配信してるラジオです。
    伊福部さんと向さん。
    アニメ業界で活躍してる二人なので、一応「アニラジ」らしいですが、アニメの話はほとんど出てこず、二人の日常に起こった出来事などを二人の経験でつちかってきたであろうトーク術で喋りまくっています。ちょっと前はAVの話題ばっかしてる時期がありました。

    このラジオ、個人的にはめちゃくちゃおもしろくてなぜこんな「知るひとぞ知る」ぐらいの地位に甘んじてるのかよくわからないものの一つです。

    そのラジオのイベントでした。

    内容についてちょっと触れるよ

    内容については本日(2018年5/14)のラジオで語られると思いますので、詳しくは明日にでも追記しようかな。

    ちょっとだけ書くと
    昼夜参加しましたが、四コマ漫画の「転」の部分にあたるのは
    昼では「カドタさんが実は連絡無しでいきなり来た」と発覚したところです。会場全体でドン引きできたのはとても良い経験になりました。

    夜は香里さんの「天狗」の答えの発表シーンです。
    あの回答は誰も予測できなかったのでは。
    最高の予測の裏切りでした。

    最高潮の盛り上がりはもしかしたら別のとこだと思うんですけど、ここから完全に空気が変わって会場の「笑っていい」雰囲気が完璧に成立した気がします。
    香里さんのやつは出題者が有能すぎるでしょ。どういう発想であの問題出て来るの。そしてなんであんな面白い回答が帰ってくるの。狂ってる(褒め言葉)。

    全体的には、何も言うことない。最高に楽しめました。

    イベントを開催するって凄いなーって思った

    昼の部では映像がありましたが、基本的に壇上に3人(ゲスト:芸人の好井さん)立って喋ってるだけで2時間持つんです。
    しかも内容的には、「まだ足りない」ってところで終わってるんですよね。
    これって本当にすごいことだと思います。

    過去の放送回を見ながら二人でコメントしていくってのをやってて、「ここ面白かった!もう一回!」っていうのはすごく今っぽいなと感じました。
    テレビは面白いシーンがあっても繰り返し見ることはないですけど、動画時代ですからyoutubeでは面白いシーンを切り取りますし、個人的に面白かったらシーンはワンクリックでもう一度再生することができます。

    この企画で流してる放送回自体もすごく面白かったんですが、そこにコメント・解説が加わることで面白さが倍増しますし、演者だからわかる注目ポイントにも気づくことができます。

    面白いコンテンツもう一度楽しむ

    こういうコンテンツの再消費、すごく好きです。
    また、マニアックなところに話が飛んで申し訳ないんですがゲーム実況者の「幕末志士」さんの会員限定ラジオでも同じようなことをやってることがよくあります。
    自分たちの過去の音源とか流して二人でゲラゲラ笑ってるの。面白いところは何度も繰り返すの。

    アニメでコメンタリーとかも似たような発想だと思うんですけど、注目ポイントでないところは飛ばしたり、面白いところは逆に「止めたり」「繰り返したり」するともっと良いコンテンツにできるんじゃないかなって思っています。

    夜のイベントはゲストたくさん

    昼は省エネな感じから、最大のおもしろさを生み出していたわけですが、夜公演はめちゃくちゃに豪華でした。料金安くないっすか。

    自分はラジオ自体のファンで行ってましたが、こうゲストがたくさんいるとそれぞれのファンがきているので、見せ場を作るというのがすごく難しいんじゃないかと思いました。

    • おもに声優さん目当てであろうお客さんのためには、2人の個人コーナーがある。
    • そのコーナーの一つでは審査員として芸人さんの見せ場も作る。
    • 最後は全員登場。改変脚本でそれぞれ芸人本来の持ち味を見せる

    はー(感心)って思いました。
    これがプロの仕事か。

    そんなとこ見る側が気にしなくていいわってポイントを見てました。すいません。
    (あと、めっちゃ盛り上がってるなか途中で帰ったっぽい人がいて、芸人さん2人がめっちゃ見てて、やっぱそういうとこ敏感なんだなーと思いました。)

    6月にもまたイベントやるみたい

    こんだけお客さんを満足させられるなら、っていう自信があるんでしょうね。
    そりゃそうですよねって思います。
    あとはきっとMゴリラさんの貢ぎの力なんじゃないかと思ってます。
    大阪なので行くのは現実的ではないですけど。

    向さんは三上さんが絡むと感情が複雑になりがち

    滑ってる女の子に興奮する人らしいんですが、これがそもそも結構複雑だし、
    まなちゃんを可愛くないと言うのはいいけど、三上さんが可愛いと言ったのは否定するのはだめとか。

    誕生会の企画も向さんの「複雑にするの好き」が招いた結果なのでは?って思ったり思わなかったりしました。

    終わり

  • 感想 : 月がきれい

    いまさらだけど「月がきれい」を見た

    amazonプライムで気になってたけどみてない作品を消化しようと思ってみたのですが、
    これはあかん。
    見終わった後、余韻でちょっと精神がぐらつくやつやんけ。
    結論からいうとめちゃくちゃよかった。

    割と前の作品だから、ネタバレして書いてます。
    今後見ようと思ってる人はこの記事は見ないで作品を見るように。

    でもまぁ、結論見たからって途中のドキドキが薄れるわけ・・・薄れるわ!
    さっさとアマソンプライムに登録して全部見てください。

    どこまでも等身大を描く

    ぶっちゃけ地味な話で、どこにでも転がってるような話にすこーし脚色しましたみたいな話ですよ。

    でも !

    だからこそ !

    めちゃくちゃ心にくるものがある。

    中学生の恋愛ってこんな感じだなーっていう。
    大抵どこかで挫折してしまう思い出になるわけですけど、この二人はうまくいっちゃってますね・・・羨ましい!

    リアルだと最後のシーンで別れますよね。すっごくリアル。

    じゃない!

    エンディングで描かれるその後できっちり結ばれてますやんけ。うーん羨ましい。
    現実だとあの状況での継続はめっちゃ困難だと思いますよ。

    「桐山部活やめるってよ」と同じこと思ったんですけど、登場人物にめちゃくちゃ共感する人もいると思います。
    運動部の友達の安曇好きになっちゃう子、怖いくらいしたたかじゃないですか・・・友情壊さないように本気でとりに来てるのまじ怖い。

    でもまー特別な2人ですよね

    中学の頃なんてもっとちゃらんぽらんに生きてると思いますよ。
    陸上部で優秀だったり、親になんも将来のこと考えてねぇと言われる安曇くんだけど、小説書いて応募して、地域行事にきちんと参加してたらすごくしっかりしてる方だと思う。

    ストーリー的に、何も取り柄がない男が、なぜか女の子にモテてってなるとひと昔前のハーレムものになっちゃうんで、そうならないよう一応用意しておいた要素だと思います。
    でも実際は「何か特別なものがあるわけじゃないけど、なんかお互い好きになっちゃう」 みたいのがやりたかったと思うんですよね。
    「部活が同じ」みたいな共通点作っちゃうとなんか違う気がするし、最初の縁を結んでいく過程は結構難しいし脚本練ったんじゃないかなぁと思います。

    お祭りの練習がないと夜のシーンも描けないしね。
    作品タイトル的に月が出てくる夜のシーンは必須だと思うので、お祭り行事に参加してるってのもうまいこと夜のシーンを出すうまい舞台装置だなっておもいました。(今思うと)

    告白シーンやばくね

    絶対まだ告白しないと思ってると思うんですよ。誰しもが。
    「月が綺麗ですね」
    「つきあって」
    ですよ。名シーン。女の子にセリフ取られちゃうの。
    その後うだうだ結論を引き延ばすのも中学生の恋愛っぽくていいですね。

    気になってたけど見てないって人は早く見るべき

    自分みたいに割と地味な話っぽいし後回しでいいや、と思ってる人は早く見た方がいいですよ。
    ちゃんと面白いんで。

    すごいよかったです。おわり。

  • windowsに仮想PCでubuntuをインストールしてみた。

    やりたいこと

    linuxの共有フォルダをtimemachineにしたい。

    macのバックアップを取りたい。
    windowsの共有サーバーではどうやら難しいらしい。
    windows内の仮想PCにlinuxをインストールして共有もどうやら可能らしい

    とりあえずインストールしてみた

    仮想PCをインストールするのはそんなに難しくない

    isoファイルをダウンロードしてきて、仮想化ソフトでインストールするだけ。

    linuxはオープンソースなのでいろんなものが存在します。(androidとかもその一つ)
    サーバー用のものは真っ黒な画面で、他のPCから接続することを前提とした省エネなやつもあるんですが、そういうのはとっつきにくいので、割と普通PCみたいに使える「ubuntu」を選択してみました。

    自分のWindows PCはメモリ16GBも積んでいて、宝の持ち腐れがはんぱないので、4GB割り当ててみた。
    最初ちょっと古い14?とかのバージョンを入れてみましたが、なにかとエラーが出ました。あとちょっともったりする感じがある。16にしたら見た目もちょっとよくなっていい感じです。

    ファイルサーバー立てるのがよくわかんねー

    通常のpcにlinuxをインストールしてファイル共有するやり方が結構出てるんですけど、そこに仮想PCという要素が乗ってくるともう頭がこんがらがっちまいますね。
    NASを買ってくれば簡単に解決すると思うと、「もういいや!買ってくる!」となる気持ちもよくわかる・・・・。

    ファイルサーバー以外の気づき

    microsoftのvs codeとか普通に動きますね。
    このソフトをメインで使ってるなら、もうwindowsでもmacでもlinuxでもなんでもいいじゃん。って思いました。
    chromeも動くしね。
    chromeにログインしちゃえばどこも一緒ですからね。

    あとはpsdファイルさえちゃんと処理できればね。

    まだ苦闘中

    時間あるときにちまちまやります

  • Time Capcelを導入しようかと検討していたら・・・・

    Time Capcel生産終了

    現在売ってるもののみで終わりで、Appleはwifiルータ製品をもう作らないのだそうです。
    現在の製品は5年ほどサポートがあるのではないか?とのこと。

    Apple、Wi-FiルーターのAirMacを終了

    ルータ機能いらないけどバックアップはしたい!

    1TBSSDに換装したのはいいんですけど、なんでもかんでも保存するようになっちゃって、このパソコンぶっ壊れたら怖いなーという思いしかないんですよ・・・。
    現在、1TBの外付けポータブルディスクをTime Machineのディスクとして使っているのですが、これがすこぶる調子が悪い。
    接続しても認識しないことが多々ある・・・・。
    本体より壊れやすいバックアップというのも考えものなので、どうにかバックアップはキチンとしておきたいなーと検討していたのです。

    選択肢1 Time Capcel を買う

    色々見てみたのですが、やはり安定性がすごく高いみたいですね。
    いずれサポートは終了する製品とはいえ、今買ってしまうのもいいかなーと思うのですよ。

    選択肢2 他社製のルーターかNASを買う

    time machine対応のNASか、ルーター(USBでHDDなどを取り付けできる)を買うかー?
    こちらの難点は、いまいち対応してるのか、してないのかわかりにくいということです。
    なんかこの雑なサポートのしかたがあまり信用できないんだよなー。

    HDD + ラズパイ で自作している方もいるみたいです。
    Raspberry PI 3 でMacのTime Capsuleを自作してみた

    これいいなー。要検討です。

    選択肢3 他のMACの外部diskを保存先に指定する。

    macOS High Sierraでは、Time Machineサーバーの機能がOS標準機能として組み込まれました。設定方法を解説します。

    上記のようなことができるみたいです。それまでは2000円ぐらいのアプリを入れないとその機能は使えなかったみたいですが、新しいOSは標準搭載みたいです。
    なるほど、wifi製品の販売を終了する代わりにこういった手段を提供していくのだなと思いました。

    これはすごくちゃんとしてそうです。
    でもMac持ってないんですよ。
    新OSが入れば古くて問題ないと思いますけど、それでも高いよなぁ・・・・。

    Mac mini

    windowsでこれやらしてくれえ! 無理か。

    結局様子見です

    新しい何かが発表されるかもしれませんし、それまで壊れかけのHDDで耐えて行こうかなと思っています。

  • お手軽環境構築!local by flywheelとかいうローカルwordpressツールがすごい

    WordPressのローカル環境構築が難しい!とお悩みではありませんか?

    PHPやwordpressでは、ローカルのパソコンでは簡単に動かせないという初心者の壁が存在します。
    ぶっちゃけ、レンタルサーバー借りるのが手っ取り早くて心の負担も少ないんですけど、様々なPHPとwordpressの教本では最初に環境構築という苦行を行わせることによって、初心者の心を全力で折りに来ています。

    ほんとにレンタルサーバーの方がオススメなんですけど、しょうがないなぁ。
    めっちゃ簡単で高性能なアプリケーションを教えちゃいます。

    local by flywheelの紹介です。

    ダウンロードは以下から
    https://local.getflywheel.com/

    メールアドレスと、名前やら、運営サイト数やらを入力してダウンロードしてください。
    MAC版もあります。
    そしてインストールします。

    インストールしよう


    すると、ローカルで動かすのに必要なアプリケーションが全部一発でインストールできちゃいます。
    あとはワードプレスの管理IDをパスワードを入力して、
    お任せでインストールしてもいいし、カスタムでPHP、mySQLのバージョンと「Apache」か「nginx」か選べます。
    普段「Apache」のサーバーしか触らないんで、カスタムで「Apache」にだけしてインストールしてます。

    以上です!

    ここまですんなり行く人にとっては良いツールだと思うんですが、動作に結構条件があるっぽいので、古いパソコンだと動かないかもしれません。
    32bitOSはダメだし、仮想環境がうまく作れないパソコンもダメみたいです。
    そうなっちゃった方は、わりとどうしようもないこともあるみたいなので、対策を考えるよりもほかのツールを探した方がいいかもしれません。

    画面説明

    すこし試す程度で把握できちゃう感じですが一応。

    簡潔でとてもよいですね。

    ダメだった人はサーバーにしましょう。

    あかんかった!という人は以下の記事を試して見てください。
    https://logzitsu.tlog.work/xdomein/
    Xdomainの無料サーバーは少し触って見ましたけど、ちょっと不安定なところがあるかもしれないです。
    無料だから仕方ないですが。

  • 手書きでワイヤーフレームとサイトマップを作ってみた

    サイトを作るにはとりあえずサイトマップと、ワイヤーフレームがいるよな、ということで
    汎用的なテンプレートになりそうなものをさっと作成してみました。
    実際にはもっと要件によって構成を作り変えてあげる必要があります。

    今回は汎用的なテンプレート

    まずサイトマップを作らなくてはなりません。
    今回はHTMLサイトですが、Wordpressサイトの場合はまずサイトマップがどんな役割をしているのか把握が必要なので最初に作成の必要があります。

    TOPページ

    アーカイブ・個別ページ

    この程度で最低限ではないでしょうか?

  • BootstrapでHTMLサイトを作ろう! その1

    完成したHTMLサイトからWordpressテーマを作成する、という記事を書こうと思ったのですが、一つの記事にすると長すぎるし、事前に説明が必要なことや準備が多すぎる!
    ということで外堀を埋める作業をずっとしています。

    こちらの記事はワードプレスサイト化するための元となるHTMLサイトを作成する記事になります。
    めんどくさいのでbootstrapでチャチャっと作ろうと思っているのですが、bootstrapについての説明も必要ですよね。
    その辺も合わせて説明していくのにチャレンジしてみたいと思います。

    Bootstrapでサイトを作ろう

    Bootstrapとは

    まずBootstrapについて説明しなければなりますまい。
    Web制作をしている方は、「このCSS使い回せるようにしといたら楽だな!」などと思って実際に使いまわしていることはないでしょうか?

    それです

    BootstrapはそういったCSSの塊です。ついでにJSもついてます。
    こういう使い回しのきくCSSを集めたものを「CSSフレームワークと呼びます」

    めちゃ普及しているCSSフレームワークであるBootstrap

    Bootstrapはかなり日本ではメジャーなCSSフレームワークですのでそこら中に情報が転がっています。
    便利ですね。
    また、Bootstrapを使ったサイトであれば、修正加筆が簡単というメリットもあります。
    大規模で運営するほど、こういったフレームワークを活用することで大人数の修正でも破綻しないことが期待できます。

    メリットとデメリット

    先に紹介したように、bootstrapを知っているもの同士ではファイルの可読性が増しスムーズです。
    修正も簡単で、一から書いていると割と大規模な改修になってしまうものでも、「class1つ変えるだけ」でレイアウトを大きく変更してしまうことも可能です。そういった大規模修正であっても、CSSを全く書かなくていいこともあるというのもすごくいいですね。しかし、逆に言えばわからない人は全く使えないというのがデメリットです。学習コストが発生します。
    一回覚えてしまえば利用に関してそこまで複雑なルールはありませんので、簡単なんですけど、触れていない人は何だか仰々しく、難しいものに感じてしまうのも事実です。

    もう一つデメリットとしては、「bootstrap臭さ」が出てしまうということです。
    簡単は簡単なのですが、どこかで見たことがあるようなサイトになってしまうのです。
    運用重視で、デザインに関してはそこまで重要視していないというサイトであれば導入しない理由はありません。
    それと、設定データからカスタマイズしてしまえばこの「bootstrapっぽさ」はかなり消せると思います。

    モバイルファーストなサイトが作成できます。あとはFlexboxが登場してから、割とスマホ対応が簡単にできるようになったのでちょっと利用重要度は下がっているんですけどね。

    あと導入が簡単なので、一から書く場合はリセットCSSを準備して、配置して、みたいなサイト制作開始時の手間がかなり減ります。リセットCSSは組み込まれていますのでわざわざ適用する必要はありません。
    ちょっとクセはありますがモーダルウインドやカルーセルなども利用できますので便利です。

    classつけすぎ問題
    性質上htmlにclassがいっぱいつくのもデメリットと言えばデメリットかも。

    Bootstrapの基本的な概念について覚えよう

    こちらはbootstrap4について書いています。
    バージョンでかなりclassに差があるので注意です。

    グリッドシステム

    bootstrapの大きな特徴として「グリッドシステム」を採用していることが挙げられるでしょう。
    グリッドシステムとはサイトの横幅を12分割して考える方法のことです。

    たとえば要素を3分割したいなら、

    <div class="row">
    <div class="col-4">コンテンツ1</div>
    <div class="col-4">コンテンツ2</div>
    <div class="col-4">コンテンツ3</div>
    </div>
    

    こうなります。12÷3ですので、4という数値が3分割を表します。
    4分割なら

    <div class="row">
    <div class="col-3">コンテンツ1</div>
    <div class="col-3">コンテンツ2</div>
    <div class="col-3">コンテンツ3</div>
    <div class="col-3">コンテンツ3</div>
    </div>
    

    こなります。

    デモページ
    sample1

    このように、幅を指定したい場合は「col-?」という形で指定し、それらを囲む親要素には必ず横並びを表す「row」というclassをつけるようにしてください。

    モバイルファーストのレスポンシブ

    bootstrapでは最初から見た目の切り替わりである「ブレークポイント」が設定されています。
    このブレークポイントで、classによる表示を変えることができる仕組みを持っています。

    grid options

    Extra small
    <576px
    Small
    ≥576px
    Medium
    ≥768px
    Large
    ≥992px
    Extra large
    ≥1200px

    この5つのポイントでCSSの切り替えを行うことができます。

    例えば 「Extra small」ではサイト幅いっぱい。
    「Medium」より大きい場合は3分割、という場合は次のように指定します。

    <div class="row">
        <div class="col-12 col-md-4">コンテンツ1</div>
        <div class="col-12 col-md-4">コンテンツ2</div>
        <div class="col-12 col-md-4">コンテンツ3</div>
    </div>
    

    デモページ
    sample2
    サンプルではスマホで全て幅いっぱいにする指定をしています。サイト幅を変えて表示を確認してください。

    上記のような仕組みはグリッドシステムだけでなく、他の指定でも応用できます。

    例えば
    「d-block」「d-inline」「d-none」
    という指定があります。
    これらはそれぞれ、ブロック要素にする、インライン要素にする、none(見えなくする)という指定です。

    これをレスポンシブの指定と組み合わせると

    <p class="d-none d-md-block">PCPCPCPC</p>
    <p class="d-block d-md-none">SPSPSPSP</p>
    <p>現在のサイト幅は<span class="d-inline d-md-none">SP</span>
    <span class="d-none d-md-inline">PC</span>サイズです</p>
    

    このようなこともできます。
    デモページ
    sample3
    サイト幅を変えて表示を確認してください。

    サイトの幅を指定する。

    <!-- 通常 -->
    <div class="container"></div>
    <!-- ウインドウいっぱい -->
    <div class="container-fluid"></div>
    

    デモページ
    sample2

    画像をレスポンシブ化する

    <img class="img-fluid" src="test.jpg" alt="">
    

    デモページ
    sample2

    フレックスボックスの細かい指定

    FLEXの細かい指定もclassで可能です。
    幅「md」より広い時は横並び、狭い時は縦になる場合です。

    <div class="container">
            <h1>Flexboxもclassで指定できる</h1>
            <div class="d-flex flex-nowrap flex-column flex-md-row">
                    <div>
                            <img class="img-fluid" src="test.jpg" alt="">
                            フレックステスト
                    </div>
                    <div>
                            <img class="img-fluid" src="test.jpg" alt="">
                            フレックステスト
                    </div>
                    <div>
                            <img class="img-fluid" src="test.jpg" alt="">
                            フレックステスト
                    </div>
            </div>
    </div>
    

    デモページ
    sample4

    その他いろいろ便利です

    h1などの見出しももともとスタイルが適用されていたり、tableタグに「.table」をつけるだけで簡単にいい感じのテーブルになってくれたりします。
    フォーム関係の指定も充実していて便利なのですが、ここでは割愛します。

    指定をまとめた「チートシート」を掲載しているサイトがありますのでそちらのリンクを参照してください。
    Bootstrap 4 Cheat Sheet

    実際にサイトを作ろう!

    ではブートストラップの紹介も済みましたので、実際のサイトを作成していきたいと思いますが、ちょっと長くなったので次の記事に続きます。

    執筆中。

    TECH::CAMP(エンジニアスクール)
  • 初心者のつまづきポイント、XdomainでFTPを理解する(5分)

    当サイトで紹介しているXdomain無料サーバーでFTPソフトを利用するには?
    をまとめていますので参考にしてください。



    利用にはちょこっと設定が必要なのです。

    FTPソフトはFireZillaを利用しています。

    https://logzitsu.tlog.work/xdomein/

    サーバーレンタルの記事はこちらです。

    まずは管理画面にログイン

    Xdomain管理パネル
    管理パネルにログインしましょう。


    無料レンタルサーバー

     


    管理パネルログインをクリックし、ワードプレスサービスの管理ページに移動しましょう。

     

    設定をクリックしましょう

     

    FTP設定の部分を探してクリック!
    余談ですがphpMyadminへのログインリンクもここにありました。


    (とくに今回は触りません)

     


    こうして

     


    こうして

     

    こう! 自動生成されたパスワードを確認する場合は編集をクリック

     

    パスワードが確認できます。
    あとはここにある情報を、FTPソフトに入力しサーバーとの接続を行ってください。

    https://logzitsu.tlog.work/ftp/

  • WEB制作環境を整えよう!

    WEB制作に必要なものまとめ

    こちらのサイトではWEBのノウハウについてまとめていますが、制作に必要な環境について書いておかないと、それぞれの環境に差があって説明しにくいことに気づきましたので、この記事でWEB制作に関するソフトなどについてまとめておきたいと思います。

    やっぱり最優先で揃えたいPC

    WEB制作でコードを書く作業はそんなに重い作業ではないのですが、デザインデータに主に「photoshop」という画像処理ソフトでデザインを利用します。
    あとは「adobe XD」とか。これも別にすごく軽いソフトではないので、
    最新版のPhotoshopがちゃんと動くのが作業PCの最低条件かと思います。

    PhotoshopがそしてXXが動かないよーとかいってるやつ!さっさと買い換えろ!
    せっかく時間を割いて勉強してるのに、色々無駄で勿体無いですよ。

    10~15万ぐらい出せばすべて解決します。
    スピードが早くなり、効率がいいのは言わずもがな、気に入ったPCで作業できるという心の問題も大きいです。

    OSはどっちがいいの?

    windowsでもMacでもどっちでもいいです。気に入った方を使ってください。
    Macは高くて低スペック、と言われがちですが軽さや筐体の丈夫さ、キーボードの打ちやすさ、画面の美しさは折り紙つきなのでそういうところを気にしてwindowsを選ぶとめっちゃ高いです。
    反面、macは一番安いノートを選んでもその辺は妥協してないと保証できます。
    あと、結構古くてもオークションなどで人気なので下取り価格が下がらないのもいいですね。
    自分は、ほぼ価値がゼロになるまで使い倒しそうな勢いですけどね。
    不満がほとんどないからしょうがない。

    どちらを選ぶかについてはどこを重要視するか、ですね。
    使い慣れたwindowsの方が効率がいいということもあるでしょう。

    Linuxはどうなの?

    サーバーでよく使われるOSですのでサーバーとかに詳しい人が使ってるイメージ。
    photoshopは動かないと思いますので、メインで使うのは難しいかもしれません。
    デザインに関わらない人なら行けるかも。

    ネット環境

    当たり前ですがネット環境は必要です。
    ソフトのダウンロードなど結構帯域を使いますので、モバイル回線のみはかなりきついかもしれません。
    光回線などの固定回線を契約しておいた方がいいでしょうね。

    WEB制作で使うソフト

    デザインソフト

    まず、デザインソフトを使用します。このサイトではあまりまだ触れられていませんが。
    デザインがメインの業務でなくても、デザインを受け取って画像を切り出す作業は必要なのでインストールは必須でしょう。

    adobeソフトなのでこちらから
    Creative Cloud
    月額有料のソフトです。
    映像を作成するソフトも含まれています。WEBも映像を組み込むような場面が多くなっていますので、そういったことを視野に入れればそんなに高くないです。
    月額利用料分くらいは頑張って稼ぎましょう。

    Photoshop

    adobeのソフトはクラウドサービスの月額制になっていますので、全てのソフトが使えるプランに登録しておいた方がいいと思います。
    Photoshopは写真の加工を行うソフトですが、WEBデザインにも利用できます。
    絵を描くソフトとしても使えますし、汎用性のある万能ソフトです。
    ワイヤー作成 → デザイン作成・画像補正・イラスト作成 → デザイン納品
    までこのソフト一本でできちゃいます。
    月額有料のソフトです。

    WEBデザインや、ワイヤー作成ソフトは色々他にもあるんですが、「画像編集」という点でどう考えてもphotoshopに勝てるソフトがないので、なかなか他のソフトが普及していない気がします。
    納品となると、相手も同じソフトを持ってる必要がありますしね。

    多分どれもphotoshopの作業ファイル形式である「psd」出力の機能を持っているのではないでしょうか。

    Illustrator

    Webデザインにおいてはさほど存在感がありませんが、イラストレーターも利用します。
    元々はイラストを作ったり、紙媒体のレイアウトを行うためのソフトです。

    ロゴやアイコンを作成する時に利用します。
    SVGという軽量でどんなに拡大しても問題ないベジェ曲線データの画像を作成できますので、そういった場合に使用します。
    とはいえ、シルエットのアイコンデータはフリー素材がかなり充実していますので、わざわざ作成する機会もやっぱりすくないですけどね。

    また、紙媒体出身のデザイナーはだいたいIllustratorのほうが得意ですので、webデザインをすべてこのソフトで行うという方もいます。
    月額有料のソフトです。

    エディタ

    HTMLやCSSはテキストデータなので、まずはこれが必要です。

    Visual Studio code

    最近使ってからメインになっていますが、最初からWeb制作に必要な機能が搭載されている感じがすごくいいです。
    Gitとかもこのソフトを使えばさほど抵抗なく利用できるのではないでしょうか。
    近くにそういった技術に詳しい人がいるとすごくいいと思いますけど。
    WinでもMacでも使えます。
    無料です。

    Visual Studio Code

    Dreamweaver

    Adobeのソフトウェアです。昔に比べるとかなーりよくなっているはずのソフトなんですけど、結局使ってないんですよね。いろんな機能がついているが、なんとなく重い印象がネックですね。
    ほかのソフトでも問題ないのでわざわざ使う必要がない、みたいな感じでしょうか・・・。
    月額有料のソフトです。

    atom

    github謹製のエディタ。
    軽くて機能拡張もでき、カスタマイズすることでどんどん自分好みのエディタになります。
    多分、別のパソコンでも環境を統一できると思うんですが、Visual Studio codeが初期状態で使いやすすぎるせいでこのソフトの出番はだいぶ減ってます。
    Atom

    ただインストールしただけだと物足りないエディタなので、いろんな記事を調べて適用できる方におすすめ。

    チャットソフト

    お客さんのやり取りや、制作者同士のやりとりで必要になってきます。

    LINE

    お客さんが使える環境にあるという一点で使う機会が多いです。
    ただし、過去データが見れなくなることが多いです。
    WEBにメッセージ履歴が残ってないので、端末を変えたりすると過去のデータが見れなくなることがあります。仕事のやり取りで使うには不安が大きすぎます。
    バックアップを撮る機能はありますが、そんなことを気にするより他のツールを使ったほうがいいでしょう
    お客さんとのやりとりはしょうがないですが、最低でも制作者同士のやりとりは他のツールで。

    チャットワーク

    月額利用料を払ってないと、部屋が5つぐらいしか作れないという制限があります。
    でも割と普及してますし、チャットソフトとしての不満はあんまりないです。

    slack

    使ったことないんですけど、チャットワークより無料による制限が少なそうなのがすごくいいですね。
    エンジニアが使ってるイメージがすごくあります。
    チャットワークは割と閉じた印象なのですが、slackはいろんなソフトと連携して面白いことが色々できるみたいです。
    機会があればちゃんと使ってこのサイトでもそういった記事を作ってみたいですね。

    プロジェクト管理

    https://logzitsu.tlog.work/task/
    この記事でも少し触れましたが、プロジェクト管理ツールを利用するのが割と一般的になりつつあります。
    複数人でTODOを共有できるソフトウェアです。

    使ってみるとわかりますが、めちゃくちゃ効率がいいです。

    trello

    有料のツールが多い中、無料でかなりのことができるツールとなっています。
    おすすめです。
    trello

    プロジェクト管理ツールに関しては会社に所属している場合はそこで使っているソフトを利用するケースが多い気がしますので、今回触れるのはこの程度にしておこうと思います。

    ブラウザ

    制作したものが実際動作するか確認が必要!
    ということでWEBブラウザーは必須です。

    Chrome

    このソフトの検証ツールに慣れすぎて、これなしでは作業ができません。
    でもJavaScriptとかの検証についてはそんなに明るくないので、その辺も調べた上記事にしてみようかなと思います。

    EDGE

    windows10のデフォルトブラウザーです。
    Windowsでないと動きませんよ。

    internet explorer 11

    もういいだろ、デフォルトから消してくれ、な「internet explorer 11」です。
    とはいえ、昔のIEと比べて、表示が異なってしまうことは少ないかな、と思います。
    Windows専用です。

    Safari

    Macのデフォルトブラウザーです。
    Windows版もありましたがそれはもうサポート切れてると思いますので気にしなくていいです。
    iOSのデフォルトブラウザーでもありますので、スマホでの動作確認もこちらで。

    Firefox

    Firefoxです。バージョンが新しくなって早くなったみたいです。
    ほとんど使ってないですけど、頑張って欲しい。

    Androidデフォルトブラウザ

    Android持ってないので今は違ったらすいません。
    デフォルトでついてるブラウザです。
    Androidスマホでの検証で必要になります。

    ブラウザまとめ

    Win、Mac、iphone、Androidスマホ
    を全部持ってないと上記の検証はできないんですよね。
    ちょっと古い端末はそんなに高くないので、一応持っておくといいかもしれません。
    持ってる人に借りて確認するのも全然ありだと思います。

    FTPソフト

    サーバーにファイルをアップロードするために必要なソフトです。
    https://logzitsu.tlog.work/ftp/
    このサイトではFilezillaを使ってます。

    レンタルサーバー

    自分の作品を公開したり、サイトをテストするために自分のサーバーを持っておくのは割と一般的な気がします。
    ドメインも持っておくといいでしょうね。
    月額費用はかかりますけどね。

    まとめ

    まとめると必要なツールは

    • パソコン
    • ネット環境
    • Adobeのツール
    • エディタ(この記事では VScodeを採用)
    • ブラウザ
    • FTPソフト
    • レンタルサーバー

    これらが揃っていれば割と場所も選ばずに活動できるということです。
    いい世の中になったなーと思います。
    そして、今後も生き残れるように決意を新たにした次第であります・

    おわり。

  • WordPress初心者マニュアル -インストールしたらまず見よう-

    TECH::CAMP(エンジニアスクール)

    wordpressをインストールしたら見るマニュアルです

    ワードプレスをインストールしたものの、なんだかよくわからねえ。
    そんな困ってしまってる人を助けるための記事です。
    必要な部分を読んじゃってくださいね!

    まだワードプレスをインストールしたことがない!
    インストールの仕方もわからない!という人は以下の記事を参考にしてみてください。

    https://logzitsu.tlog.work/xdomein/

    ワードプレスサイトを持ってる方は以下へどうぞ。

    WordPress管理画面にログインする

    各自、ワードプレスが閲覧できるアドレスを持っていると思います。
    自分の場合は以下。
    http://logzitsu.wp.xdomain.jp/

    このアドレスの末尾に「wp-admin」をつけてアクセスしてみましょう。
    http://logzitsu.wp.xdomain.jp/wp-admin
    といった具合です。

    ワードプレスのログイン画面が表示されたと思います。
    ワードプレスインストール時に設定した、
    「ログインID」or[メールアドレス]
    そして「ログインパスワード」を入力してください。

    管理画面解説


    管理画面左にあるメニューは「管理メニュー」などと呼びます。(多分)

    今回の記事で説明するのは

    • テーマの変更方法
    • 記事の投稿方法
    • 固定ページの追加方法
    • プラグインの追加方法(contactform7)

    です。今回触るのは画像の赤で印をつけてある部分のみです。

    テーマを変更してみよう

    ワードプレスは見た目を簡単に変えられるので、HTMLがわからない人でもテーマ制作者による高品質なテーマが利用できるのが大きな利点です。
    まずはサイトの見た目を変えてみましょう!

    管理メニュー
    外観 → テーマをクリックすると上記のような画面になります。

    「新規追加」をクリックすると新たなテーマを追加する画面に移動します。
    選んで「プレビュー」するとどんなテーマかみることができますので、試してみましょう。

    上記は Start というテーマのプレビュー画面です。
    多くのテーマ作者さんたちが提供していますので、多くのテーマから選ぶことができます。この画面から選べるものは無料で利用できます。

    気に入ったものが見つかれば、インストールしてみましょう。
    すぐに適用されるわけではありませんので、安心してインストールしてみてください。
    インストール後、「適用」することでサイトの見た目が変わります。

    テーマにより、搭載している機能が異なりますのでご注意ください。

    記事を投稿してみよう

    ワードプレスの大きな特徴として、ページ追加がとても手軽であることがあげられます。手軽にページを追加できるということは更新や記事の追加が簡単ということですので更新頻度が上がり、SEOへの効果も期待できます。

    管理メニュー
    投稿 → 新規追加

    で上記の新規投稿追加画面に移動します。
    タイトルと内容を入力すればOKです。

    ブログエディタ機能で簡単に見出しやリストなどを作成できますので、活用していい感じに読みやすい記事を作っちゃってください!

    アイキャッチを設定しよう

    記事にはアイキャッチが設定できます。
    記事内容の部分から画像を追加できるのですが、アイキャッチとして追加したものは、記事一覧で使うことができます。
    多くのテーマはこの画像を有効に利用していますので、記事にはアイキャッチを設定してあげたほうが見栄えが良くなります。必ず設定するようにしましょう。

    ワードプレスの画像追加は、画像投稿画面を表示したら、パソコンからのドラッグ&ドロップで直感的に作業できますのでそんなに迷うことはないかな、と思います。

    記事にカテゴリとタグを設定しよう。

    ワードプレスは初期状態で「カテゴリ」「タグ」を設定する機能が付いています。
    カテゴリやタグってなに?
    という方もいるかと思います。

    記事の分類わけとして認識していだければと思います。
    カテゴリ・タグの使い方は、各サイトで自由に設定できるというのが利点でもありますので説明が難しいのですが、カテゴリは記事の持つ大きな分類分けをするもので、タグは記事の特徴を細かく記載してして指定していくもの、という感じでしょうか・・・。

    ここで設定した情報は同じカテゴリ、タグを持つ記事だけを一覧として表示することができますので、ユーザーの使い勝手が上がりサイトの価値をあげることにもつながります。

    設定が全て終わったら「公開」を押すことで公開が開始されます。

    固定ページを追加してみよう

    投稿と固定ページの違いですが、ブログ記事のように日々いっぱい増えていくようなものは「投稿ページ」
    一度作成したら内容も変わらず、同じようなページもさほど増えないという性質のものを「固定ページ」にするといいです。
    例えばアバウトページやコンタクトページです。
    内容は変わることはあると思いますが、さほど頻繁ではないですし、毎日同じような
    ページが増えていくタイプのものでもありません。

    固定ページの特徴として親子関係を持たせられるという特徴があります。
    親子関係は少し処理として重いそうなので、ものすごい数が増えるような「投稿」てきなものには比較的向いていないため搭載していないのだそう。

    固定ページも「親」の設定がある以外は投稿ページとさほど変わりません。

    管理メニュー
    固定ページ → 新規追加で上記画面になります。

    やってみよう

    お問い合わせページを追加してみましょう
    – タイトル「お問い合わせフォーム」
    – 本文「お問合せはこちらかどうぞ!」

    プラグインを追加する

    いろんな機能を追加できる、プラグインを試してみましょう。
    せっかくなので、今回はサイトにコンタクトフォームを追加してみましょう。

    管理メニュー
    プラグイン → 新規追加
    で上記画面になります。右上にある検索窓から「contactform7」と入力して、富士山のアイコンの該当プラグインをインストールしてください。

    インストールできたら有効化してください。
    管理メニューに「お問い合わせ」が追加されたと思います。

    Contact Form7 の使い方

    コンタクトフォーム7プラグインを使うと、サイトに簡単にお問い合わせフォームページが追加できます。
    入門としてはすごく良いので試してみましょう。

    管理メニュー
    お問い合わせ をクリックすると、
    最初から「コンタクトフォーム1」というものが作成されています。
    それをクリックするとフォームが編集できます。

    この画面で詳細にフォームを設定できますが、初期状態でとりあえず動きますのでこのまま使ってみましょう。

    管理者宛のメールアドレスは、インストール時に設定したEmailアドレスになっているはずです。

    ここでコピーするものはショートコードというものです。
    PHPを管理画面でそのまま使えると、セキュリティに問題があるため、ワードプレスでは「ショートコード」というものを経てプログラムを利用します。

    プラグインでは度々あります。大抵は記事に貼り付けることで動きます。
    コンタクトフォーム7ではこれを貼り付けた場所にフォームが出現し使えるようになります。

    このようにして公開すると

    フォームが生成されます!
    実際に動くか試してみて、受信できれば成功です。

    とりあえず大雑把ですがこんな感じです。

    WordPressの醍醐味な部分にはこの記事の内容を一通りやることで体験できたのではないでしょうか?
    当然ながら細かい設定は色々ありますし、プラグインを追加することでさらに便利にすることも色々できます。
    そういったことについては他の記事で随時触れて行きたいと思いますのでご期待ください。

    https://logzitsu.tlog.work/wordpress1/

    こちらを次に見るとワードプレスについてもうちょっと深く理解できるようになりますよ!

  • WordPressサイトを無料で…?できらぁっ! な「XFREE(旧Xdomain無料サーバー)」で WordPressサーバーを借りてみよう。

    2018年12月中旬に サービス名がXFREEになってます。
    おそらく基本的な使い方は変わらないです。2018/12/28 追記

    XFREEとは

    安定して優秀なサーバーとしてXSERVERが有名なのですが、その会社のドメイン提供サービス・・・・からさらに独立した無料サーバーサービスです。

    こちらのサイトは広告がついてしまうなど制限はありますが、ありがたい事に無料でサーバーを借りることができるのです。

    おためしで、そして学習用に借りるにはもってこいのサービスになっています。
    気に入ったらドメインを、そしてエックスサーバーを利用してあげてくださいね。

    XFREEの無料サーバーを借りよう

    早速借りてみましょう。
    お申し込みにはPCメールアドレスが必要ですので持っていない人は先に取得しておきましょう。

    https://www.xfree.ne.jp/

    エックスドメインはこちら

     

    サイトにアクセスし、
    グローバルメニューの「無料レンタルサーバー」へ移動しましょう。

    サイト中段の「サーバーご利用お申し込み」をクリック!

     

    「無料レンタルサーバーお申し込み」をクリック!

     

    入力欄にメールアドレスを入力してください。
    メールがおくられてきますので、メールに記載の【お申し込みURL】にアクセスし登録を継続しましょう。

     

    必要事項を入力していってください。

     

    管理画面にログインし、「無料レンタルサーバー」へ移動。

     

    サーバーIDを決めてください。入力が終わったら再度「無料レンタルサーバー」へ移動すると画面が変わっています。

     

    WordPress の部分の「利用開始する」をクリックしてください。
    クリック後またまた、「無料レンタルサーバー」をクリックしてください。

     

    WordPressサービスの管理パネル画面にログインすることができるようになっていますのでログインしてください。

     

    WordPressサービスの管理パネル


    新規インストールをクリックで、ワードプレスがインストールできちゃいます。

     


    上記の画像の通り内容を入れてください。URLと書いた部分は空欄でも大丈夫でした。
    決定し進んでいき、「確定(wordpressをインストール)」をクリックするとインストールされます。
    パスワードはインストール後表示されますのでしっかり控えておきましょう。

     

    完了です。これでワードプレスにログインできるようになります。
    お疲れ様でした。



     

    続いて「Wordpress」の使い方について解説していきたいと思います。

     

    https://logzitsu.tlog.work/wordpress-manual/

  • SEO対策についての超基本

    SEO対策の基本を学びましょう。

    SEO対策とは、検索エンジンで検索結果が適切に表示されるように設定しておくことです。
    過去、「キーワードに無関係のワードをとにかく大量に入れる」「外部リンクをとにかく設置する」などのSEO対策が取られていましたが、これらは現在逆効果であると言われています。

    なので、そんなにテクニック的なことはないです。
    上記の不自然なリンクはよく無いのですが、自然増の外部リンクは非常に有効であると言われていますので、外部リンクが自然と増える有益なコンテンツを作成するのが大切みたいです。

    まずは「googleの情報を確認しましょう」

    検索エンジン最適化(SEO)スターター ガイド

    googleに関しては、まずこちらを熟読してください!以上!

    といいたいところですが、それだとこの記事の意味が無いので、抜粋、要約してみたいと思います。
    全部を網羅しているわけでは無いので、しっかり学びたい人はちゃんと元ファイルをみてください。

    ちゃんとしたサイトになるように心がけよう

    ウェブマスター向けガイドライン(品質に関するガイドライン)

    こちらにどんなサイトにするべきか記載されています。

    基本方針

    • 検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
    • ユーザーをだますようなことをしない。
    • 検索エンジンでの掲載位置を上げるための不正行為をしない。ランクを競っているサイトや Google 社員に対して自分が行った対策を説明するときに、やましい点がないかどうかが判断の目安です。その他にも、ユーザーにとって役立つかどうか、検索エンジンがなくても同じことをするかどうか、などのポイントを確認してみてください。
    • どうすれば自分のウェブサイトが独自性や、価値、魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。

    具体的なガイドライン

    次のような手法を使用しないようにします。

    つまり、検索エンジンを騙すような不正をするな!ということみたいですね。

    Googleにインデックスしてもらうための具体的な方法

    サイトマップを送信しよう

    サイトマップというのは、そのページにどんなページがあるかを記載したものです。
    人間がみるためのものではなく検索エンジンが見るためのものです。

    ワードプレスであれば、プラグインによって存在するページから自動生成できます。
    静的なHTMLサイトでも作成するサービス・アプリを利用すれば生成できます。

    作成したサイトマップは「サーチコンソール」から送信してください。

    検索結果に必要の無いページはクロールしないように設定する

    検索結果に載せる必要の無いページをしっかり省くというのも重要みたいです。
    「robots.txt」にクロール除外情報を載せておく必要があるみたいです。

    検索エンジンがコンテンツをちゃんと見れるようにする。

    これはそんなに気にしたことないですね。
    Fetch as Google ツールをつかうことで、検索エンジンにちゃんとページが表示されているか確認できます。
    たぶんプログラムで特殊なHTML生成をしていたりすると、適切に認識されてない可能性があるから
    気をつけてね、ということを言っているんじゃないかと思っています。

    固有の正確なページタイトルを付ける

    この辺がSEO対策として言われる部分ですね。
    titleタグの中身が検索結果として表示されるので、タイトルづけは超重要です。

    • ページのコンテンツについて正確に記述する
    • 各ページに固有のタイトルを付ける
    • 簡潔でわかりやすいタイトルを使用する

    つまり、内容を的確に簡潔にタイトルに反映し、同じタイトルを複数ページで使わないようにするということですね。

    「description」メタタグを使用する

    • ページの内容を正確に要約する
    • ページごとに固有の説明を使用する

    見出しタグを使用して重要なテキストを強調する

    • 概要を書く場合を想像する
    • ページ全体で控えめに見出しを使用する

    サイトの階層を整理する

    検索エンジンによる URL の使用方法を理解する

    すいません><
    この記事は編集途中です!

  • FTPソフトの使い方を覚えよう!サイト公開のやり方

    FTPソフトとは?

    この記事はHTMLとCSSを学び終わり、サイトを作れるようになった!という方に読んでほしい記事です。
    いろんなサイトで、HTMLやCSSの使い方を覚えたかと思います。

    しかし、作れるようになったものの、実際にどうやって公開したらいいかわからない、という方を多くお見受けします。

    サイトを公開するには

    まず、公開する環境が整ったパソコンが必要です。
    そういう「公開環境の整ったマシン」をサーバーと言います。

    サーバーは自分の使っているパソコンでも作れるのですが、当然ながら電源を落としてしまったり、ネットが繋がらなくなってしまった状況ではそのサーバーで公開している内容は表示されなくなってしまいます。

    高負荷がかかるようなものは、ものすごい熱や負荷により火災の危険もあるそうです。
    電気代もかかります。

    自由に設定をいじれ、自由にできるメリットはありますが初心者がいきなり自宅でサーバーを設置するのはあまり現実的ではありません。
    そういった環境を貸し出している業者の「レンタルサーバー」を借りるのがいいでしょう。

    レンタルサーバーを借りる

    広告ありですが、無料で使いたいという方は下の記事を参考に試してみてください。
    https://logzitsu.tlog.work/xdomein/

    月額有料のサービスが多いです。無料のものは広告が出てしまったり、なんらかの機能制限があることが多いです。
    レンタル会社はいくつかありますので、そこから必要なものを選ぶといいです。

    高額のものは高性能です。
    静的なHTMLを公開するだけであれば、ものすごいアクセス数がくるとかでなければ安いところでも問題ないでしょう。

    もし、今後高性能なものに変える可能性がある、SEOをしっかりやっていきたいということであれば「ドメイン」も取得しておく必要があるでしょう。
    ドメインの設定も一癖あり、初心者が苦労するポイントでもあります。

    サーバー会社の紹介

    サーバーのレンタルは、各ページのヘルプをみながら進めてアカウントを取得してもらえばいいと思います。

    最初にくるメールにすごく重要な情報が書かれている。

    業者によって異なりますが、
    サーバーを仮取得した際にくるメールに非常に重要な情報がまとまっていますので無くさないようにしましょう
    下記は代表的な情報です。業者により、呼び名が異なりますので注意しましょう。

    Xdomainの場合

    本サイトで紹介しているXdomainのFTPを利用するための設定はこちらです。
    https://logzitsu.tlog.work/xdomain-ftp/

    具体的には

    公開サイトURL

    こちらが自分に割り当てられたアドレスです。ドメインを取得して設定した場合は別の場所になりますがとりあえずの練習はここでやるのがいいでしょう。

    管理アカウント情報

    レンタルサーバーには
    管理パネル
    サーバー管理パネル
    など複数の管理画面が存在することが多いです。ややこしいですね。
    さらにワードプレスをインストールするとワードプレスの管理画面があって初心者は大混乱ポイントでもあります。

    慣れればたいしてややこしいものではないです。

    FTP情報

    今回の記事のメインです。業者、FTPソフトで呼び名がばらばらなんですよねーこれが。
    – ホスト
    – FTPアカウント
    – パスワード
    – 公開フォルダ・初期フォルダ

    ホストとはレンタルしているサーバーの場所を表します。
    FTPアカウントとは 自分のアカウントの名前です。
    パスワードは FTP 接続するためのパスワードになります。
    公開フォルダというのは、ここに設置したものが公開されますよ、ということです。
    試しにそのフォルダ直下に「index.html」を置いてみるとそれが表示されるはずです。
    FTP と 安全な SFTPがあるので注意。

    FTPって何?

    サーバーに接続する方法は2種類あります。
    – WEBブラウザーでみる
    – FTPソフトで接続する。

    WEBブラウザーで接続するには、メールに記載されている「公開URL」にedgeやchrome・safariで接続しサイトを表示するだけです。

    「何もアップロードされていません」というサーバーが用意したファイルが表示されているのではないでしょうか。
    しかしこの接続方法ではサイトをみることはできますが、基本的にサイト内容を書き換えたり、削除したりすることはできません。

    次にFTPでの接続です。
    ブラウザではFTP接続はできないので、専用のソフトを使う必要があります。

    WIN SCP

    filezilla

    などがあります。自分はMACですので filezilla を使っています。このソフトはwindowsでも使えます。
    ダウンロードしてインストールしましょう。
    画面はMACですが基本的な使い方は違わないはずです。

    このソフトを使うことで、公開フォルダにファイルをアップロード、削除、移動をすることができます。

    filezilla の使い方

    上のリンクからファイルをダウンロードしてfilezillaをインストールしましょう。

    サーバーに接続する

    • ホスト
    • FTPアカウント
    • パスワード
      を画像のクイック接続の部分に入力し、接続してください。

    頻繁に使うものは画像の○印をしたところから登録できますのでそこから登録してください。

    左側が自分のパソコン。
    右側がサーバー上にあるファイルになります。

    ファイルをアップロードしてみる

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>FTPソフトの練習</title>
    </head>
    <body>
        <h1>FTPソフトの練習</h1>
        <p>htmlがファイルの表示が成功しました!</p>
    </body>
    </html>
    

    すでに運用しているサーバーでは安易に行わないように注意。
    新規取得サーバーでのテストを推奨します。

    上のタグは何の変哲も無いHTMLです。これをエディタで「index.html」というファイルで保存して「公開フォルダ」直下にアップロードしてください。

    その後、公開URLに接続しちゃんとこのファイルが表示されたらOKです。
    FTPソフトではファイルをアップロードできるほか、移動・削除も可能です。

    今までに作成したサイトデータをアップロード

    index.htmlが公開フォルダのすぐ下にくるように構造を作って、アップロードしてみてください。
    CSSや画像などもそのままの構造でアップロードしないと動きませんよ。

    正常に表示されたらOKです。

    うまく表示されない場合は何かがおかしいです。
    ローカルの絶対パスでファイルを参照していたとかね。
    調整してみてください。

    TECH::CAMP(エンジニアスクール)
  • 知らないとテーマが作れない!5分で学ぶwordpress テンプレートタグ一覧

    こちらの記事は随時更新したいと思います。

    テンプレートタグとは

    ワードプレスの独自タグをテンプレートタグと言います。

    通常のPHPも知っていた方がいいので
    https://logzitsu.tlog.work/wp-php/
    こちらを見てください。この記事の内容の意味がわかればギリギリなんとかなるかも。

    よく使うものを知っておきましょう。
    テンプレートタグの傾向
    get となっているものは取得。
    the となっているものは出力までしてくれます。(ehco 不要)

    構築時に必要となるもの

    テーマスタイルシートの場所(cssと画像のパス)

    <?php echo get_stylesheet_directory_uri(); ?>
    

    使用例

    <!-- 画像に使う場合こんな感じ -->
    <img class="img-fluid" src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png">
    
    <!-- スタイルシート読み込みはこんな感じ -->
    <link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet">
    
    <!-- JavaScript読み込みはこんな感じ -->
    <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/script.js"></script>
    

    サイト情報

    // サイトのタイトル
    <?php bloginfo( "name" ); ?>
    
    // サイトのサブタイトル
    <?php bloginfo( "description" ); ?>

    サイトURL

    <?php echo home_url(); ?>

    使用例

    <!-- トップへのリンク -->
    <a href="<?php echo home_url(); ?>">TOPページへ</a>
    

    WPで必要な css / js などを出力してくれるやつ

    header.phpの「headタグ内の一番下」に追加

    <?php wp_head(); ?>
    

    WPで必要な htmlを出力してくれるやつ

    footer.phpの「bodyタグ内の一番下」に追加

    <?php wp_footer(); ?>
    

    bodyにページ別のクラスをつける

    これがついてるかついてないかで扱いやすさに雲泥の差がでますので忘れずつけましょう。

    <body <?php body_class(); ?>>
    

    パーツ系

    パーツを読み込む時に使います。

    <?php get_header(); ?>
    <?php get_footer(); ?>
    <?php get_sidebar(); ?>
    <?php get_template_part( パーツの名前 ); ?>
    

    特定のテンプレートのみでCSS/JSの読み込み

    テンプレートのヘッダー読み込みの上あたりに足すと読み込んでくれます。
    以下はテーマフォルダ内の
    「css/custom.css」 「js/custom.js」を参照する場合です。
    最初の引数はidになるので、識別しやすいわかりやすい名前をつけるといいです。
    読み込む順番を自邸することもできますがここでは割愛。

    <?php wp_enqueue_style( 'page-css', get_stylesheet_directory_uri() . '/css/custom.css'); ?>
    <?php wp_enqueue_script( 'page-script', get_stylesheet_directory_uri() . '/js/custom.js' ); ?>
    

    ループ関連

    メインループ(省略形)

    <?php while (have_posts()): the_post(); ?>
    <?php endwhile; ?>
    
    
    
    <?php //別の書き方
    if ( have_posts() ) {
    	while ( have_posts() ) {
    		the_post(); 
    		//
    		// 投稿がここに表示される
    		//
    	} 
    }
    ?>

    サブループ(例)

    <?php
    $args = array( 
    'post_type' => 'post', // カスタムポスト名
    'posts_per_page' => 5 // 投稿件数の指定
    );
    $the_query = new WP_Query($args);
    if($the_query->have_posts()):
    ?>
    <?php while ($the_query->have_posts()): $the_query->the_post(); ?>
    
    <!-- 記事タイトル -->
    <?php the_title(); ?>
    
    <!-- 記事内容 -->
    <?php the_content(); ?>
    
    <!-- 記事リンクURL(タイトル付き) -->
    <a href="<?php the_permalink(); ?>">
    <?php the_title(); ?>
    </a>
    
    <!-- 日付 -->
    <?php the_time("Y.m.d"); ?>
    
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    <?php else: //投稿がない場合 ?>
    
    <?php endif; ?>
    

    ループ内で使うもの

    記事タイトル

    「ループ内で使うもの」の欄でいきなりですが、これはループ外でも動きます。

    <?php the_title(); ?>
    

    記事内容

    <?php the_content(); ?>
    

    サムネイル

    <!-- 普通に出す -->
    <?php the_post_thumbnail(); ?>
    
    <!-- サイズを指定する(独自設定可) -->
    <?php the_post_thumbnail("thumbnail"); ?>
    <?php the_post_thumbnail("medium"); ?>
    <?php the_post_thumbnail("large");?>
    <?php the_post_thumbnail("full"); ?>
    <?php the_post_thumbnail("index_thumbnail");  //設定していれば任意の名前 ?>
    
    <!-- 画像がない時になんか表示する -->
    <?php 
    if(has_post_thumbnail()){
    the_post_thumbnail();
    }else if{  ?>
    <!-- 代わりの画像 -->
    <img src="default.png" alt="画像設定されとらんが">
    <?php } ?>
    
    <!-- bootstrap用 -->
    <?php the_post_thumbnail( 'full', array('class' => 'img-fluid') ); ?>
    
    <!-- ファイルパスのみ出力 -->
    <?php echo get_the_post_thumbnail_url (); ?>
    
    
    

    記事リンクURL

    <?php the_permalink(); ?>
    

    カスタムフィールド(ACF)の出力

    カスタムフィールドを便利に使えるプラグインを使った場合の出力です。

    advancedcustomfields

    <?php the_field('カスタムフィールド名'); ?>
    
    
    //繰り返しフィールド(スライダ)
    <div class="slide">
    <?php if(have_rows('repeater_field_names')): ?>
    <?php while(have_rows('repeater_field_names')): the_row(); ?>
    <div class=""><a href="<?php the_sub_field('sub_field_names'); ?>">
    
    <?php
    $image = wp_get_attachment_image_src(get_sub_field('img_cf'), 'full');
    ?>
    <img src="<?php echo $image[0]; ?>" alt="" />
    </a></div>
    <?php  endwhile;else :endif; ?>
    

    次の記事、前の記事

    ループ外側に設置してください。

    <!-- 個別記事 -->
    <?php previous_post_link(); ?>
    <?php next_post_link(); ?>
    
    <!-- 一覧ページ -->
    <?php previous_posts_link(); ?>
    <?php next_posts_link(); ?>
    

    WP-PageNavi プラグインのページ送り

    WP-PageNavi

    <?php wp_pagenavi(); ?>
    

    カテゴリー

    <!-- カテゴリー -->
    <?php the_category(); ?>
    
    <!-- タグ -->
    <?php the_tags(); ?>
    

    日付

    上の方を使うとアーカイブ一覧で同日の日付は出力されない。出力したい場合は下を利用。

    <!-- 日付 -->
    <?php  the_date(); ?>
    
    <!-- 時間 -->
    <?php  the_time(); ?>
    

    パンクズリスト

    https://ja.wordpress.org/plugins/breadcrumb-navxt/
    <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
      <?php if(function_exists('bcn_display'))
      {
       bcn_display();
      }?>
    </div>

    functions.phpで使うもの

    //テーマでthumbnailをサポートする
    add_theme_support( 'post-thumbnails' );
    
    //新たに画像サイズを追加する
    add_image_size( 'original-size', 500, 300,true); 
    
    //ページ送りにclassを追加する(一覧)
    add_filter( 'previous_posts_link_attributes', 'add_prev_posts_link_class' );
    function add_prev_posts_link_class() {
      return 'class="prev"';
    }
    add_filter( 'next_posts_link_attributes', 'add_next_posts_link_class' );
    function add_next_posts_link_class() {
      return 'class="next"';
    }
    
    //ページ送りにclassを追加する(個別)
    add_filter( 'previous_post_link', 'add_prev_post_link_class' );
    function add_prev_post_link_class($output) {
      return str_replace('<a href=', '<a class="prev" href=', $output);
    }
    add_filter( 'next_post_link', 'add_next_post_link_class' );
    function add_next_post_link_class($output) {
      return str_replace('<a href=', '<a class="next" href=', $output);
    }

    参考:https://www.nxworld.net/wordpress/wp-add-class-previous-posts-link-and-next-posts-link.html

  • 最低限知らないとヤバイ??WPで必要なPHPを30分で習得する

    ワードプレスで使うPHPを習得しましょう

    WPではそこまでPHPのスキルが求められるわけではない
    基本だけ理解して、「WP専用のタグ」を使うことができればOKです。
    最初はコピペでも動けばOK。
    PHPはどんなに汚かろうがユーザーには知るすべはないので気楽にやりましょう。

    こちらのファイルを使用します
    中身は解答するとphpのファイルが2つです。

    PHPの基本

    • かんたんな言語で、便利な命令がいっぱい用意されています。
    • 調べて必要な命令を探せると世界が広がります。
    • 環境が整ったところでないと動きません。通常のPCでは動かないのです。
    • レンタルサーバーでは簡単に動きます。
    • 「HTML」を作るための言語です。つまりユーザーが見るのは単なるHTMLです。
    • 出力結果には普通にCSSを適用できます。
    • 拡張子は「.php」
    <?php ?>
    

    で 囲みましょう
    利用するときはHTMLのなかに

    <?php  echo "こんちわ"; ?>
    

    みたいな感じのものが紛れくる感じで使われることが多いです。

    やってみよう

    1. lesson01.phpをローカルに置きブラウザで開き、動作しないことを確認しよう。
    2. lesson01.php、lesson02.phpサーバーにアップロードして動くか確認してみよう。

    FTPソフトでサーバーに接続する方法はこちらにまとめていますので参考にしてください。
    https://logzitsu.tlog.work/ftp/

    ほかのプログラムと同じだよ!基本のおさらい

    <?php ?>
    

    の中でないと動かないので注意です。 「lesson02.php」 に記載。

    変数が使えます

    $x = 'こんにちは';
    //変数の前には「$」がつく
    

    コメントが使えます

    //一行だけのコメント
    /*
    複数行のコメント
    */
    

    テキスト出力

    echo 'こんにちは'.'そしてこんばんは';
    /*これはとてもよく見るので覚えておきましょう
    複数は.(ドット)で繋ぎます。たまに見るので覚えておきましょう。
    そして文の終わりはセミコロン*/
    

    if文

    //変数の値を変えて動きをチェックしてみてください
    $x = 20;
    if($x <19 ){ echo "19より小さい".$x."です";}else{echo "19より大きい".$x."です";}
    
    //同じ内容だが次のような書き方もある
    if ($x < 19) :
        echo "19より小さい".$x."です";
    else :
        echo "19より大きい".$x."です";
    endif;
    

    for文

    //繰り返し処理を行う記述です
    for($i = 0; $i < 5; $i++){
    echo $i;
    }
    

    While文

    //これも繰り返し処理です
    $i = 0;
    while($i < 5){ echo $i; $i++; } 
    

    こんなところでしょうか

    if文
    for文
    While文
    あたりは、なんかそんなのやってたなーくらいの認識でいいです。最初は。

    あとはよく使うテンプレートタグを覚えて、コピペで動かしていきましょう。

    https://logzitsu.tlog.work/template-tag/

    こちらですよ。

  • 感想 : リズと青い鳥

    リズと青い鳥を見てきました

    その感想です。
    ネタバレなしで書くことが不可能なので、視聴後の方に向けた文になりますのでよろしくお願いします。

    リズと青い鳥とは

    響け!ユーフォニアムのスピンオフ映画です。
    もとのアニメを見た人はより楽しめるでしょうし、見てなくても多分全然問題ないでしょう。
    自分はTVシリーズは視聴済みです。

    響け!ユーフォニアムの割とサブの登場人物であった「みぞれ」「のぞみ」を中心に話が展開します。
    絵柄も物語に合わせて繊細な印象に変えてあるのも面白いですね。

    自由曲に選ばれた「リズと青い鳥」。
    この曲は物語をもとに作られた曲で、「オーボエ」「フルート」は「リズ」「青い鳥」の掛け合いを表現している。
    仲はいいはずの2人だがどこかすれ違いのある二人はここが全く噛み合わず・・・?

    みたいな話です。

    派手な話ではないですねぇ

    個人的な総合点は5段階評価で「3.5点」といったところでしょうか。
    響けユーフォニアムだとわかりやすく盛り上がりポイントがあってわかりやすかったのですが、この作品は徹頭徹尾心理描写。
    割と地味な印象を受けます。派手な展開を期待する人は見に行かないほうがいいかもしれないですね。

    かと言って、絵が地味なわけではないです。
    作中劇(曲)の「リズと青い鳥」の物語と、現実の「みぞれとのぞみ」の表現が交差されながら進行していきますので、「リズと青い鳥」の場面ではジブリの魔女の宅急便みたいな世界が描写されてます。どこスクショしても絵本になるんじゃねえかってぐらいきれい。構図もかっこいい。
    吹奏楽部の描写部分でも、「THE 高校生活」なオブジェクトがめちゃくちゃ丁寧にかきこまれてます。
    とはいえ、あんなかっこいい生物室?ないと思うんですよね。フグとか飼うのむずかいいでしょ多分。
    細かいスカートのはね方とか、靴とかフェチ兄貴もきっと大満足の内容です。

    表現も心理描写ばっかで結構難しい!
    表情や、絵、セリフで心理を表現していると思うのですが、周りに描いている環境、オブジェクト、シチュエーションも登場人物の心理を表していると見たほうがいいでしょう。
    わかりやすいところでいうと
    雨が降ってきた → 二人にとって悪いことが起きている
    みたいなことです。

    正直1回見ただけじゃわからんと思う。めちゃくちゃ視聴者を信頼してる映画だと思います。(わからんて)

    わりと見てて心地よくなっちゃうので(曲とかもいい感じにね・・・)、一瞬寝落ちしてしまった。
    隣の人も結構寝てたし、上映室でたあと寝ちゃったって声が聞こえてきたんで、結構寝てた人多いと思います。
    眠いときに見に行っちゃだめですよ。

    リズ=みぞれ 青い鳥=のぞみ ?????

    最初は↑ あとで立場が入れ替わってる、というようなことを言っていますが、正直あんまりしっくりこないです。
    リズ、という人物が割としっかりしてて、自立しておりそんなになにか欠如している感じがしないんですよね。
    むしろ、青い鳥に出会ってから自分が寂しかったことに気づいてしまったという印象を受けます。

    あれ、ってことはみぞれも孤独でも大丈夫な人間だったが、のぞみに出会うことで自分のたりなさに気づいてしまった・・・ということなんでしょうか・・・・

    青い鳥はリズに会いに人間の姿になって訪れます。
    リズのことがめちゃくちゃ好きで、リズこそが自分のすべてと言っています。
    「人間の姿になる」というところがリズに合わせることで鳥として外の世界へ羽ばたく可能性を捨てる、という意味なんでしょうね。

    この辺は人によって解釈の差がありそう。

    鳥かごの開け方

    たぶん、お互いに相手を大事にして遠慮していたけれど、
    遠慮をやめても、それらは相反しているものではないということに気づいたのだと思います。

    好きな人と必ずしも一緒に歩まなくても、好きな人が「あなたのオーボエが好きだから続けてほしい」という言葉だけで十分なのだということ。

    「みぞれのオーボエが好き」という言葉だけで歩んで行けるのです。
    結果的には違う道を歩んでいくことになるわけですが。

    dis joint と joint

    全体的に視聴者に解釈を委ねてる感のある作品ですが、明らかに文字で表現してます。
    disjoint 調べてみると脱臼とかバラバラとか。
    joint ジョイント 継ぎ手 など。

    物語の最初と最後が対比になってます。

    最初の噛み合わない表現うまいっすよね。
    のぞみ 「リズと青い鳥ができてうれしい」
    みぞれ 「のぞみといっしょでうれしい」(たぶん)

    最後は「dis」打ち消してましたんで噛み合ったんでしょうね。
    歩く立場も入れ替わるかな、と思ったんですけどあるきはじめだけ入れかってまた最後は定位置に。

    ほかの人のいろんな意見を見たあとにもう一度みたいですね。

    なので色んな人、自分の解釈でレビューしてくれ・・・たのむ!
    また見に行くか、レンタルがスタートしたらじっくり研究して見てみるのもあ面白いかなと思いました。

  • WEB更新担当必見!WordPressの基礎的な概念について知ろう!

    ワードプレスをとりあえず触りたい人は次の記事を読んでからこちらに移るといいかもしれません。

    https://logzitsu.tlog.work/xdomein/

    https://logzitsu.tlog.work/wordpress-manual/

    事前理解

    基本編

    ・ワードプレスはサーバーにインストールして利用するものである。
    ・データベースと接続し利用する。
    ・データベースにはさまざまな情報が入っており、それを引き出して表示している。
    ・ワードプレスはphp データベースはMySQL を利用している。

    ・htmlを出力するプログラムなので、今まで習得してきた、htmlや、cssの知識はそのまま活かせます。
    ・繰り返し出力 が多いのでidではなくclassを使うように心がける。

    ワードプレスができること

    ワードプレスはCMSと呼ばれる、ページを簡単に作成できるシステムです。

    その他の代表的なCMSといえば、様々な会社で運営されている「ブログサービス」です。
    ワードプレスはそういった「ブログのような仕組み」を個人で作成し、カスタマイズして利用することができます。
    ブログサイトだけでなく、コーポレートサイトなどに使われることも多いです。
    一見ブログっぽくないサイトも実はワードプレスであることがよくあります。

    このシステムにより、個人でも大規模なサイトを作成できるようになったのです。

    ワードプレスってセキュリティに弱いの?

    決してセキュリティに弱いわけではありませんが、度々乗っ取り被害などが発生しているのを耳にします。
    ワードプレス、もしくはプラグインにセキュリティーホールがあるとそこをつかれます。
    最新のアップデートをすることで危険は最小限に抑えることができます。
    バージョンの自動アップデートを止めていたりすると非常に危ないです。

    ワードプレスは数多くのサイトで採用されているため、狙われやすいのです。
    知識のない人が「独自で作ったCMS」の方がセキュリティに穴があるものが多いと思います。
    しかし、他で使われていないという点で安全です。攻撃者に仕様が把握されてしまうとやりたい放題だと思いますのでご注意を。

    ワードプレスの独自の概念や単語を理解しよう。

    Thema

    ワードプレスはテーマを切り替えることにより見た目を切り替えることができます。
    ワードプレスにおける制作とは顧客のためのオリジナルテーマを作成することです。

    Themaフォルダ

    wp-content → Thema にあります。
    主に触るのはここです。
    wp-content 以外のフォルダを触ることは少ないので覚えておきましょう。

    プラグイン

    足りない機能は、「プラグイン」という形で補うことができます。
    functions.phpという、機能拡張のためのファイルがありますので、ここに命令を記載し、プラグインを使わないということもできます。
    投稿ページ(single) / 固定ページ(page)
    ワードプレスはページに2つの区分けがあります。
    ブログのようにページがどんどん増えていくものは投稿ページ。
    一度作ってしまえば内容があまり変わらないものを固定ページで作成します。
    固定ページは親子関係を作れるという特徴があります。

    カスタム投稿

    投稿ページ、固定ページのほかに投稿の仕組みを追加できます。
    functions.phpに命令を書くのですが、CPTUIというプラグインを使うと簡単にできます。

    親子関係

    親子という概念も知っておきましょう。

    図のような感じです。

    パーマリンク

    サイトのurl構造の設定のことです。
    設定の更新を忘れると正常に動かない不具合がおきることがあるので、思い出したら更新する癖をつけましょう。

    スラッグ

    ページなどを識別するための単語。投稿ページ・固定ページ・カテゴリなどなど様々なところで出てきます。URLに使われたり、とっても重要なものです。

    タイトル、コンテンツ

    記事内から入力できます。テンプレートタグに出力用のタグを記載しておくことで出力できます。

    アイキャッチ、サムネイル

    記事に設定する画像です。
    一覧ページなど、ほかのページで呼び出すことができます。

    テンプレートタグ

    ワードプレスの独自タグです。
    ワードプレスを使ってないphpでは動かないので注意。

    カスタムフィールド

    タイトル、コンテンツ以外に入力欄を使いたいことがあります。
    そういった場合に増やす入力欄です。
    デフォルトのものは使いにくいのでACFというプラグインを使うことが多いです。

    カテゴリー・タグ

    ページに分類の情報をつけることができます。検索で使えたり同一カテゴリーの一覧ページなどを作ることができます。カテゴリーとタグは非常に似ており違いもあまりないのですが、ブログをやったことをある人は感覚的にわかるのではないでしょうか。
    カテゴリーは階層を作れます。
    カスタム分類 (カスタムタクソノミー)
    カテゴリー・タグ以外の分類を追加をすることもできます。
    これもCPTUIプラグインを使うとかんたんです。
    タクソノミ:カテゴリー・タグなど
    ターム:カテゴリーにおける単語

    例:
    タクソノミー → 「フルーツ」・ターム → 「りんご・ばなな・みかん」

    ループ(メインループ、サブループ)

    繰り返し処理に用いる記述です。
    記事の出力部分などなど繰り返しっぽくないところにも使うので注意。

    サブループは条件をしっかり固めてあるので、どこに書いても同じ動きをします。
    同一ページに複数置くことも可能です。
    サイドバーの記事一覧などに使います。

    メインループは、同じ記述でもどのテンプレートに書いてあるかで違う動きをします。
    基本的にはページにひとつだけ書きます。
    こちらはページ送り機能を動かすことができます。

    Themaファイル内のファイルを見慣れよう

    テーマファイルのルール

    ・ファイル名が重要です

    など、名前が役割を表します。名前と役割を把握しておきましょう。
下の主要なテンプレート一覧を参照。
    ・ファイルの置き場所も決まってます

    テーマフォルダ直下におきます。

    style.css以外のcssや画像など、テンプレート内で用いるファイルは任意の場所でOK
    主要なテンプレートファイルと役割

    style.css

    スタイルシート。

    index.php

    基本のテンプレート。本来は投稿一覧ページとしての役割を持たせるものですが、TOPページのテンプレートでもあるので中身はいろいろです。

    パーツ用のテンプレート

    header.php
    footer.php
    sidebar.php
    文字通りヘッダーやフッターで使われるものです。

    page.php

    固定ページテンプレート。
    特定のページ専用は「page-スラッグ.php」とする。

    single.php

    固定ページテンプレート。
    カスタム投稿 専用は「single-スラッグ.php」とする。

    archive.php

    一覧ページ用テンプレート。
    カスタム投稿 専用は「archive-スラッグ.php」とする。
    category.php
    tag.php
    taxonomy.php
    タグ・ カテゴリー・タクソノミー用の一覧ファイルです。

    404.php

    ページが見つからない場合のファイル。忘れずに設置しましょう。

    テンプレートには読み込み順序があります。

    たとえば、ユーザーが投稿個別ページを表示しようとした場合に

    single-post.php がなければ
    single.php がなければ
    singler.php がなければ
    index.php

    が利用されます。
    次の表の通りです。
    どのテンプレートが使われているかはbodyに
    bodyclassが使われていればある程度推測できます。

    テンプレート階層

    TECH::CAMP(エンジニアスクール)
  • 感想 : クズと天使の二週目生活2

    クズと天使の二週目生活2とは

    アニメ業界界隈で活動もしている、芸人の天津向さんの書いたラノベです。

    あらすじとしては、天使のミスで死んでしまったアニラジ構成作家である主人公。
    わけあって2回目の人生を天使とともにやり直すことに。
    2巻では、天使の妹でもあるリノも登場。

    って感じでしょうか。

    向さんのファンゆえに買ったんですけど、すいません180円のセールです。
    ありがとうamazon kindle。

    天津向さんの優秀さ

    よく向さんのラジオ聞いてます。
    芸人さんなんで当たり前なのかもしれないですけど、喋りがうまいのこの人!

    アニメ系のラジオではいじられ役に徹しており、いつも罵倒されています。
    しかし、最近は罵倒が少なくて困ってるそうです。

    違う違う。

    言いたいのは、喋れるし、ラノベもかけてすごいってことです。
    コントの台本とかも書くでしょうから、割と一貫したスキルなんですかね?
    この本でも、コントっぽい展開と表現だなーと感じるところがいくつもありました。

    あれ、文章読みやすくなってない?

    一巻での印象は、めっちゃ声優ラジオにこびてるなーっていうのと文章に癖あるなー、ということでした。(2巻でも各章のタイトルが声優ラジオをパロってある。声優ラジオオタクに媚びてる)

    でも2巻、めちゃくちゃ読みやすかったし、物語の展開もすごく良かったです。
    大物先輩声優の嫌なプレッシャーのかけ方とか、ほんとに嫌な感じがよく表現できてますね。

    自己の体験から来てるのでしょうか・・・。

    断然2巻がいいです。
    今後にもめちゃくちゃ期待してますよ。

    アニラジ聞く人は楽しめるんじゃないかな?

    普通にラジオあんまり聞かない人も読んで面白いと思うんですけど、やっぱりよくアニメ系ラジオを聞く人がより楽しめる内容になってます。

    声優さんと組んでラジオやってらっしゃる方ですし、
    構成作家の伊福部さんとしゃべるラジオやってますからね。

    芸人の書いたラノベとしての評価になっちゃうんですけど

    結局の所、作者のファンってこともあるんで、
    芸人 天津向の書いたラノベとしての感想になっちゃいますね。
    普段ライトノベル読まないんでしょうがないんですけど、そういう界隈の人からの純粋な評価ってどんな感じなのかなってのも気になりますよね。

    細かいツッコミ

    2巻だからしょうがないってのもあるんですけど。

    主人公全然クズじゃねぇ

    真人間すぎる。もう別のクズを出したほうがいいんじゃねえかってレベルにタイトルなんだっけってなる。
    作者の根のまともさが反映されちゃってる気がします。

    エリィさん存在感うすすぎませんか・・・?

    おっさんに入ってゲームしてるだけじゃねーかw
    邪魔する妹のほうがキャラ立ってましたね。
    そりゃ表紙はあんな感じになる。

    3巻に期待

    続編書く気まんまんの終わりじゃないっすか。
    期待してます。

  • よく家で作る「30分 インドカレー」を紹介します。

    インドカレーはスパイスさえあれば簡単に作れる

    インドカレーってお店でしか食べれないイメージを持ってる方が多いと思うんですけど、元はインドの家庭料理なので、材料さえ整っていればすごく簡単に作れます。
    だいたい30分ぐらいでできちゃいます。

    材料

    多分2人分くらい?

    • ターメリック 小さじ 1
    • カイエンペッパーパウダー(チリペッパー) 小さじ 0.5
    • コリアンダーパウダー 大さじ 1
    • ガラムマサラ 小さじ 0.5
    • クミンシード 小さじ 1
    • 塩 小さじ 1
    • たまねぎ 大1個
    • トマトジュース 150ml
    • にんにく 1かけら
    • 生姜 1かけら
    • 油 適量
    • めんつゆ 適量

    + お好みの肉や野菜

    手順


    玉ねぎをみじん切りにしておきます。
    にんにくと生姜はすりおろしておいてください。


    鍋で油を温めます。強火。
    クミンシードを投入し、香りがしてくるまで炒めます。(油に香りを写します)

    (自分はオリーブオイル使ってます。たぶん普通のサラダ油でOK)

    ③ ①で処理しておいた玉ねぎなどを強火で炒めます。
    焦がさないように注意。

    玉ねぎが茶色くなり火が通ったら、トマトジュースを投入。

    画像のは200mlのやつなので少し余ります。 (あとで普通に飲む)
    ここで多めに入れると、ハヤシライスっぽい風味になるので、調整してみると良いと思います。

    最後に

    • ターメリック 小さじ 1
    • カイエンペッパーパウダー(チリペッパー) 小さじ 0.5
    • コリアンダーパウダー 大さじ 1
    • ガラムマサラ 小さじ 0.5
    • 塩 小さじ 1
    • めんつゆ 適量

    をいれます。混ぜて火を通す。
    焦げないように水を足してください。
    これで基本のカレーペーストは完成です。

    あとはお好みの肉や野菜をいれてください。適宜水分を足してください。

    最近のお気に入りは
    手羽元 + ミックスベジタブル

    水分少なめにして
    ひき肉 + ミックスベジタブル でキーマカレー

    最も楽なのは
    シーチキン + ミックスベジタブル

    ですね。具によって結構味が変わります。
    肉を一品入れるとすごく風味が増します。

    これはエリンギとシーチキンのカレー

    元となったレシピ

    我が家のインドカレー
    こちらのレシピを元にアレンジしたものです。
    トマトジュースにするとマジで時短です。
    トマトが足りないと味が物足りなくなるんですが、トマトジュースだとすごく安定します。
    隠し味でめんつゆも安定させるための施策。なくても成立します。