2020年6月5日（金）作業過程と気づきメモ

役に立たないかもしれないけど役に立つかもしれないメモ

 以下の文章の編集方法

workflowyで随時入力　→　翌日Evernoteに転記（firefoxでworkflowyのexportでコピペ（なぜかchromeのコピペでは階層が反映されない））　→　はてなブログにコピペ（編集）

  • （ブログ）作業過程と気づきメモ
    • 2020年6月4日（木）作業過程と気づきメモ
      • 予約投稿　2020/6/6 6:00:00
  • 今朝のおは戦のBufferで予約投稿の結果
    • ツイッターカードは表示されなかった。
    • Bufferでは短縮URLになるが、１回の短縮URLならOKでも、2回短縮されていると、さすがにツイッターカードは表示されないようだ。
    • ということで、明日の分は、ツイッター自体での予約投稿をやってみる。
  • Webアプリの作成（twte_001）
    • スマホ版のメニューを日本語にする
      • 縦書き問題はあるが、やっぱりPC版と合わせたほうがいいということで、元に戻す。
        • →　あれれ？ちゃんと横になっている！ひょっとするとタグが不完全だったのかもしれない。
    • ヘッダ画像の表示（スマホ版）
      • 昨日設定したことをメモしていなかった。
        • bootstrapのデフォルトでは、padding指定があったので、画像の脇にスペースがある状態
        • cssを上書きというよりは、追加した。
          • html内のヘッダ部分
            • <link rel="stylesheet" href="css/bootstrap.min.css">
            • <link rel="stylesheet" href="css/bootstrap_utalab.css">
          • htmlのヘッダ部分指定
            • <header class="py-4_utalab">
            • <div class="container_utalab text-center">
      • レスポンシブデザインでは、ブラウザの幅によって画像が同じ縦横比率で縮小・拡大できる。本でいろいろ探したらimgタグのクラス指定があった。
        • <img class='img-fluid' src='
        • サイズ指定で600x200にしているので、それ以上の拡大は、ない。縮小は同じ縦横比率となる。
    • ブランド表示（スマホ版）
      • 通常ならサイトのブランドを表示するが、今回は、ツイッターの表示名を想定。
      • 長い名称を想定して「あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ」を表示してみた。
      • メニュー部分が圧迫されるのか、日本語化したメニューは、縦書きになった。
      • 参考の本とは違うが、メニューとヘッダ画像の間にブランドを表示する。
      • ブランド名でなく、ツイッターカードに表示する画像を表示してみた。もうちょっと文字が大きいと使える気がするので、画像を調整。
        • Windows付属のペイントでは、なかなかやりづらい。以下のようにやってみる。
          • 500x500の色だけの画像ファイルを用意
          • エクセルで画像を挿入しつつ、調整。文字は幅がぴったりぐらいのフォントで調整。
          • スクリーンショットで画像を切り抜き、ペイントにコピー
          • 枠によけいな線があるので、同色で消す
          • 保存
        • なんとかPCでは読める。ツイッターカードと同じであれば、読めなくても、なんとなくわかるかも。
    • 広告の表示（スマホ版）
      • PC版のcssをスマホ版にも採用
      • 広告は常に表示したいが、「ツイッターテンプレート」を選択したときしか、表示されなかった。
        • 原因は、「ツイッターテンプレート」のinit.phpで生成していたので、ほかでは表示されなかった。
        • ad_infoという関数を使って、常に表示するようにした。
        • PC版も同様に変更
    • PC版のタイトル表示
      • 広告の背景色がタイトル欄と同じで、つながって見える。
      • ヘッダ部分にborderをセット
    • 広告
      • 広告の登録・訂正・削除時に、セッションに広告をセット
        • header( "Location: index.php?ad=&&e={$g_cat}.list&res_str={$res_str}" ) ;
    • PC版とスマホ版に変更する場合、おなじ処理画面になるように変更
    • 広告処理（スマホ版）
      • 画面作成
        • 登録などした場合は、header関数でジャンプしている。その場合はad変数の設定はないが、表示形式の変更はしないようにすること！
        • class="form-control"を使ってみた。入力項目が整った感じ。
    • PC版とスマホ版に変更
      • カテゴリのメインに移動に、修正
        • アクションも同じにすると、例えば訂正画面の場合は、POSTした結果なので、PC版とスマホ版に切り替えると、エラーとなる。
    • パンくずリストが欲しい
      • 「訂正」って表示されても、何の「訂正」か、わからない
      • 関数を作って、表示するしないを決める。
        • 今回は、ログイン時の「ツイッターテンプレート」「広告」「マイページ」
        • PC版の場合は、メニューの色が変わるので、なくてよい。
    • マイページ処理（スマホ版）
      • 修正した。
    • だいたいできたのでサーバにアップ
      • ローカルDBのSQLのスクリプトを出力
      • ヘテムルのDBをセット
      • ヘテムル用のDBのIDなどをソースに書く
      • サーバにアップ
      • スマホ版でマイページ登録
      • 宣伝をセット
      • うたらぼ短縮で作成
      • ツイッター予約