WordPress、concrete5、Mautic、JavaScript、PHP、Docker、プログラミングなどの覚え書きをしていきます。コンテンツへスキップonocomWordPress、concrete5、Mautic、JavaScript、PHP、Docker、プログラミングなどの覚え書きをしていきます。【Office】Excelでプロジェクト管理(工程・実績管理・スケジュール管理)するためのガントチャート・テンプレートを作りました。DreamweaverでSass・Compassを利用する方法の備忘録です。Gulp・Grunt等でやる方法がありますが、コマンドプロンプト(通称:黒い画面)はちょっと敷居が高いと思われる方も多いと思うので、Adobeユーザーなら大抵入っているDreamweaverの設定方法をお伝えします。Dreamweaverを利用してWordPressでサイト構築(テーマ開発)することを想定していますが、他のサイト制作でも同様の設定で多分利用できます。試行錯誤の結果とりあえず動いたという設定方法をご紹介しておりますので、正統なやり方では無いかもしれません。その点ご容赦ください。文字コードの関係でエラーになる場合があったため、config.rb、config_prod.rbに以下の一文を追加しました。“UTF-8”今回想定するDreamweaverのサイト設定Dreamweaverのサイト設定が以下のように行われている前提で説明を行います。wp-includes等のファイルがある。テーマディレクトリを「THEME_NAME」としてテーマを作り込もうとしていることを想定しています(この部分を適宜ご自身の環境に合わせて以降読み替えてください)。空のディレクトリを作成しよう以下のように、/wp-content/themes/THEME_NAME/ディレクトリに空のディレクトリを作成します。ディレクトリこのディレクトリにSassファイルを配置していきます。ディレクトリとりあえず作ります。config.rbとconfig_prod.rbをダウンロードしてきてテーマディレクトリ直下に配置します。Gist:Dreamweaverでcompassを動作させようとした時のconfig.rbhttps://gist.github.com/onocom/29259b091fdea04e159506bcba6d89ffconfig.rbこれはMinifyしない為のコンフィグファイル。このコンフィグが実行されると、最後にMinify用のコンフィグが実行される。THEME_NAMEディレクトリは適宜書き換えてください。--force`endconfig_prod.rbMinify(圧縮)用のコンフィグ。output_styleを変更することで様々な出力を選べる。設定は.mapファイルを生成するかどうかの指定。設定は、コメントを出力するかしないかの指定になります。ディレクトリは適宜書き換えてください。上記ファイルを配置するとこんな感じ。サイトの管理(M)から該当のサイトをダブルクリックして以下の画面を立ち上げます。以下のように設定しておきました。ファイルの保存時に自動コンパイルを有効にするをチェック入れとくと勝手にコンパイルしてくれるようです。Styleやソースマップを生成、ソースコメントを作成などはconfigで設定してあるので無視して良さそう。Compassの設定をしようCompassの設定項目で、Compassを使用するにチェックし、Rubyベースの構成ファイルを指定で先ほど配置したconfig.rbファイルを指定します。これが出来たら保存をします。コンパイルされるか確かめてみようSass・Compassの設定がちゃんと動作するか確かめて見ましょう。scssディレクトリ内に、適当なscssファイル(ここではmain.scss)を作成し、保存します。/~~~/main.cssとうメッセージが「出力」ウィンドウに出力され、以下のファイルが自動的に作成されました。THEME_NAME/css/main.cssTHEME_NAME/css/min/main.cssやったー!出来た!まとめ設定さえしてしまえば、DreamweaverでもSassが使えるので大変便利ですね。黒いウインドウ怖いといって敬遠していたかた、ぜひご活用ください。設定方法でもっと良いやり方があれば教えてください。Gutenbergで作るランディングページ!Gutenbergの使い方やテーマ対応方法!WordPressの次期エディタ「Gutenberg」について学ぼうあけましておめでとうございます。今年もよろしくお願いします!新年開けてすぐの今日、WordBench京都&大阪でWordPressの次期エディタである「Gutenberg(グーテンベルク)」のお話をさせていただきました。このポストは、WordBench京都&大阪の振り返りポストです。WordPressとWebマーケティングことはじめhttps://wb-kyoto.connpass.com/event/70848/大阪のたこ焼き美味しかったです!セッションスライド当日利用したスライドです。デモサイトは停止しました。Gutenbergを使ってみたい方は以下を読み進めてくださいな。Gutenbergってなんだ?Gutenberg(グーテンベルク)とはWordPressのバージョン5.0に搭載予定の次期エディタのことです。活版印刷技術の発明家「ヨハネス・グーテンベルク」にちなんで命名されたようです。現在のWordPressのエディタはこのブログのように単純な投稿には適していますが、ちょっと複雑なことをやろうとすると、極端に難しくなりますよね。Gutenbergでは、ブロックと言う単位でコンテンツを構成します。ブロックには、見出しや文章、画像、動画と言った基本ブロック以外にも、ショートコードやウィジェットなども組み合わせてコンテンツを組み立てる事ができます。Gutenbergを試してみたい!Gutenbergは現在プラグイン形式で開発中です。Gutenbergを試してみたい方は、以下のURLからダウンロードするか、WordPressのプラグインインストール画面から「Gutenberg」と入力してインストールし、有効化してください。鋭意開発中なので本番環境などで使わない方がいいです。PluginGutenbergGutenbergを無効化したい!Gutenbergの導入は怖い!Gutenbergを利用したくない!無効化したい!という方のために、今まで通りのエディタを使う為のプラグインも開発されています。カスタムフィールドをゴリゴリ使っているサイトはちょっと心配ですもんね。現在鋭意開発中なので本番環境などで使わない方がいいです。EditorGutenbergの使い方を知りたいGutenbergを有効化すると、管理画面のサイドバーに「Gutenberg」メニューが現れます。そちらにカーソルを合わせて「デモ」を選択すると、Gutenbergのデモ記事が生成されます。ブロックの追加ボタン、リドゥ・アンドゥボタンが配置されています。上部右上には、プレビューボタン、公開ボタン、右サイドバーの表示切り替え、エディタ切り替え(グーテンベルクとクラシックエディタを切り替えるボタン)が配置されています。右サイドバーには、DocumentタブとBlockタブがあります。Documentタブでは、記事のカテゴリやアイキャッチ画像、抜粋が設定できます。ID・クラスの設定等ができます。コンテンツエリア見慣れないですが、画像やテキストは別々のブロックとしてあつかわれています。左上、もしくはブロックとブロックの間にカーソルを合わせると出て来るブロック追加ボタン(プラスボタン)を押してブロックを追加していきます。どんなブロックが存在するの?デフォルトでは、以下のブロックが定義されています。多く見えますが、実際に使おうと思うとまだまだ開発段階ということが分かるかと。カラムレイアウト(3列や4列)には現在非対応で、5.0のタイミングには対応されないかもしれません。早く対応して欲しい!数多くの埋め込みにも対応しています。ブロックのデータはどうやって保存されるの?各ブロックの情報は、HTMLコメント形式でwp_postsテーブルに保存されます。表示の際には、HTMLコメントが解釈されて動画や画像が埋め込まれたりします。これから改善されていくところやメモなどパーマリンクの設定箇所がない投稿一覧クイック編集から編集するしかなさそう。この件について、Githubで議論されている。https://github.com/WordPress/gutenberg/pull/3418カラムを柔軟に作れない今のところ柔軟なカラム設定出来ない。編集画面が真っ白になることがあるローカル環境にGutenbergをインストールして記事を新規作成したところ、なぜか画面が真っ白になった。画面を開いて、「変更を保存」ボタンを押すことで正常に動作するようになった。テーマをGutenbergに対応させるには以下の作業は必須ではありませんが、functions.phpやstyle.cssに記述しておくとGutenbergの機能を活用できると思います。編集add_theme_supportに’gutenberg’を指定します。wide-imagesは、左寄せ・右寄せ・中央寄せの他に「ワイド幅」や「全幅」を追加するためのオプションです。colorsは、Gutenbergのテキストブロック等で指定する色を予め設定しておくオプションです。サイトのキーカラー等を設定しておくとごちゃごちゃせずに良さそうですね。編集add_theme_supportでwide-imagesオプションを設定し、ブロックに対してワイド幅や全幅を指定すると、.alignwideや.alignfullというクラスが付加されます。そのクラスに対してテーマとしての振る舞いを定義します。Challenge」と題して、Gutenbergでランディングページを作ってもらうという簡易のワークショップを行いました。(SendToディレクトリの場所一覧)意外と使ってない!?右クリックメニューの[送る]とは。Windowsユーザーの皆様、デスクトップ画面やエクスプローラー画面でファイルやフォルダを右クリックした時に表示される[送る(N)]というメニューをご存知ですか?こんなやつ↓このメニューを駆使することで、ZIPファイルをサクッと作ったり、画像をリサイズしたり、HTMLファイルを直接テキストエディタで編集したり出来るので私は大変重宝しています。意外と利用されていない方も多そうなのと、毎回、新しいパソコンの初期設定する際に[送る]メニューの設定場所(SendToフォルダの場所)を探してしまうので、とりあえず記事にしてみました。お役に立てば幸いです。右クリックメニューの[送る]には以下のような設定をして業務の効率化を図っています。偉そうに書いてますが一般的な使い方しか出来ていないので、他にもこうやって活用できるんだぜ!などあればぜひコメントで教えて下さい!写真や画像の保存サイズをサクッと小さくする画像の大きさやサイズを縮小するソフト「縮小専用」(通称:縮専)を愛用しています。一つの写真を小さくしたいがために毎回、縮専を立ち上げるのも面倒です。その面倒を回避するために、右クリックメニュー[送る]に縮小専用を登録して、写真・画像をサクッとリサイズしています。右クリック→送る→ShukuSenでサクッとリサイズ出来る。普段はブラウザで表示させたいけど、たまにテキストエディタで開きたいファイルを開くindex.html等のHTMLファイルは基本的にブラウザで表示させたいのですが、ソースコード編集するときなどはテキストエディタで開きたい場合があります。いった時に、テキストエディタを立ち上げてからドラッグ&ドロップで編集対象のファイルを開くのは面倒です。右クリックメニュー[送る]にテキストエディタを登録することでサクッと編集画面を立ち上げられます。HTMLをサクラエディタでさくっと開くすぐ出来る[送る]メニューの設定方法どうやって[送る(N)]メニューに登録するのかをご紹介します。SendToというディレクトリに表示させたいアプリケーションのショートカットを配置してあげるだけです。具体的な設定方法は以下のとおりです。[送る]メニューの設定場所(SendToディレクトリのパス)を調べるキーボードで、Windowsキー+Rを押して[ファイル名を指定して実行]を立ち上げます。名前の部分に以下を入力します。shell:sendto1shell:sendtoOKをクリックするとSendToフォルダが表示されます。上記でフォルダが表示されない場合は、記事末のSendToディレクトリのパス一覧表を御覧ください。ショートカットを配置するSendToディレクトリに、必要なアプリケーションのショートカットを配置します。これで、[送る(N)]メニューに該当のアプリケーションが表示されるようになりました。SendToディレクトリのパス一覧表ユーザー名には自分のユーザ名を当てはめてください。古いOSのSendToディレクトリのパスは様々なウェブサイトを参照して以下の表を作成しました。誤りがあればコメントでご報告ください。95のSendToの場所C:\Windows\SendTo\まとめいかがでしたでしょうか?送るメニュー役に立ちそうですか?作業効率化に貢献できると嬉しいです。SendToディレクトリが表示されるようになったのはいつからだろうなぁ。3)を愛用しているのですが、2014年頃から新しいバージョンがリリースされず。このまま使い続けるのもいいのですが、他のIDE(統合開発環境)を模索しても良い頃かと思い、AptanaのベースともなっているEclipseをインストールしてみました。2017年の6月末にEclipseのバージョン4.7(コードネームをOXYGEN(酸素))がリリースされており変わらず活発にアップデートがされているようです。10(64bit)でEclipseをインストールする手順をまとめてみました。日本語化についても簡単に触れていますが不足部分はググってくださいませ。ダウンロード公式サイトのダウンロードページへアクセスhttps://www.eclipse.org/downloads/ダウンロードボタンをクリック。一度ダウンロードボタンをクリックダウンロードが開始される。お金に余裕のある方は、ダウンロード中の画面に表示される寄付を検討してみてくださいませ。インストールダウンロードしてきた、「eclipse-inst-win64.exe」をダブルクリックしてインストール操作を行います。