サンプル on qwerty.work

【jQuery】アコーデオンメニューのサンプルソース

Mon, 31 Oct 2022 19:35:21 +0900

サンプル

タイトルをクリックするとアコーデオンでメニューが開閉する割とシンプルなソースのサンプル。

.menu dl dt { cursor: pointer; } .menu dl dt, .menu dl dd { border-bottom: #CCC 1px solid; position: relative; } .menu dl dd { border: none; display: none; margin: 0 !important; } .menu dl.open dt::after { content: “ー”; } .menu dl dt::after { content: “＋”; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

$(".menu dt").on(“click”,function(){ $(this).parent().toggleClass(“open”); $(this).next().slideToggle(); });

説明①
内容①


説明②
内容②


説明③
内容③

HTML

<nav class="menu">
  <dl>
    <dt>説明①</dt>
    <dd>内容①</dd>
  </dl>
  <dl>
    <dt>説明②</dt>
    <dd>内容②</dd>
  </dl>
  <dl>
    <dt>説明③</dt>
    <dd>内容③</dd>
  </dl>
</nav>
<script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
  crossorigin="anonymous"></script>

CSS

.menu dl dt {
    cursor: pointer;
}
.menu dl dt, .menu dl dd {
    border-bottom: #CCC 1px solid;
    position: relative;
}
.menu dl dd {
    border: none;
    display: none;
    margin: 0;
}
.menu dl.open dt::after {
    content: "ー";
}
.menu dl dt::after {
    content: "＋";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

Javascript(jQuery)

$(".menu dt").on("click",function(){
  $(this).parent().toggleClass("open");
  $(this).next().slideToggle();
});

Bootstrapで実現したいとき

jQueryを使わず、Bootstrapでアコーデオンメニューを作成することも可能です。

https://getbootstrap.jp/docs/5.0/components/accordion/ https://getbootstrap.jp/docs/5.0/components/accordion/

Vue.jsで実現したいとき

https://mykii.blog/nuxt-accordion-slide-toggle/ https://mykii.blog/nuxt-accordion-slide-toggle/

https://777-webdesigner.net/portfolio2/538/ https://777-webdesigner.net/portfolio2/538/

https://pote-chil.com/vue-js_accordion/ https://pote-chil.com/vue-js_accordion/

【CSS】マウスホバー時に『キラーん』と光るような効果のボタン作成メモ

Sun, 30 Oct 2022 21:29:22 +0900

サンプル

マウスが重なると光るようなアニメーションが表示されます。

.btn { display: flex; justify-content: center; align-items: center; background-color: #bdfa3e; width: 28.4rem; height: 11rem; border-radius: 5.5rem; font-size: 3.8rem; font-weight: 900; box-shadow: 0 1rem 1rem rgba(0,0,0,.16); overflow: hidden; position: relative; text-decoration: none; } .btn::before { content: ‘’; display: block; width: 5rem; height: 300%; top: 50%; position: absolute; background-color: #fff; transform: translate(-500%,-50%) rotate(-45deg); transition: transform .5s ease; } .btn:hover::before { transform: translate(500%, -50%) rotate(-45deg); }

ボタン

HTML

<a href="#" class="btn">ボタン</a>

CSS

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bdfa3e;
    width: 28.4rem;
    height: 11rem;
    border-radius: 5.5rem;
    font-size: 3.8rem;
    font-weight: 900;
    box-shadow: 0 1rem 1rem rgba(0,0,0,.16);
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.btn::before {
    content: '';
    display: block;
    width: 5rem;
    height: 300%;
    top: 50%;
    position: absolute;
    background-color: #fff;
    transform: translate(-500%,-50%) rotate(-45deg);
    transition: transform .5s ease;
}
.btn:hover::before {
  transform: translate(500%, -50%) rotate(-45deg);
}

その他参考サイト

https://coco-factory.jp/ugokuweb/move01/7-1-40/ https://coco-factory.jp/ugokuweb/move01/7-1-40/

https://photopizza.design/shiny_btn_animation/ https://photopizza.design/shiny_btn_animation/

https://dezanari.com/css-shiny-button/ https://dezanari.com/css-shiny-button/

https://give-shot.jp/tokyocss/button-shine/ https://give-shot.jp/tokyocss/button-shine/

https://switch-box.net/shine-button.html https://switch-box.net/shine-button.html

【Vue】お問い合わせフォームのバリデーションとPHPでメール送信サンプル

Tue, 11 Oct 2022 10:37:18 +0900

お問い合わせフォームの内容をPHPからmb_send_mailで飛ばす前に、お問い合わせフォームの入力内容をvue.jsでチェック（バリデーション）を行う方法について参考になったページをメモ。

コピペでチェックから送信までできました。ソースの解説も詳しくてありがたい内容でした。バリデーションでエラーがあっても送信できてしまう点が気になりますが、これを参考にあとは自力で欲しい機能を追加してみたいと思います。

https://base91.net/vue-mission-9/ https://base91.net/vue-mission-9/

【正規表現】基本やサンプル・事例のメモ

Sun, 25 Sep 2022 21:30:58 +0900

(空)’; } return $str; }; ?>

正規表現

正規表現（せいきひょうげん）は英語で**「Regular expressions」**と書く。プログラミンで文字列のパターン検索や置換に使う。プログラミンだけではなく、文章などの整形に使われたりすることもある。プログラミングでregexという文字が付く命令があれば、正規表現を使う何らかの処理と思えばよい。

デリミタについて

正規表現の条件は/〇〇〇/と、/で両サイドを挟みます。プログミング言語によっては＃〇〇〇＃と違う記号を使うことができます。

/https:\/\//といった場合、デリミタが/で検索語内に/があると、\/でエスケープしなければなりませんが、#がデリミタだと#https://#とエスケープしなくて済みます。ただし、Javascriptではできないようです。

正規表現のサンプルや使用例

簡単なやつ

改行を削除

HTMLのソースをインライン化したいときに使用。の削除ではありません。

  正規表現
  


  対象文字列
  -->
  

    ほげほげ

    



  置換語
  


  置換結果
  -->
  ほげほげ

タグとタグの間にある半角スペースを削除

‘; $replacement[ ’’ ] = ‘>

  正規表現
  


  対象文字列
  


  置換語
  


  置換結果

文字だけを取り出す

  正規表現
  


  対象文字列
  


  置換語
  


  置換結果

数値だけを取り出す

  正規表現
  


  対象文字列
  


  置換語
  


  置換結果

【jQuery】ページ内のどの要素がクリックされたか取得する方法

Tue, 12 Jul 2022 22:22:39 +0900

jQueryでclickで要素を指定してもうまく動かないことが多々あります。そんなときに、ページで内でクリックされた要素、ID、Classを知りたいときに使えるコードをメモ。

サンプルコード

クリックされた場所を取得して表示

<p id='selected'>どれかクリックしてください</p>

<button id="one" class="a">ボタン</button>
<a href="#" id="two" class="b">リンク</a>

<script>
$(document).click(function(event) {
  $("#selected").html("clicked: 要素名=" + event.target.nodeName + "&nbsp;ID="+ event.target.id + "&nbsp;Class=" +event.target.className);
});  
</script>

参考ページ

https://js.studio-kingdom.com/jquery/events/event_target https://js.studio-kingdom.com/jquery/events/event_target

【Excel】セルに値がない場合は空白を表示する際に使う計算式例

Thu, 24 Feb 2022 11:57:15 +0900

数量や単価が空白の場合は0が表示されないようにしたい

エクセルで請求書や見積書または原価計算などを作成する際に、数量や単価などが入らない行があり、金額欄には「数量×単価」の計算式だけ入れてあるため、その行には「0」(ゼロ）が表示されます。それを防ぐための計算式の例をいくつかメモ。

計算式例

エクセルの表が以下のようになっていた場合を例にします。

A2 … 商品名
B2 … 数量
C2 … 単価
D2 … 金額（数量×単価） ← ここに計算式を入れる

IF文で簡単に使用する例

IF文で簡単に使用する例もし、**C2（単価）が空白じゃなければB2*C2（数量×単価）**を表示し、そうでなければ空白を表示する。

=IF(C2<>"",B2*C2,"")

その逆で、**C2（単価）が空白なら空白を表示し、そうでなければB2*C2（数量×単価）**を表示する。

=IF(C2="","",B2*C2)

もし、**B2（数量）またはC2（単価）が空白なら空白を表示し、そうでなければB2*C2（数量×単価）**を表示する。

=IF(OR(B2="",C2=""),"",B2*C2)

ISBALNK関数を使用した例

セルが空白かどうか調べるISBALNK関数を使用した例で、もし、**B2（数量）またはC2（単価）が空白なら空白を表示し、そうでなければB2*C2（数量×単価）**を表示する。

=IF(OR(ISBLANK(B2),ISBALNK(C2)),"",B2*C2)

【EC-CUBE】この好みの場所に『カートに入れる』ボタンを設置したいとき

Thu, 17 Feb 2022 17:16:29 +0900

『カートに入れる』ボタンを自作したい

オリジナルの**『カートに入れる』**ボタンを作成したいときに調べたときのことをメモ。

対象バージョンは4.1.1

参考ページ

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=25215&forum=10 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=25215&forum=10

ここにあったソースをちょっと改造

上記ページにあった参考のソースのままではなぜか、{{ product_class_id }}を取得することができなかったので、{{ form.ProductClass.vars.value }}に変更したら取得できました。このコードを商品ページのテンプレート（/app/template/default/Product/detail.twig）に置いてテストしてみたところ、ちゃんとカートに入れることができました。

<div class="好きな名前">
  <form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post">
    <div class="好きな名前">
      <div class="好きな名前"><span>数量</span>
        <input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
      </div>
    </div>
    <input type="hidden" id="product_id{{ Product.id }}" name="product_id" value="{{ Product.id }}">
    <input type="hidden" id="ProductClass{{ Product.id }}" name="ProductClass" value="{{ form.ProductClass.vars.value }}">
    <!--<input type="hidden" id="ProductClass{{ Product.id }}" name="ProductClass" value="{{ product_class_id }}">-->
    <input type="hidden" id="_token{{ Product.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
  </form>
  <div class="ec-productRole__btn">
    <button class="ec-blockBtn--action add-cart" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" type="submit"> 購入する </button>
  </div>
</div>

カートに入れるために必要な情報

カートに入れるためには「数量、商品ID、クラスID、トークン」の4つが揃っていないとエラーになるようです。

<input type="number" id="quantity{{ Product.id }}" name="quantity" required="required" min="1" maxlength="9" class="test5" value="1">
<input type="hidden" id="product_id" name="product_id" value="{{ Product.id }}">
<input type="hidden" id="ProductClass" name="ProductClass" value="{{ product_class_id }}">
<input type="hidden" id="_token" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />

トークンの部分は以下のコードでもいいみたいです。

<input type="hidden" id="_token" name="_token" value="{{ form._token.vars.value }}" />

純正コードの控え

<form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  {% if Product.stock_find %}
  <div class="ec-productRole__actions"> {% if form.classcategory_id1 is defined %}
    <div class="ec-select"> {{ form_widget(form.classcategory_id1) }}
      {{ form_errors(form.classcategory_id1) }} </div>
    {% if form.classcategory_id2 is defined %}
    <div class="ec-select"> {{ form_widget(form.classcategory_id2) }}
      {{ form_errors(form.classcategory_id2) }} </div>
    {% endif %}
    {% endif %}
    <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
 {{ form_widget(form.quantity) }}
      {{ form_errors(form.quantity) }} </div>
  </div>
  <div class="ec-productRole__btn">
    <button type="submit" class="ec-blockBtn--action add-cart"> {{ 'カートに入れる'|trans }} </button>
  </div>
  {% else %}
  <div class="ec-productRole__btn">
    <button type="button" class="ec-blockBtn--action" disabled="disabled"> {{ 'ただいま品切れ中です。'|trans }} </button>
  </div>
  {% endif %}
  
  {{ form_rest(form) }}
</form>

.htaccessの書き方のお手本・参考・サンプル

Mon, 13 Dec 2021 09:37:06 +0900

定番の書き方の参考

サイトの読み込みスピードを上げるためにApatchだと、.htaccessにファイル圧縮やキャッシュ期間を設定しなければなりませんが、お手本になるもを見つけたのでメモ。

https://qiita.com/shotets/items/a5465fb41623cc3dae94 https://qiita.com/shotets/items/a5465fb41623cc3dae94

jQuery不要！Bootstrap5.0だけで実現するモーダルウィンドウのサンプル

Wed, 10 Nov 2021 13:01:12 +0900

Bootstrapだけでモーダルウィンドウが使える

CSSフレームワークとしてBootstrap5.0を使ったサイトを制作していて、**『簡単に設置できるモーダルウィンドウがないかな？』**と探していたところ、特殊なJavascriptやjQueryを使わなくても、Bootstrapの標準機能としてモーダルウィンドウが使えるのを知りました。

ちなみに、モーダルウィンドウとは画像などをポップアップで表示してくれるLightboox2やSlimbox2みたいに、テキストやHTMLをページ全面にポップアップで表示してくれるものです。

Bootstrap5.0以前のバージョンであるBootstrap4.5でもModalは使えるみたいなのですが、4.5はjQueryと少しJavascriptを使わないと実現できません。しかし、Bootstrap5.0の場合はほぼコピペでいける程、設置がめっちゃ簡単です。

https://getbootstrap.jp/docs/5.0/components/modal/ https://getbootstrap.jp/docs/5.0/components/modal/

必要なJSとCSS

事前準備として必要なものはBootstrap5の以下の2点です。5.0以下のバージョンの物ではダメです。

bootstrap.css
bootstrap.js

CDNから読み込む場合

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

サンプル

スタンダードな例

ページの上からスライドダウンしてフェードインする例。

Launch demo modal

    Modal title
    
  
   Modal body text goes here. 
  
    Close
    Save changes

ソース

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal-1">
  Launch demo modal
  </button>

<!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
  Modal body text goes here.
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
  </div>
  </div>
  </div>
</div>

Static backdrop

モーダルの外側の背景をクリックしてもモーダルが閉じない例。

Launch static backdrop modal

    Modal title
    
  
   Modal body text goes here. 
  
    Close
    Understood

ソース

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
  </button>
  
<!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
  <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
  Modal body text goes here.
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Understood</button>
  </div>
  </div>
  </div>
  </div>

Scrolling long content

モーダルがユーザーのビューポートやデバイスに対して長すぎると、ページ自体から独立してスクロールできる例。

    Modal title
    
  
  
    What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It's in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

    We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

    Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

    Just own the night like the 4th of July! I'm gon' put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I'm gon' put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

    You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

    I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

    Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

    We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

  
  
    Close
    Save changes

Launch demo modal

ソース

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It's in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p>
<p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p>
<p>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.</p>
<p>Just own the night like the 4th of July! I'm gon' put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I'm gon' put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.</p>
<p>You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.</p>
<p>I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?</p>
<p>Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.</p>
<p>We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<!-- Button trigger modal -->
<div class="bd-example">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
Launch demo modal
</button>
</div>

モーダル本体をスクロールできるスクロール可能にする例。

上記のソース内にあるをとなるように、.modal-dialogに.modal-dialog-scrollableを追加するだけです。

    Modal title
    
  
  
    What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

    I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

    Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

    We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

    Sipping on Rosé, Silver Lake sun, coming up all lazy. It's in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

    We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

    Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

    Just own the night like the 4th of July! I'm gon' put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I'm gon' put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

  
  
    Close
    Save changes

Launch demo modal

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.</p>
<p>I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?</p>
<p>Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.</p>
<p>We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.</p>
<p>Sipping on Rosé, Silver Lake sun, coming up all lazy. It's in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p>
<p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p>
<p>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.</p>
<p>Just own the night like the 4th of July! I'm gon' put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I'm gon' put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<!-- Button trigger modal -->
<div class="bd-example">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">
Launch demo modal
</button>
</div>

その他サンプル

以下の公式ページに他のサンプルや使用例が掲載されています。基本的には使い方は同じです。

公式リファレンス

https://getbootstrap.jp/docs/5.0/components/modal/ https://getbootstrap.jp/docs/5.0/components/modal/

https://getbootstrap.com/docs/5.0/components/modal/ https://getbootstrap.com/docs/5.0/components/modal/

ブログ更新通知（PING）送信先サーバーの生存テストスクリプトの参考ページメモ

Tue, 18 May 2021 22:23:17 +0900

以下のサイトにPHPでテストできるサンプルコードがあったのでメモ。

ブログ通知先のPINGサーバーが使えるのか確認したい

MovableTypeでブログを新規投稿するすると、以下のようにPING送信エラーが良く出ます。

更新通知をする際に使ったらよいとされるPINGサーバー一覧がネット上に転がっていますが、ほとんどが使えない先でエラーが出ます。特に10以上あるようなリストは嘘が多いです。

そこで、予め『正常に稼働しているPING送信先か調べることができないかな？』と方法を探してみたら、いくつかPHPのコードがあったので、その参考ページをメモ。

参考ページ

https://www.softel.co.jp/blogs/tech/archives/2418 https://www.softel.co.jp/blogs/tech/archives/2418

https://pentan.info/php/sample/post_ping.html https://pentan.info/php/sample/post_ping.html

PINGサーバーテストページ作りました

（2021/05/26追記）PING送信先のサーバーが生きているのか簡易的に調べるツールを作成しました。

https://qwerty.work/test/ping-rss-sent-test.php

JavaScriptから非同期でPHPのファンクション（関数）を呼び出すサンプル

Sun, 14 Feb 2021 00:27:04 +0900

PHPのFunctionの一部にstream_get_contents（指定したURLのHTMLソースを取得する関数）を使っていて、それを多用すると、PHPの処理が終わるまでページの表示が停まるので、ページの読込がかなり遅くなります。どうにかならないかな？と考えてみました。

**『PHPのファンクションをJavscriptから呼び出せば、非同期で表示できるのでは？』**と思い、やり方を探してヒントになるやり方を見つけたのでメモ。

重たい処理はサーバー側のPHPで処理させて、表示の部分だけJSの非同期で処理するといった感じです。

サンプル

jQueryなどを使わずにできるシンプルな方法のサンプル

これをいじっていけば旨くいけそうですが、AMPページとかには使えそうにないので、AMPページではそうするか考えないといけない感じです。

<?php
function func($a) {
  echo( $a );
}
?>

<script type="text/javascript" async>
function test(){
  document.getElementById("php_code").innerHTML='<?php func("hello");?>';
}
</script>

<a href="#" onclick="test(); return false;"> test </a>
<p id="php_code"></p>

テストページ

参考サイトこちらのページにはプレーンなJavascriptのサンプルと、jQueryを使ったサンプルがあります。

https://www.it-swarm.jp.net/ja/php/javascript%E3%81%8B%E3%82%89php%E9%96%A2%E6%95%B0%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99/940293979/ https://www.it-swarm.jp.net/ja/php/javascript%E3%81%8B%E3%82%89php%E9%96%A2%E6%95%B0%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99/940293979/

【Excel】ユーザーフォルダを開くマクロとサンプル

Wed, 02 Sep 2020 16:05:20 +0900

Excelからフォルダーを開くマクロが必要になることがあり、いいサンプルコードを見つけたのでメモ。

マクロ

%USERPROFILE%を開く

Sub userprofile_open()
CreateObject("Shell.Application").explore Environ("USERPROFILE")
End Sub

C:/Users/[ユーザー]/AppData/Roaming/Microsoft/Excelを開く

Sub folder_open()
CreateObject("Shell.Application").explore Environ("USERPROFILE") & "\AppData\Roaming\Microsoft\Excel"
End Sub

または、CreateObject("Shell.Application").ShellExecuteで開く例

Sub folder_open2()
  Dim target As String
  Dim target1 As String
  Dim target2 As String
  target1 = Environ("USERPROFILE")
  target2 = "\AppData\Roaming\Microsoft\Excel"
  target = target1 & target2
  MsgBox target & " を開きます。"
  CreateObject("Shell.Application").ShellExecute target
End Sub

サンプル

以下のより上記のマクロを組み込んだsample.xlsmをダウンロードできます。

** sample.zip（16KB)

参考サイト

http://www.excel.studio-kazu.jp/kw/20150206131724.html http://www.excel.studio-kazu.jp/kw/20150206131724.html

いつかマネしたい好みの効果のあるクールなサイトのメモ

Sat, 25 Feb 2017 13:10:07 +0900

https://ics.media/ https://ics.media/

https://whois.domaintools.com/

http://www.feedmusic.com/ http://www.feedmusic.com/

mod_rewriteサンプル

Wed, 06 Jun 2012 15:02:28 +0900

.htaccessに記述するリライトルールのサンプル

mod_rewriteによるリダイレクトで、比較的よく使うリライトルールのサンプルをメモ。

URLのアンダーバーをハイフンに変更

/blog/2012/06/post_abc123.phpでアクセスがあったらpost-abc123.phpにリダイレクトします。

RewriteEngine on<br>RewriteRule ^([0-9]+)/([0-9]+)/post_(.+)\.php$ /$1/$2/post-$3.php [R,L]

ディレクトリの移動

古いディレクトリにアクセスがあったら新しいディレクトリにリダイレクトします。

RewriteEngine on<br>RewriteRule ^/old/(.*)$ /new/$1 [R=301,L]

動的なページを静的なページに見せる

/sample/2012/06.htmlにアクセスがあったら/sample/sample.php?a=2012&b=06lにリダイレクトします。

RewriteEngine on<br>RewriteRule ^/sample/([0-9A-Za-z]+)/([0-9A-Za-z)]+)\.html$ /sample/sample.php?a=$1&b=$2 [L]

特定のディレクトリにあるページの拡張子を書き換える

blogを含むURLの拡張子がｈｔｍｌの場合、phpに書き換えてアクセスする。

RewriteEngine on<br>RewriteCond %{REQUEST_URI} ^/blog.*$<br>RewriteRule ^(.*)\.html$ /$1.php [R,L]

その他参考ページ

http://tech.bayashi.jp/archives/entry/techweb/2007/001981.html http://tech.bayashi.jp/archives/entry/techweb/2007/001981.html