DEV Community: kumamon

Colaboratoryでスクショ取るコードメモ

kumamon — Mon, 24 Jan 2022 14:58:44 +0000

# 日本語フォントインストール
!apt-get -y install fonts-ipafont-gothic
!apt-get -y install fonts-ipafont-mincho

# seleniumインストール
!apt-get update
!apt install chromium-chromedriver
!cp /usr/lib/chromium-browser/chromedriver /usr/bin
!pip install selenium

# datetime
import datetime

# ライブラリインポート
from google.colab import files
import time
import shutil
import os
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Chromeヘッドレスモード起動
options = webdriver.ChromeOptions()
options.add_argument('--headless')
options.add_argument('--no-sandbox')
options.add_argument('--disable-dev-shm-usage')
driver = webdriver.Chrome('chromedriver',options=options)
driver.implicitly_wait(10)

# 対象URL
# kw ='結婚指輪'
urls = ['https://gamepicks.tokyo','https://twitter.com'] # ,''を追加で複数ページいける


# ファイル名接頭辞
fileNamePrefix = "screen"

# ウインドウ幅指定
# 初期値: False, スマホ: 375
# windowSizeWidth = False
windowSizeWidth = 1200

# ウインドウ高さ指定
# 初期値: False
windowSizeHeight = False
# windowSizeHeight = 1000

# 連番初期値
shotNum = 1

# ダウンロードフォルダ作成
# folderCheck = os.path.exists('screen-shot')
# if folderCheck:
 # shutil.rmtree('screen-shot')
# os.mkdir('screen-shot')

# 繰り返し処理
for url in urls:
  # パス指定
  folderPath = 'drive//MyDrive/python/ss/' + fileNamePrefix + '-' + str(windowSizeWidth) + '-' if windowSizeWidth else 'screen-shot/' + fileNamePrefix + '-'

  # サイトURL取得
  driver.get(url)
  WebDriverWait(driver, 15).until(EC.presence_of_all_elements_located)

  # ウインドウ幅・高さ指定
  windowWidth = windowSizeWidth if windowSizeWidth else driver.execute_script('return document.body.scrollWidth;')
  windowHeight = windowSizeHeight if windowSizeHeight else driver.execute_script('return document.body.scrollHeight;')
  driver.set_window_size(windowWidth, windowHeight)

  # スクロール処理
  driver.execute_script('window.scrollTo(0, document.body.scrollHeight);')

  # 処理後一時待機
  time.sleep(3)

  # ファイル連番追加
  #shotNum += 1
  #shotNumStringified = str(shotNum)

  # 取得日時
  now = datetime.datetime.now()
  dt_now = str(now)

  # スクリーンショット格納
  driver.save_screenshot(folderPath + dt_now + '.png')

  # サーバー負荷軽減処理
  time.sleep(1)

# ブラウザ稼働終了
driver.quit()

bootstrap4.5 "iine"

kumamon — Thu, 17 Sep 2020 03:05:54 +0000

headへいれるもの

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>

body{font-size:19px !important;}

*{
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif !important;
}

/********************** 見出し **********************/
h1,h2,h3,h4{
  line-height:1.6em;
}

h1{font-weight:bold;

} 

h2{font-weight:bold;

}

h3{font-weight:bold;

}

h4{font-weight:bold;

}
/*********************************************************/


p{
  line-height:1.9;
}


/************* IMG ****************/
img{
  max-width:100%;
  margin:20px 0;
} 

#pankuzu{
  font-size:14px;
} 


.eye-single{
  display:block;
  margin:30px auto;
  max-width:800px;
}   
@media (max-width: 700px){
  img  {
    max-width:100%!important;
  }
}
/*********************************************/

/***********************header****************/ 
.iine-contents-header{
  background:#666;
  padding:12px;
  text-align:center;
  font-size:20px;
  margin-bottom:20px;
}

.iine-contents-header a{
  text-decoration:none;
  color:#fff !important;

}
/************************************************

/***ハンバーガーメニュー****/
#nav-drawer {
  position: fixed;
  top:20px;
  right:20px;
  z-index:999;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #000;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  right:0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
  text-align:left;
}

#nav-content ul{margin:0;padding:0;}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav-content  img{
  width:90% !important;
  display:block;
  margin:12px auto;

}

#nav-content li {
  background:#666;
  border-top:1px solid white;
  padding:12px;
  color:#fff;
  margin:0;


}
/*******************************************/


</style>

bodyに入れるもの

<header class="iine-contents-header">
<a href="#">サイト名</a>


<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">


<ul>
   <a href="#"><li>テキストテキストテキスト</li></a>
<a href="#"><li>テキスト</li></a>
<a href="#"><li>テキストテキスト</li></a>
<a href="#"><li>テキストテキスト</li></a>

</ul>

</div>
</div>  

</header>   
<div class="container">


<nav id="topicPath"><?php the_breadcrumb() ?></nav>

<h1 class="my-5"><?php echo get_the_title(); ?></h1>
<div class="eye-single">
<?php the_post_thumbnail(); ?>
</div>
<?php echo replace_body($post->post_content); ?>  


<?php get_footer(); ?>
</div>

</body>

の直前まで。

【WordPress】アイキャッチ画像がある時、無い時の分岐OGP

kumamon — Mon, 30 Mar 2020 07:17:21 +0000

<?php if(has_post_thumbnail()): ?> 
<?php 
// アイキャッチ画像のIDを取得
$thumbnail_id = get_post_thumbnail_id(); 

$eye_img = wp_get_attachment_image_src( $thumbnail_id , 'full' );

echo '<meta property="og:image" content="'.$eye_img[0].'">';
?>
<?php else: ?>
    <meta property="og:image" content="★アイキャッチ無い時の指定画像★">
<?php endif; ?>

【WordPress】同じカテゴリ内でランダムに関連記事生成

kumamon — Mon, 30 Mar 2020 06:12:20 +0000

<div class="newcontentarea">
<?php
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
  array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
  'post__not_in' => array($post -> ID), // 今読んでいる記事を除く
  'posts_per_page'=> 6,
  'category__in' => $category_ID,
  'orderby' => 'rand', // ランダムに記事を選ぶ
);
$query = new WP_Query($args);
if( $query -> have_posts() ): while ($query -> have_posts()) : $query -> the_post();
?>
<div class="newcontentarea2">
<a href="<?php the_permalink();?>">
    <div class="newcontentarea3">
        <div class="innerarea">

    <?php if(has_post_thumbnail()): ?> 
    <?php the_post_thumbnail(); ?>
<?php else: ?>
    <img class="lazyload" data-src="★★NOIMAGEパス★★" alt="no image">
<?php endif; ?>
    <h3><?php the_title();?></h3>
        </div>
</div>
    </a>
 </div>       
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>

</div>

【WordPress】サイト内検索実装までの流れ

kumamon — Mon, 23 Mar 2020 07:30:01 +0000

検索窓の挿入

<?php get_search_form(); ?>

検索窓 searchform.php

php

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'サイト内検索', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
</form>

style

.search-field{
background:#e8f3ff;
text-align:center;
border:none;
box-shadow:2px 2px 2px #e0e0e0;
height:40px;
padding:0 0 0 10px;

}

.search-form{
margin:10px 0;
text-align:center;
}

/*****サイドバー使うなら***/
.formside{
width:165px;
margin-top: 20px;
}

サイト内検索結果ページ search.php

php

<?php get_search_form(); ?>
<div class="search-result">


<?php
    global $wp_query;
    $total_results = $wp_query->found_posts;
    $search_query = get_search_query();
?>

<h1><?php echo $search_query; ?>の検索結果<span>（<?php echo $total_results; ?>件）</span></h1>

<?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>

<a href="<?php the_permalink(); ?>">
<div class="search-result-link">

<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?> 
    </div></a>

<?php endwhile; endif; else: ?>


<?php echo $search_query; ?> に一致するページは見つかりませんでした。

<?php endif; ?>
<nav class="pagination-area">
<?php
the_posts_pagination( array (
'prev_text' => 'PREV',
'next_text' => 'NEXT',
'mid_size'  => 2
) );
?>
</nav>              

</div>
<?php get_search_form(); ?>

style

 .search-result{
margin:36px 16px;

}
.search-result p{
margin:12px 0 18px 0; 

}

.search-result h1{
margin-bottom:16px;
}

.search-result a{

text-decoration:none;
color:#6b6b6b;

}

.search-result-link{
border:solid 2px #ff9b64;
border-radius:4px;
margin:12px 0 ;
padding:16px;
box-shadow:2px 2px 2px #d0d0d0 ;
}   
.nav-links {
font-size:20px;
text-align:center;
}

除外ページの設定

function search_pre_get_posts( $query ) {
if ( $query->is_search && !is_admin() ){
$query->set( 'post__not_in', array(★★,★★) );
}
return $query;
}
add_action( 'pre_get_posts', 'search_pre_get_posts' );

ページネーションのstyle
https://dev.to/kumamon/wordpress-style-3e8h

【WordPress】ページネーションのstyleテンプレ

kumamon — Mon, 23 Mar 2020 03:22:35 +0000

.navigation { 
text-align:center;
font-size:20px;

}

.navigation a{
text-decoration:none;
}

.navigation .next{
display:flex;
justify-content: center;
background:#003366;
color:#fff;
margin:12px 0;
}

.navigation .prev {
display:flex;
justify-content: center;

}

  .page-numbers.current{
    color:#00a1ff;
  }

【WordPress】検索窓の挿入

kumamon — Thu, 19 Mar 2020 09:52:40 +0000

<?php get_search_form(); ?>

【WordPress】検索結果から除外したいページを指定する方法

kumamon — Thu, 19 Mar 2020 04:42:15 +0000

function search_pre_get_posts( $query ) {
if ( $query->is_search && !is_admin() ){
$query->set( 'post__not_in', array(★★,★★) );
}
return $query;
}
add_action( 'pre_get_posts', 'search_pre_get_posts' );

【WordPress】検索窓のデザイン（searchform.php）のデザインテンプレ（改訂版）

kumamon — Thu, 19 Mar 2020 04:32:28 +0000

php

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'サイト内検索', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
</form>

style

.search-field{
background:#e8f3ff;
text-align:center;
border:none;
box-shadow:2px 2px 2px #e0e0e0;
height:40px;
padding:0 0 0 10px;

}

.search-form{
margin:10px 0;
}

/*****サイドバー使うなら***/
.formside{
width:165px;
margin-top: 20px;
}

【WordPress】サイト内検索結果ページのテンプレ

kumamon — Thu, 19 Mar 2020 04:28:13 +0000

検索窓の挿入

<?php get_search_form(); ?>

php

<?php get_search_form(); ?>
<div class="search-result">


<?php
    global $wp_query;
    $total_results = $wp_query->found_posts;
    $search_query = get_search_query();
?>

<h1><?php echo $search_query; ?>の検索結果<span>（<?php echo $total_results; ?>件）</span></h1>

<?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>

<a href="<?php the_permalink(); ?>">
<div class="search-result-link">

<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?> 
    </div></a>

<?php endwhile; endif; else: ?>


<?php echo $search_query; ?> に一致するページは見つかりませんでした。

<?php endif; ?>
    <nav class="pagination-area">
    <?php
    the_posts_pagination( array (
      'prev_text' => 'PREV',
      'next_text' => 'NEXT',
      'mid_size'  => 2
    ) );
    ?>
    </nav>              

            </div>
<?php get_search_form(); ?>

style

<style>
    .search-result{
        margin:36px 16px;

    }
.search-result p{
  margin:12px 0 18px 0; 

}

.search-result h1{
margin-bottom:16px;
}

.search-result a{

text-decoration:none;
color:#6b6b6b;

}

.search-result-link{
  border:solid 2px #ff9b64;
  border-radius:4px;
  margin:12px 0 ;
  padding:16px;
  box-shadow:2px 2px 2px #d0d0d0 ;
}   
    .nav-links {
  font-size:20px;
  text-align:center;
}

    </style>

【WordPress】ページネーションの挿入

kumamon — Thu, 19 Mar 2020 04:18:30 +0000

<nav class="pagination-area">
    <?php
    the_posts_pagination( array (
      'prev_text' => 'PREV',
      'next_text' => 'NEXT',
      'mid_size'  => 2
    ) );
    ?>
    </nav>

【WordPress】function.phpに入れておくといいもの

kumamon — Thu, 19 Mar 2020 04:16:57 +0000

function archive_navi_template($template){
    $template = '
    <nav class="navigation %1$s" role="navigation">
        <div class="nav-links">%3$s</div>
    </nav>';
    return $template;
}
add_action( 'navigation_markup_template', 'archive_navi_template' );

function new_excerpt_more($more) {
return '・・・【続きを読む】';
}
add_filter('excerpt_more', 'new_excerpt_more');