ウェブデザイナーの問題解決メモ

 wordpressで社内ドキュメント管理システムを構築することになり、見た目や機能が綺麗な「Document Library Pro」を導入することにしました。 「Document Library Lite」はwordpressのプラグイン検索で見つけられます。 これでも十分機能としてはいいのですが、フォルダ階層と、そこに属したファイルをテーブルで表示する仕組みを利用してくて、Proを導入しました。 しかし、完全英語版であり、細かな設定項目をいちいち頭の中で翻訳しながら（またはgoogle翻訳に頼りながら）設定するのは面倒なのと、「Dodument」一覧を表示したときに管理画面で横に広がった見にくいテーブルが許せなくて、日本語化する方法を探しました。 そして、公式サイトで他の言語を作る方法を発見。 https://barn2.com/kb/translating-document-library-pro/ それに従い、独自で日本語化することに…。 元から入っている言語ファイル「」を、 PoEdit というフリーソフトを使って地道に翻訳。 最後にpoからmoへ書き出し、フォルダに突っ込む。 全項目を頑張って日本語化したが、多言語対応していない箇所があってものすごく残念。 だが、一応それっぽくはなったので日本語化ファイルと日本語化の方法を記載します。 自力でやってみたい方向け【自力日本語化の流れ】 1.「ルートディレクトリ/wp-content/plugins/document-library-pro/languages/document-library-pro-nl_NL.po」のファイルを複製 2.公式サイトには「nl_NL」の部分を言語名に変えろとのことだったが、試したところ「ja」だけで表示された。つまり「document-library-pro-ja.po」とする。 3.PoEditで英語に対応する日本語を地道に入力 4.mo形式にして保存 5.元の言語が入っていたところと同じ場所へイン！ 6.wordpress管理画面にアクセス→日本語化！ 自力は面倒だからファイルよこせな方向け【ファイル入れるだけ日本語化の方法】 1.私が作った「 document-library-pro-ja.mo 」を「ルートディレクトリ/wp-content/plugins...

 MakeShopをいじり始めました。 使用したベーステンプレートは「BRothers」です。 商品を登録して、陳列位置を「新商品」へ。 そうすると「NEW ARRIVAL」にスライダー形式で商品が表示されるが、 ミニマムで運用しようと考えていたのでカテゴリーは作成せず。 ただ単に「NEW」のところに商品が流れるだけでは画面が寂しいし、カテゴリーを選択しなくてもトップページにある程度商品一覧を表示して欲しい… ただ、初期カテゴリーの「すべての商品」コード：all_itemsの内容をトップページに表示使用としたところ、何も表示してくれない！ 検索しても何も情報が出てこない！ 公式に問い合わせても「できない」と言われる。 んで、思いついたのが、「新商品」は表示されているのだから、「新商品」と同じ内容でスクロールしないやつをコピペしてモジュールを作り、表示すればいいのだ。 複数商品が表示される「セール」$module.sale_item　をコピペして、新しく「アイテムリスト」$module.item_list　のモジュールを追加。 中身からいらない情報をコメントアウトしたりして、色々と呼び出しを行っている「$special_item」と書かれている部分をすべて「$new_item」に書き換えた。 そして、トップページのHTMLの中に新しくsectionを追加して、 <{$module.item_list}> これでやっと問題なく商品一覧が表示されるようになりました。 新商品だけでなく他の陳列位置に設定したものも表示するには、それぞれの内容を同じitem_listのモジュール内に書けばなんとか行けそうな気がします。

 MODXで制作したサイトに、サイト内検索を設置しようと思い、googleカスタム検索を設置してみた。 https://cse.google.co.jp/cse/all 表示は問題なかったのだが、入力フォームに文字を入力して「検索」ボタンを押したあと、その検索結果で「一致する結果はありません」と表示されてしまう。 試しに個人サイトでも同じMODX環境なので設置してみると、こちらは問題なく表示される…。 noindexやnofollowを設定しているわけではないのでおかしい… 現在原因究明中

ol li　でリストを表示したら、本来数字で1.2.3とリストとなるはずが、全て「・」になる。 そこで、  cssで *{ font-size:1.1em; } を *{ font-size:1em; } にするとなぜか「1.2.3」に直る…意味不明　解析中 ★解決 実は見えていたのは1.の「.」の部分だった ul,olに対して padding-left:2rem;としていたが、padding-left:5rem;にしたら数字が表示された…なんかもう嫌！

 modxでテスト環境を作成後、同じデータベースを使用したまま同じサーバーの別ドメインに対してmodxのエクスポート・インポートを行いました。 ソース類はまるっと移動。 そして管理画面へログインしようとすると、なぜかログインできない。 パスワードを再発行しようとしても、アカウントが無いと言われる…おかしい。 そこで、phpmyadminへ接続し、DBの以下を変更 「modx_manager_users」テーブルの「password」を「 e10adc3949ba59abbe56e057f20f883e」へ変更。 じつはこれ「123456」になる。 再度管理画面へアクセスし、パスワードに123456を入力→ログイン出来た！！！ ※ログイン後はすぐパスワードを変更してくださいね

 タイトルの通り、メインのドメインを別のサーバーで運用していて、サブドメインだけをxserverで運用し、そこへmodxをインストールして動かした際に、うまくssl化ができない現象が起きた。 具体的には ・リソースを更新すると「site_url」に記載しているhttpsのURLが何故かhttpになっていて、外部ソースのcssやjsが読み込まれず画面が崩れる ・xserverの管理画面からhttpをhttpsへリダイレクトする設定をしてみるとそもそもページが表示されなくなる 以下の設定を追加することで、一旦はhttpのアドレスにアクセスできないようにしました。 ■modxインストールフォルダの.htaccessファイルに以下を追記 <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTPS} !=on [NC] RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> 一番下に追記してアップすればOK サイトにアクセス後、URLからhttps→httpに変更してリロードしてもhttpsから離れなければ一旦OK

 modxのコンテンツに背景透過png画像を登録後、それを表示すると何故か背景が黒くなる、という現象がおきました。 photoshopで開いてみたり、pngで保存しなおしてみたり、プレビューで開いてみたりしても背景は透過なのに… と検索していたところ、phpで画像処理をする関数を通ると、png透過背景が黒くなるという記事を見つけました。 どこで気がついたのが、modxの「ツール」「グローバル設定」「ファイル管理の設定」で「画像の横幅の最大値」に数値を入れていたことを思い出しました。 アップロードする画像が大きかったら、自動的に1000pxに縮小する処理です。 つまりここでphpの画像処理を通ることにより、png背景が黒になっていたということ！ 数値を消してアップロードしなおしたところ、問題なく透過で表示されました！

※jqueryが必要  ■js //画面のロード、タブレットの縦横切り替えで動く $(window).on("load orientationchange resize", function() {   scroll_effect();   scroll_effect2();   //画面のスクロール、タッチによるスクロールで動く   $(window).on("scroll touchmove", function(){     scroll_effect();     scroll_effect2();   });   //フェードイン   function scroll_effect(){     $('.fadein').each(function(){       var elemPos = $(this).offset().top;       var scroll = $(window).scrollTop();       var windowHeight = $(window).height();       if (scroll > elemPos - windowHeight){         $(this).addClass('scrollin');       }     });   }   //スライドイン   function scroll_effect2(){     $('.slidein').each(function(){       var elemPos = $(this).offset().top;       var scroll = $(window).scrollTop();       var windowHeight = $(...

modxでページタイトルを表示したい場所に[*pagetitle*]と表示しますが、そのページタイトルをキリの良い所で改行して表示したい、という時は、そのまま改行したい場所に＜br＞を入力します。 しかし、それだと「改行しないでタイトルを表示したい場所」でも、改行されて表示されます（当たり前だけど…） そこで、 ①strip_tags関数を使用する $str = [*pagetitle*]; echo strip_tags( $str, '<br>'); これをスニペットに登録し、表示したい場所に[[スニペット名]]としてみたのだが、どうしてもBRが消えてくれない。 ②正規表現で削除する ③modxのタグを使用する【これが正解！】 pagetitleを出力するリソースを以下にするとbrタグを削除してくれる [*pagetitle:strip_tags:hanzen*]

 Macbookproの13インチ、2016モデルを使用していますが、先日初めて覗き見防止シートを購入してみた。 上部がマグネット式になっていて、両面使用可能（グレア・アンチグレア）。 張り付きもいいし、画面を閉じるとキーボードのシートとちょっとぶつかって蓋は浮き気味になるが、ちゃんとスリープモードにも入ってくれる。 …と思っていたのだが、つけたまま画面を閉じてその翌日、画面の上部に妙な黒い影のような横線がどーんと！ VRAMリセットやSMCリセット、セーフモードでの立ち上げでも解消されず、 画面のスクリーンショットを撮っても黒い線は映らず。 Appleにチャットで問い合わせしたところ、残るはOSの再インストール…。 そこでいろんな記事を見ていたところ、この機種は修理プログラムの対象になっていたので、まずはジーニアスバーに行くことにした。 https://support.apple.com/ja-jp/13-inch-macbook-pro-display-backlight-service https://support.apple.com/ja-jp/keyboard-service-program-for-mac-notebooks 念の為シートを貼らずに土日放っておいたら、やはり画面が戻っている… 覗き見防止、どうしたらええの…

 modxのtemplateを何種類か作り、フロント画面でボタンを押すことでユーザーがテンプレートデザインを切り替える方法を探していたが結局見つからず、自作したのでメモします。 ■template templateに白ベース、黒ベースのhtmlを作成済み [2]black [3]white ■リソース画面にボタンを配置します。 [[changeTPL]] <!-- チャンクの呼び出し --> <form name="form" action="[~[*id*]~]" method="post"> <input type="submit" class="btn" name="subject" id="subject" value="白" /> <input type="submit" class="btn" name="subject" id="subject" value="黒" /> <input id="thisTPL" name="thisTPL" type="hidden" value="[*template*]" /> </form> ※フォームの内容をPOSTし、結果を同じ画面に返すことで反映させます。 ※hiddenで現在使用中のテンプレート番号も一緒に渡します。 ■チャンク // inputのidがsubjectのvalue値を取得 $post = $_POST['subject'];  //inputのidがthisTPLのvalue値を取得（テンプレート番号） $thisTPL = $_POST['thisTPL'];  //表示中のリソース番号を取得 $id = $modx->documentObject['id'];  //現在のテンプレートを取得し、切り替える if($thisTPL...

 テンプレート変数を作って、mm_rulesでリソース画面に入力エリアを複数作ったのだが、tinymceが使えるのは「本文」のコンテンツのみ。 これではせっかく管理画面を誰でも入力可能な感じにカスタマイズしたのに、「ここはテキストの装飾できないの？」ということになる。 そこで、 「エレメント」→「エレメント管理」→「プラグイン」のtinymceを選択 「設定」タブの「Custom Parameters」のエリアに以下を追記。 mode : "specific_textareas", selector : "textarea" こうすると、管理画面上で「textarea」になっているテンプレート変数の入力画面が全てtinumceで操作可能になる！

 modxをtinymceでエディタ編集している際、改行をすると勝手にpタグが入ったり、プレビューするとbr改行タグが消えたりする。 また、チャンクで作成したテンプレートを挿入した際には、例えばh2タグの中身を編集していて改行キーを押したときにh2タグ内で改行されて、カーソルをタグ外でクリックしても出てくれない事象が発生する。 wordpressやtinymce本体の使い方はサイトに多くのっているが、modxでの変更方法がなかなか載っていなかったのでメモ。 「エレメント」→「エレメント管理」 tinymceのプラグインを選択 「設定」タブの「プラグインの設定」のエリアに以下を記載 forced_root_block : 'div', force_br_newlines : true, force_p_newlines : false （一番下にカンマは付けません） これが何をやっている設定かというと、 ・新しく文章を入力する際のブロックはdivで囲みます。 →これがないと、改行したときにh2タグ外へ出てくれない ・brを消さない ・pタグを追加させない root_blockに''で空を入れるだけだと、 チャンクテンプレートで<br>タグを最後に入れても何故かbrタグが消える。 <br>タグを<br><br>にしておくと何故か消えないが、改行した際に2こめの<br>タグが文末にどんどん増えていく。 という不思議な動きをする。 なので。div自体には特殊なcssを設定せず、とにかく改行ごとにdivで囲ってしまおうという強硬手段。 どうしてもdivタグで囲いたくない場合は、root_blockを''にして、テンプレート側に<br><br>を設定。 そして追加されていく<br>を手動で消していく感じになる。 もっといい解決方法があったら教えて！！！ ■追記■ やはり、root_blockは''にしないとだめだ。 そしてチャンクテンプレートがh2やdivで囲っているデザインの場合は最後に<br><br>を入れる。 先ほどのやり方だと改行キーを押したら今いるdivが複製されるようになっている！？ ...

 とにかく最終的に見つけたのは、modx管理画面の「エレメント」→「エレメント管理」→「プラグイン」→「TinyMCE」→「設定」タブの 「Custom Parameters」のところに以下を入力して保存。 valid_elements : "*[*]" 書いてあるエレメント（タグ）全部有効にしろよ！という強制的なやつです

modxを久しぶりにインストール。 その際、bootstrapの学習用テンプレートもインストールしてみた。 （いつもはゴミになるからインストールしないが、どんな内容か確認してみたかった） その後、管理画面のログインOK、管理画面自体は問題なく表示される。 サイトの表示をしてみたところ、以下の様なエラーが表示される…。   Parse error : syntax error, unexpected '\' (T_NS_SEPARATOR), expecting ')' in  /***/***/***/public_html/manager/includes/document.parser.class.inc.php(2401) : eval()'d code  on line  1 エラーの出てる箇所を見に行くと、この一行 eval('?>' . $content); エラー内容とこの「eval」というやつを合わせていろんなパターンで検索してみる。 ■原因候補 ・php7だから使えない古いコードが混在している？ 　実際、eval自体はあまり使わない方がいいとか、php7だと云々みたいな記事が見つかる ⇨解決例に沿ってtry〜catchで囲ってみるも解決せず ■解決！ そもそものコード自体はコンテンツ（$content）を表示しているが、そこに”\”バックスラッシュが入ってますよー！というエラー内容でした。 そこで、表示している「home」の中身を全部消して公開⇨ダメ このhomeが使っているテンプレート「bootstrap」の中身は…と見てみると、 なぜかhtml形式で書くはずのテンプレートの中身に\nやら\やらが沢山記載されている。 マジなんなの 内容から\nと\をdreamweaverで検索置き換えで全消しして、bootstrapのテンプレートに戻して保存。 あら不思議。ホームページが問題なく表示されました！ なぜこの様な感じになったのかはわかりませんが、同じ様な現象になった方のために残します。 MODX：バージョン1.0.25J サーバー：xserver DB：mariaDB php：7.4.28

 新しくiMacを購入して設定中、モバイルルーターに接続し、ネットを使用していたのだが、OSアップデートをした後に急にネットに繋がらなくなり、色々調べた結果解決しました。 OS：macOS Monterey バージョン：12.4 ■試したこと ・再起動 ・Option+wifiマーククリックでネットワーク診断 ・DNSをgoogle（8.8.8.8）に設定 ・iPhoneからテザリング ・Wi-Fi接続情報削除 ■結果 直前にインストールしたESETが悪さしていました。 この状態になるとどうにもならないので、 環境→ネットワーク→ESET Firewall　自体を削除し、PC再起動。 そしてESETを上書きインストールして、無事解決。 ネットワーク診断中に 「Wi-Fi」と「ESET」の順番が一瞬入れ替わったりしていて、怪しいのはESETとわかりました。 そしてESETの設定画面を開こうにもネットに繋がっていなかったのでなにも出来ずでしたが、PC初期化せずに済みました…！ まだほぼ初期状態だったから良いとしても、なんだかんだタッチパッドの設定など細かくいじっていたので最初からやり直すのは面倒だな、と思ってました。 とにかく、良かったよかった！

 お知らせ一覧からお知らせ詳細へリンクをクリックしたら何故かお知らせ一覧が表示される…！ パーマリンク（URL）を年月日＋IDにして、日本語の投稿タイトルを入れてもURLを整形しようとして、 「/%category%/%year%%monthnum%%day%%post_id%/」 と設定してみたところ、リンク先が投稿一覧ページに行ってしまう…！ おかしいと思って調べてみると、どうやら数字のみのURLを設定している場合、何らかの内部処理とかで、自動的に数字を-2しているという記事を見つけた。 なるほどね！ 文字列が入っていれば大丈夫とのことで、 「/%category%/%year%-%monthnum%-%day%-%post_id%/」 というようにハイフンを入れてみたところ、無事リンクが通りました！ 相変わらず奥が深いwordpress…