• PS4を安さにつられて買ったよ。なんかコントローラーがすごいよ

    ゲームってのは最新技術が割と早めに体験できる場所ですよね。
    ただ、まぁ最近はスマートフォンがその役割をになってるところもありますけどね。
    ふと、あんまり使われてないすごいものに触れると感動しますよね。

    PS4がどちゃくそ安い

    この年末年始にかけてセールをやってます。

    本体5000円引き、かつダウンロードソフトが二本ついてきます。
    ダウンロードソフトはそれぞれ価格のムラがあるみたいですが、だいたい1本4000円ぐらいです。
    てことはだいたい本体が実質20000円切ってるわけですよ(一番安いやつの場合)。

    これは買うしかないですよね。

    あと本体割引クーポンあるので忘れずに登録すること

    本体はProかそうでないのにすべきか

    ぶっちゃけ今回のセールで買うのって、ライトゲーマー層だと思うので、proじゃなく定位とおもいます。
    proの優れている部分は4K対応、そして解像度だけでなく映像美がランクアップするのだそうです。(対応ソフトのみ)
    4Kテレビ持ってないし、ふつーのps4画質でも綺麗に感じるので自分はproじゃなくていいかな。
    たぶんVRとかを体験したい場合は高性能な方が快適だったりすると思います。多分すごいパワーを食うので。
    VRゴーグルも合わせてセールしてますね。・・・これも欲しかったけど、ちょっと予算オーバーでしたわ。

    容量ですが、多い方がいいです。1ソフト50GBとか普通にあるみたいなので、500GBでもたりない感じしますよね。内蔵HDD(SSD?)は換装できるみたいですが、当然保証対象外になります。剥がしたらアウト、なシールが貼ってありました。

    ダウンロードソフト

    スパイダーマンは2018年5月発売のソフトらしいので選んだ方が良さそうです。
    個人的に「人喰いの大鷲トリコ」はずっとやりたかったので選びました。

    ソフトを買わなくても結構遊べる

    ダウンロードソフト2本ですが、PS4には体験版がありますのでただでも結構遊べます。
    特にこの前発売したキムタクが如くこと「ジャッジアイズ」は1章あそべます。
    というか真剣に寄り道して遊んでたらそうとう遊べそうな感じでした。

    ジャッジアイズですが、リアルな感じでバトルのある逆転裁判、って感じですごく好みのゲームでした。多分買うと思います。

    名作がこなれて安くなってる

    PS4買わずに、色々やりたいなーというソフトをスルーしてきたんですけどそういうソフトがみんな手に入りやすい価格になってます。
    2000円〜3000円ぐらいです。ダウンロードソフトにもありますがアンチャーテッドとかめっちゃ遊べるだろ・・・コレクションだぞ。

    PS4のコントローラーに今更感動する

    なんか、トラックパッドがついてるし、モーションセンサーでwiiみたいに文字入力ができる。
    ダラダラ過ごすために技術のスイを集めた感じがたまらない。

    あと、コントローラーに音声出力端子があってここにマイクをつなぐみたいですよ。
    なるほどなー。

    PSから伝統の感じからちょっと掴みやすい感じに寄せてるのが印象的ですね。
    nintendoとは大違い。
    switchのデザイン優先な感じもすごく好きですけどね。
    でもファミコンのコントローラーなんて板だけどすごく使いやすかったもんなー。
    対比ができててすごく面白いです。

    PS4残念ポイント

    PSアーカイブスできんのかい!!
    PS3とvitaのソフトもできてもええんやで・・・なんでや

    まとめ

    興味あったやつは今買うと快適だから買え。

  • 自作WPテーマをカスタマイザーに対応させる方法

    なんかめんどくさそうだと思ってましたが、一部だったらそんなに難しくなさそうなのでまとめてみます。

    メニューに対応させる

    カスタムメニューに対応させると、カスタマイザーから編集できるようになります。

    https://logzitsu.tlog.work/wp%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E4%BD%BF%E3%81%8A%E3%81%86%EF%BC%81/

    タイトルとディスクリプションを出力する

    コピーライトや、ヘッダー上部の情報は以下のテンプレートタグで出力するようにしてください。

    <?php bloginfo('name'); ?>
    <?php bloginfo('description'); ?>

    ちなみに、ショットカットアイコン、ファビコンは何もしなくても対応してるので積極的使っちゃいましょう。ファビコン設定はここからやると良い。

    ヘッダーの画像を差し替えられるようにする

    まずfunction.phpに以下を書き込みましょう。メニューに項目が出現します。

    // カスタムヘッダー
    $custom_header = array(
        'random-default' => false,
        'width' => 2000,
        'height' => 500,
        'flex-height' => true,
        'flex-width' => false,
        'default-text-color' => '',
        'header-text' => false,
        'uploads' => true,
        'default-image' => get_stylesheet_directory_uri() . '/images/default.jpg',
    );

    サイズやdefaultイメージについては任意で書き換えてください。

    <!-- 画像として出力する場合 -->
    <img id="mainimage01"  src="<?php header_image(); ?>" alt="">
    
    <!-- 背景として出力する場合 -->
    <div id="mainimage02"  style="background-image:url(<?php header_image(); ?>);"></div>

    style属性として出力すると背景画像のカスタムができるので、結構重宝します。

    上記で主要なカスタム項目には対応できたと思います。

    オリジナル項目の追加

    以下のサイトを参考にしました。

    https://moriawase.net/theme-customizer-color

    テーマカラーを変更したいと思います。
    functionsに以下の項目を追加

    //  色の変更メニュー追加
    function theme_customizer_extension($wp_customize) {
    $wp_customize->add_setting( 'thema_color', array(
    'default' => '#35bed4',
    ) );
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'thema_color', array(
    'label' => 'テーマカラー',
    'section' => 'colors',
    'settings' => 'thema_color',
    'priority' => 20,
    )));
    }
    add_action('customize_register', 'theme_customizer_extension');

    これで項目が出現するので、色を選ぶことができます。
    続いて出力の方法。

    <?php //変数に入れる 色はdefault色にすると良い
    $thema_color = get_theme_mod( 'thema_color','#35bed4'); ?>
    
    <style>
    #header {
     background-color:<?php echo $thema_color; ?> ;
    }
    </style>

    上記みたいな感じでスタイルをheadタグ内とかに出力します。

  • 2018年12月だけどWiiのはなし。

    スマブラSPが発売されて話題ですね。
    そんな最中、wiiを手に入れました。

    今めっちゃ安いです

    メジャーな、wiiパーティとリモコンプラス2つセットの本体が中古5000円あたりで売ってます。
    安いなぁ。

    メジャーで数が出回ってるソフトなら1000円ぐらいで手に入りますね。
    マリオとか。
    パッケージなしとかならほんと500円とかからあります。

    でも、メジャーかつまだ遊びがいのあるソフトは結構値段が高いので注意です。
    カービィ、スマブラ、マリオカートあたりですね。
    2000円〜5000円ってところでしょうか?

    マリオカートなんて、今やっても全然楽しいですよ。

    Wiiを今買うデメリット

    ネット対戦ができません。
    これはかなり痛いですね。

    ネット対戦したいなら素直にswitchを買いましょう。

    あと、ゲーム以外何もできません。
    いろんなチャンネルを追加できる機能のあったwiiですが、そのほとんどが動きません。

    ネット接続機能のほぼ全てが終了しているからです。
    インターネットチャンネルはかろうじて動きますが、最新のセキュリティに対応している(SSL)ページは見れません。
    昨今そんなサイトはほぼないので、もうなにも閲覧できません。

    それと、流石に画質が悪いです。
    同世代機のPS3は1080pとかに対応してるんですが、480pらしい。
    HDMI変換を購入してプログレッシブにしたら多少軽減されましたが、なんかぼやけたような画質なのはいなめません。

    あと変換ケーブルでうまく表示できないディスプレイがあったのですが、wii側の設定をプログレッシブにしたら問題ありませんでした。

    今のご時世こんなことで悩んでる人は皆無かと思いますが、試してみてください。

    まだこんなひとにはおすすめ!

    みんなで集まって遊ぶ、というwii本来のコンセプトならまだまだ現役です。
    古くなったとはいえ、あんまりゲームに触れてなかった人にとってはまだまだ新鮮なアイデアに溢れた作品タイトルを多く保有しています。

    wiiパーティなんかは次作のwiiUのものより面白い、なんて評価もあります。

    対戦なんかいいからとにかくゲームがしたいんだ!という人にもおすすめです。
    安いソフト、しかも名作が揃ってますのでかなりながーいあいだ遊べるはずです。

    なんで買ったの?

    ゲームに毛ほども興味のなかった母親が、マリオは脳トレにいいらしいという情報を耳にして興味をもってくれたからです。

    古いゲームでも全然問題ないということなんで、今買うならそれほど古臭くないゲームが大量に揃っているWiiだろうな、(安いし)ということで購入しました。

    買ったのはNewマリオとマリオギャラクシー。
    マリオギャラクシーはすこし触ってみたら、結構難しくて大丈夫かな?とちょっと思ってます。

    反応をみてみたいです。

    余談

    男性の方が機械に詳しいイメージですが、昔はパソコンなどに知見があったと思われる父親がまるっきり機械音痴になってます。

    逆に機械音痴だった母親が、今はゲームに興味を持つなどしています。

    不思議なものです。

    父親をみてると、自分もいつかこんな感じに機械関係に疎くなる時が来るのかなぁとか思ったりしたりしたり・・・。

  • 糖質制限を数日解除してみた影響レポート

    糖質制限を解除しても、そんなに太る気配はないですね。
    しかし、困った影響があったのです。

    糖質制限すると総カロリーが少なくなるので痩せるらしいが・・・

    糖質制限すると、結局単純に少食になり痩せるのだそうです。
    なるほど、糖質食っても食べる量を減らせばいいのか!
    と、すこし糖質(スイーツやご飯)を少し戻して数日食べてみたのです。

    めちゃくちゃ腹が減るじゃねーか!

    糖質制限していたときもお腹は当然空くのですが、
    別の感じでお腹が空きます。
    昔の腹の減り方を思い出しました。こういう感じだなって。

    ふらふらして、頭が痛くなる。

    多分、他の人と感覚が違うと思うのですが、自分は栄養が足りなくなると眉間のあたりを中心に頭が痛くなるのです。
    昔からそうだったのですが、糖質制限をしている間はそういえばこれは全くなかったのです。

    腹減ってたおれそうーという感覚が戻ってきました。
    糖質制限しているときより、むしろたくさん食べているはずなのに・・・。

    糖質を食べながら腹が減ると辛いのです。
    これで欲望のまま食べるとリバウンドするのだなと思います。

    ケトン体でエネルギーを作る状態の方が辛くない

    ちょっと急激に砂糖など取りすぎたのかもしれませんが、
    ご飯やスイーツを食べながらカロリー制限をするのはけっこう辛いというのが個人的な結論です。
    今は辛いですが、少し我慢してケトン体生産シフトに切り替えていこうと思います。

    普段は糖質制限をして、たまーにご褒美で豪勢な炭水化物をとる
    という方が圧倒的に体調が良い。

    単純なカロリー制限だけだと自分は続かなくて辛いと思います。
    てな感じのレポートでした。

  • WPのカスタムメニューを使おう!ついでにウィジェットも表示

    functions.phpに以下を追加。

    add_theme_support('menus');

    管理メニューにでてくる。
    新規メニューを作ろう

    こんな感じ

    <?php wp_nav_menu( array('menu' => 'menu' )); ?>

    ウィジェットも表示したいよ

    functions.phpに以下を追記

    add_action(
    	'widgets_init', 
    	function(){
    		register_sidebar(array(
    			'id' => 'widget',
    			'name' => 'エリア名',
    			'description' => '説明',
    		));
    	}
    );

    出力部分(sidebar.phpなど)

    <aside>
    	<?php if(is_active_sidebar('widget_id001')) : ?>
    		<ul id="my_sidebar_widget">
    		<?php dynamic_sidebar('widget_id001'); ?>
    		</ul>
    	<?php endif; ?>
    </aside>
  • wgetでサイトをダウンロードしよう

    Webサイトをまんまダウンロードしてどーのこーのしたいことってありますよね。
    そんな時の便利な命令「wget」を使いましょう。

    ターミナルから使うものです。

    まずインストールを行おう

    $ brew install wget

    早速使おう

    フォルダを作ってそこに移動しておいてください。
    そこにファイルがダウンロードされます。

    wget -l 1 -H -r https://www.yahoo.ne.jp

    結構余分なのもダウンロードされる・・・・もう少しちゃんと調べて使ってもいいかもな。

  • Puppeteer活用のアイデアに。web上でできることまとめ

    web上でできることは、Puppeteerでもできる!
    組み合わせることで、超便利なサービスが生み出せるかも?

    ということでふと思いついたので、まとめてみます。

    メールを送る・受け取る

    gimail
    https://mail.google.com/

    メルアドぽいぽい
    https://m.kuku.lu/

    ファイルをアップロードする
    (指定のメールアドレスに送信する)

    宅ふぁいる便
    https://www.filesend.to/

    ギガファイル便
    https://gigafile.nu/

    ブログを書く

    はてなブログ
    https://hatenablog.com/?via=201002

    WordPress
    https://ja.wordpress.org

    商品を買う

    amazon
    https://www.amazon.co.jp

    楽天市場
    https://www.rakuten.co.jp/

    商品を売る

    メルカリ
    https://www.mercari.com/jp/

    アマゾンセラーセントラル
    https://sellercentral-japan.amazon.com

    ファイルを変換する

    convertio(注:怪しい広告多い)
    https://convertio.co/ja/

    動画を見る・共有する

    youtube
    https://www.youtube.com

    youtubeをダウンロードする

    youtube-converter(怪しい広告多い&違法にダウンロードしないように)
    https://www.onlinevideoconverter.com/ja/youtube-converter

    offliberty(違法にダウンロードしないようにしてください)
    http://offliberty.io/

    フリーの素材写真

    ぱくたそ
    https://www.pakutaso.com/

    pixabay
    https://pixabay.com/

    BURST
    https://burst.shopify.com/

    フリーのイラスト素材

    執筆中

  • もう手遅れ・・・・?PHP5系のサポートが切れます!

     http://techtarget.itmedia.co.jp/tt/news/1811/21/news07.html

    ということで、2018年で終わりです。
    5の最新版から、php7への乗り換えはそんなに難しくないのではないかと思います。
    でも5.?の古いバージョンから最新の7への乗り換えは結構やばいです。

    動かない記述が結構あります。

    もう手遅れかもしれませんが、年末までになんとかアップデートしてください。

  • WordPress ショートコードで記事内にいろいろ仕込む

    ショートコードたまに作りたくなるけど、結構忘れるのでメモっておこうと思います。
    function.phpに以下を追記。

    //一番単純なショートコード
    function helloFunc() {
        return echo "ハローワールド!";
    }
    add_shortcode('hello', 'helloFunc');

    記事内には [hello] を書き込みます

    ハローワールド! と出ればOKです。
    複数行に渡るタグを入れることも可能です。
    広告コードなどを表示させたいときに使えます。
    function.phpに追加した部分を以下に書き換え

    //タグを出すだけのショートコード
    function shortFunc() {
        return '
    <p>ここにタグを書き込む</p>
    ';
    }
    add_shortcode('hello', 'shortFunc');

    続いて、テンプレートタグを使ってみましょう。
    function.phpに追加した部分を以下に書き換え

    //ブログ名を出すだけのショートコード
    function shortFunc() {
        return get_bloginfo('name');
    }
    add_shortcode('hello', 'shortFunc');

    続いてパーツのPHPを呼び出してみましょう

    
    function shortFunc() {
      ob_start();
      get_template_part('roop'); 
      return ob_get_clean();
    }
    add_shortcode('hello', 'shortFunc');

    roop.php

    <ul>
    <?php
    $args = array( 
    'post_type' => 'post', // カスタムポスト名
    'posts_per_page' => 3 // 投稿件数の指定
    );
    $the_query = new WP_Query($args);
    if($the_query->have_posts()):
    ?>
    <?php while ($the_query->have_posts()): $the_query->the_post(); ?>
    
    <li>
    <a href="<?php the_permalink(); ?>">
    <span class="news-left sc-item fadein"><?php the_time('Y.m.d'); ?></span>
    <span class="news-right sc-item fadein"><?php the_title(); ?></span>
    </a>
    </li>
    
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    <?php else: //投稿がない場合 ?>
    <li>記事がありません</li>
    <?php endif; ?>
    </ul>

    記事の一覧を呼び出すサブループです。
    パーツ呼び出しにすると、呼び出す側にいつもの書き方でPHPファイルとして作成すればいいのでとてもやりやすいです。
    PHPのプログラム書くときも、functionではなくphpファイルとして作ってみちゃいましょう。

  • スクロールでふわっとでてくるやつメモ

    jQueryでやるよー
    スクロールに応じてクラスをつけるよー

    js

    $(function(){
        //スクロール時に実行
        $(window).scroll(function (){
            //body内の要素を探す
            $('.fadein').each(function(){
                //位置を取得
                var pos = $(this).offset().top;
                //スクロール値を取得
                var scroll = $(window).scrollTop();
                //ウインドウの高さを取得
                var windowHeight = $(window).height();
                //条件を満たしたら要素にクラスをつける。
                if (scroll > pos - windowHeight + 200){
                    $(this).addClass('on');
                }
            });
        });
    });

    css

    .fadein{
        opacity: 0;
    }
    .on{
        opacity: 0;
        animation: fadein 2s ease 0s 1 forwards;
    }
    @keyframes fadein {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
      }

    スクロールしたらクラスを追加するプログラムです。
    発動タイミングは、数値をいじったり、アニメーションに関してはCSSの数字をいじって調節してください。

  • qtranslate‑xt を wp バージョン5以上で使う

    新エディター 「Gutenberg」だと使い方がよくわからなくなってしまっています。
    きっとそのうち開発者の方が対応してくれるものと思いますが、とりあえす旧エディタの見た目に戻して使いましょう。

    旧エディタはプラグインとして提供されています。
    Classic Editor
    プラグインを入れて有効化すればOKです!

    https://ja.wordpress.org/plugins/classic-editor/
  • そーいえば、 Bing web マスター ツール ってのもあったよね。登録方法

     https://www.bing.com/toolbox/webmaster/?cc=jp

    Googleアカウントでもログイン(サインアップ)できます。

    サイトのURLを入力したら、サイトマップ登録したり、自分の情報を入力していきます。

    所有者の確認

    wordpressサイトの場合は、All in one seo packから値を入力しておけばOKです。
    ほかの認証方法も、Googleとそんなに変わらないですね。

    とりあえずサイトマップの送信だけしてみました。
    効果あるかはまたレポートしたいと思います。

  • local by flywheelがMojaveで動かない・・・な時の対策

    調べたら、「virtual box」をアップデートすればいいよっていう解決策が出てくる。
    しかし、local by flywheelにはアップデート機能がついているのだ・・・。

    環境設定を変えよう

    環境設定 >  セキュリティとプライバシー

    このへんにoracleみたいな表示が出てたら許可してあげてください。
    それで多分動くようになります。

    virtual boxがインストールできないよーと、お悩みの方もここを許可で解決すると思います。

  • 最近本を出版した人にKDPをおすすめしてあげた話。

    最近、詩の本を出版した知り合いがいまして、出版社通してamazon等に出版してるみたいでした。

    自分でkindleに電子書籍出さないの?と聞いたら、なにそれそんなことできるの?みたいな反応でした。

    しかもよくよく聞いてみたら、indesignのデータは自分で作ってるらしい。

    じゃあ、(電子書籍だけでいいなら)自分で出してもいいんじゃない?
    ということで、KDP出版の最初の方をためしてみました。

    KDPのアカウントをとろう

     https://kdp.amazon.co.jp/ja_JP/
    ここでとれます。
    住所など必要な情報を入れましょう。

    納税情報を入れよう

    米国の納税の申請書みたいのを作るために、いろんな情報提供を求められます。

    ここで問題になるのがTINです。
    外国(米国以外)を持ってない、でTINが発行されてないとするのを進めているのと、
    マイナンバーを入力するのをオススメしている記事があります。

    マイナンバーは納税者番号ではない?

    この辺は明確にはならなかったです。

    あとはEPUBを作成するだけ!

    電子書籍はページの概念がないので目次のページを消して、リンクを貼る必要があります。

  • モニターを机に置くと狭い問題を解消した話。

    地味に悩んでいたこと

    モニターをデスクの上に置くと、様々な悩みが生じる。

    • 奥行きが狭くなって、キーボードが近い。肩が凝る。
    • もう少しスペースがあったらメモ書くとき楽なのに。
    • モニターが近くて目が悪くなりそう。目が疲れる。
    • モニターの位置が低い。

    ゲームをするにも仕事をするにもこのままでは辛い。
    そこで、いろいろ解決策を探していたらすごくいいものに出会ってしまったのでご紹介します。

    解決アイテム その名も『エクステンションデスク』

    百聞は一見に如かず。

    どういうふうに使うかというと、下のような感じ↓

    キーボードが近い問題を解消

    モニターを奥に置くことができるようになるので、キーボードが近くて作業し辛い問題が解消されます。私は肩こりや腕のだるさがだいぶ良くなりました。快適。

    また、手前にスペースができるので、メモ書きをしたいときや、家用キーボードを置くことができます。

    モニターが近い問題を解消

    目とモニターの距離が離れ、私は目の疲れが少なくなりました。本当にこれでかい。目が悪くなる速度が緩やかになった気がする。

    モニターが低い問題を解消

    作業デスクがよくある70cmくらいの高さであれば、それよりも少し高くできます。
    これによって正面を向いて目線のみ少し下を向けるので、首や目に負担がかかりづらくなります。
    私は特に背中の凝りにすごく効果が出ました。作業中に猫背になりにくいのがいいのかもしれません。

    私のデスクの高さは70cm、エクステンションデスクは80cmの高さにしてあります。

    ついでにスピーカーも置ける

    意外と場所をとるスピーカーもこれですっきり。

    >>Bauhutte (バウヒュッテ) 昇降式 拡張デスク エクステンションデスク ケーブル収納 BHC-1200H-BK

    各箇所のサイズ

    私はPC、ゲーム機、ルーター等、エクステンションデスクの下に収納したいものがあったのですが、サイズ情報が不十分で困ったので、これから買う方のためにまとめておきます。参考までにどうぞ。

    Amazonの画像や説明にある部分は基本的に測ってません。気が向いたら追記するかも。

    容量

    下の図の各棚に収まる直方体のサイズを図りました。ネジや金具、パイプには接触しない、リアルに使えるサイズです。

    ちなみに棚の高さは変えられるらしいんですが、説明書通りに組み立てた場合のものです。

    A:横幅845mm×高さ140mm×奥行185mm

    B:横幅845mm×高さ345mm×奥行185mm

    C:横幅845mm×高さ212mm×奥行185mm

    パンチング板の穴、穴間の距離

    百均やハンズで買ったなにかと組み合わせたい方もいると思いますので、測りました。

    1箇所しか図っていません。穴毎に誤差があるかもしれませんので、そこはご容赦を。

    穴:縦5mm×横5mm

    穴間:縦10mm×横10mm

    天板の厚さ

    基本的にそんな特殊な厚さではありませんが、モニターアーム等を使いたい人にとっては念の為知っておきたいところかと思い、測りました。

    天板の厚さ:21mm

    レビューにある組み立てられない問題

    Amazonのレビューに「天板のネジ穴の位置が合わないから組み立てられない」的なのがありあります。

    おそらく、説明書通りの手順で組み立てた人のほとんどが同じ状況になると思います。

    足と足を水平につなぐパイプを取り付けてから天板をつける手順なのですが、このとき、天板の穴と足につけるネジの位置が合わない問題が発生します。

    こうやったらうまく組み立てられた

    1. 足と足を水平につなぐパイプすべてを、少しずつゆるめてください。
    2. あら不思議!天板と足のネジの位置が合わせられます。足と天板を固定してください。
    3. 最後に『1』でゆるめたパイプのネジをしっかりとしめてください。
    4. 説明書の手順に戻って完成まで組み立て。

    『2』でうまくいかない場合は、もう少しずつゆるめてみてください。ただし、不安定になるので破損や怪我に十分に注意してください。あくまで自己責任でお願いします。

    私はこの組み立て方の”コツ”でどうにかなりましたが、本当に初期不良品の場合は交換してもらってくださいね。

  • Windows Subsystem for Linux を使おう

    windowsでgitbashなどを使うとlinuxのbashらしきものが使えるけれど、厳密には違います。

    sudo できないとか、シェルコマンドを使うものは動かなかったりするとか。
    そんなときにwindowsにubuntuなんかをインストールして使う仕組みがあります。
    Windows Subsystem for Linux です。

    よくわからないけど、仮想環境とは違うみたい。

    WSLと略す。

    入れよう。

    開発機能を有効にして、windowsストアからインストールします。
    詳しく書いてある記事を参考にしてください。

     https://www.buildinsider.net/enterprise/wsl/01

    npmがつかえない・・・?

    ubuntuいれたら、apt-getで簡単にnodeをインストール!ができなかったんですよね。
    いじってたらインストールできたんですが、原因がよくわからない。
    windowsの方のnodeが入ってなかったせいっぽい?

    windowsなんだか、lunuxなんだかよくわからなくなるので正直あまりいいものではないですね。
    デスクトップをLinuxにしちゃおうかな。
    デュアルブート。

    VScodeからつかおう

    windowsとの繋がりがよくわからないのでルートのフォルダがどこにあるのかいまいちわからない・・・。
    VScodeの設定を変えて、Windows Subsystem for Linuxのターミナルが立ち上がるようにしてやると、いつもの感じで使えるのでとてもよいです。

    以下記事を参考に
    https://qiita.com/m_zuma/items/6b2ee25001109a6506c4

    Puppeteerについて

    普通に使うと動きません。
    多分ですが、一緒に「chromium-browser」モジュールも入れると動くっぽい。
    headressはtrueでないとエラーになります。

    windowsで普通に使うと動くのに、微妙に動きが変わってしんどい。
    でもaptが使えるのは便利。記事がいっぱいあるからね。

    よみあげについて

    nodeの「node-openjtalk」が動かなかったんです。windowsで。
    で、デフォルトの読み上げを使ってみたんですが、しょぼしょぼでやる気がなくなるほどでした。
    WSLでは動いたのでよかったです。


  • node.jsでzip圧縮

    https://logzitsu.tlog.work/puppeteer-%E3%81%A7%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%8B%E3%82%89%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89/

    上記記事を書いた時に気になったので調べてみました。

    archiver ってモジュールがあるみたいです。

    詳しくはこちらの記事を参照

    Scratchpad@usagi1975.com 
    https://www.usagi1975.com/10dec150717/

  • puppeteer でフォームからファイルのアップロード

    フォームからアップロード処理できたら便利だなー
    っと思ってたらちゃんとありました!

    以下は宅ふぁいる便に「image.zip」をアップロードするプログラムです。
    メール送信のところを使うと、「ファイルをアップロードしてメルアドに送信」というところまで自動化できちゃいます。
    consoleにアップロード先が表示されます。

    注意 : このコード宅ふぁいる便に迷惑かけないように配慮して使ってください

    const puppeteer = require('puppeteer');
    
    (async () => {
        const browser = await puppeteer.launch({ 
            args: ['--no-sandbox'],
            headless:false
         });
        const page = await browser.newPage();
        await page.goto('https://free.filesend.to/fileup_free2');
    
        const filePath = "image.zip";
        const input = await page.$('input[name="files[]"]');
        await input.uploadFile(filePath);
    
        //同意にチェック
        //利用規約ちゃんと読んでね。
        await page.click('#safefilechk');
    
        //送信ボタン(確認画面へ)
        await page.click('#uploadbtn > p.btn_fileup > a');
    
        await page.waitFor(2000);
        //確認送信ボタン
        await page.click('#uploadbtn > p > a');
    
        await page.waitFor(2000);
        var uploadinput  = await page.$("#input_dl_url");
        uploadurl = await page.evaluate(content => content.value, uploadinput);
        console.log(uploadurl);
        
        await browser.close();
    })();

    「xxx.uploadFile」の部分です
    最強かな?

  • 続:ラズパイで動画作成。node.jsで楽する

    https://logzitsu.tlog.work/%E5%BE%B9%E5%BA%95%E6%A4%9C%E8%A8%BC-%E3%83%A9%E3%82%BA%E3%83%91%E3%82%A4%E3%81%A7%E5%8B%95%E7%94%BB%E3%81%AF%E4%BD%9C%E3%82%8C%E3%82%8B%E3%81%8B%EF%BC%9F/

    前回の記事はこちら。

    シェルコマンドばっかなんですけど、できればnode.jsでまとめたいなぁ、という要望が出てきたのでまとめてみたいと思います。

    この記事って、誰かの役に立つことあるんだろうか。
    でも、記事にしないと勉強のモチベーションが保てないし、忘れやすいんですよね。

    ということで、これをみている奇特なかた、お付き合いください。

    Nodeからffmpegを使ってみる。

    http://tkybpp.hatenablog.com/entry/2016/04/25/163246

    この辺から使っていけばいいと思うのですが、最初に仕組み等もろもろを整頓しておこうと思います。

    事前に用意しておくもの

    • スライド画像数枚
    • それぞれに対応したテキスト

    意外と用意しておくものは少なくてすみますね。

    1. テキストから音声ファイルを作成する(複数)
    2. スライド画像を指定秒数の動画にする(複数)
    3. 動画と音声をくっつける(複数)
    4. 全部の動画をくっつける

    このような流れになります。
    テキストと音声ファイルをどう整理して関連付けていくかが問題ですね。

    ファイル名を決める

    とりあえず結合ファイル名と、結合前のリストのルールなど決めます。

    読み上げテキストファイル名
    voice_01.txt , voice_02.txt・・・
    音声ファイル名
    voice_01.wav , voice_02.wav・・・
    画像名
    frame_01.png , frame_02.png・・・・
    動画名(音無し)
    frame_01.mp4 , frame_01.mp4・・・
    動画名(音有り)
    video_01.mp4 , video_01.mp4・・・

    mylist.txt

    file video_01.mp4
    file video_02.mp4
    file video_03.mp4
    file video_04.mp4

    最終的なファイル名は
    output.mp4
    にしたいと思います。

    こうなりました

    voice.js

    var OpenJTalk = require('openjtalk');
    var fs = require('fs');
    var mei = new OpenJTalk();
    var list = [
        "voice_01",
        "voice_02",
        "voice_03"
    ]
    var i = 0;
    
    setInterval(loop,10000);
    
    function loop(){
        if(i < list.length){
        var text = fs.readFileSync("./" + list[i] + ".txt","utf-8");
        mei.talk(text,200);
        //process.exit(1);
        readdir("./",list[i]);
        i++
        }else{
            process.exit(1);
        }
      }
    
    function readdir(dir,file) {
        setTimeout(function(){
        fs.readdir(dir, function (err, files) {
          if (err) {
              throw err;
          }
          for(let i = 0; i < files.length; i++) {
            var result = files[i].match( /.wav$/ );
            if(result != null ){
                console.log(result.input);
                fs.copyFile(result.input, './tmp/' + file + '.wav', (err) => {
                    if (err) {
                        console.log(err.stack);
                    }
                    else {
                        console.log('Done.');
                    }
                });
            }
          }
        });
    },700);
      }

    makevideo.js

    const exec = require('child_process').exec;
    const fs = require('fs');
    var f_voice_txt = [
        'voice_01.txt',
        'voice_02.txt',
        'voice_03.txt'
    ];
    var time = "00:00:10";
    var f_voice_wav = [
        './tmp/voice_01.wav',
        './tmp/voice_02.wav',
        './tmp/voice_03.wav'
    ];
    var f_png = [
        'frame_01.png',
        'frame_02.png',
        'frame_03.png'
    ];
    var f_movie = [
        './tmp/frame_01.mp4',
        './tmp/frame_02.mp4',
        './tmp/frame_03.mp4'
    ];
    var f_movie_v = [
        'video_01.mp4',
        'video_02.mp4',
        'video_03.mp4'
    ];
    var output = "output.mp4";
    
    require('date-utils');
    var dt = new Date();
    var dtformatted = dt.toFormat("YYYYMMDDHH24MISS");
    
    //画像を動画にする
    for (let i = 0; i < f_png.length; i++) {
        exec('ffmpeg -f image2 -r 1 -loop 1 -t ' + time + ' -i ' + f_png[i] + ' ' + f_movie[i], (err, stdout, stderr) => {
        if (err) { console.log(err); }
        console.log(stdout);
        });
    };
    
    //動画と音をくっつける
    for (let i = 0; i < f_movie.length; i++) {
        exec('ffmpeg -i ' + f_movie[i] + ' -i ' + f_voice_wav[i] + '  -c:a aac -map 0:v:0 -map 1:a:0 ' + f_movie_v[i], (err, stdout, stderr) => {
        if (err) { console.log(err); }
        console.log(stdout);
        });
    };
    
    //動画の結合
    for (let i = 0; i < f_movie.length; i++) {
        f_movie_v[i] = "file " + f_movie_v[i];
    };
    var f_movie_v_j = f_movie_v.join("\n");
    fs.writeFileSync("./tmp/movie_list.txt", f_movie_v_j);
    console.log(f_movie_v_j);
    
    //動画の結合
    fs.mkdir(dtformatted, function (err) {});
    exec('ffmpeg -f concat -i ./tmp/movie_list.txt -c:v copy ' + "./" + dtformatted + "/" + output, (err, stdout, stderr) => {
    //process.exit(1);
    if (err) { console.log(err); }
    console.log(stdout);
    });

    音声は10秒ごとに発音、発音してる間にwavファイルをコピーするやり方にしました。
    あんまり美しくないけど、とりあえず動くからいいや。
    動画作成の方はシェルコマンドをファイル分やるように加工。
    ニッチすぎるけど公開しておきます。

    videoを作る方は、一発でちゃんと動いてるかよくわからない。
    もしかしたらちゃんとタイミングを設定してあげないとダメかも。

  • 4kのねこです

    ねこです

    よろしくおねがいします

    ねこはいます

    SCP-040-JP

    https://logzitsu.tlog.work/%E5%BE%B9%E5%BA%95%E6%A4%9C%E8%A8%BC-%E3%83%A9%E3%82%BA%E3%83%91%E3%82%A4%E3%81%A7%E5%8B%95%E7%94%BB%E3%81%AF%E4%BD%9C%E3%82%8C%E3%82%8B%E3%81%8B%EF%BC%9F/

    これで猫の動画を作って思い出したんで作ってみました。
    こえーんだけどって思った人は正解です。

    元ネタを調べてください。(収容違反)

    4kです

  • 徹底検証 : ラズパイで動画は作れるか?

    ラズパイで動画を作りたいことってありますよね?

    ないと思うけど、そんなこと思うことありますよね?

    ・・・ふと、思いついたことがあったので
    どれぐらいのことができるのか検証してみようと思いました。

    どうやって作る?

    GUIで作るのはかなりきついとおもいますので、シェルコマンドによって動画作成してみたいと思います。

    作る動画は、紙芝居的なものにナレーションをつけてみたいと思います。
    ナレーションは読み上げで作成を試します。
    スライドの画像素材は普通のPCで作って用意します。

    • 素材を結合しgifアニメーションの作成
    • 読み上げ音声データの作成
    • 音声とgifアニメを結合し動画データに

    こんなのを想定していますが、できるかなー?

    まずはMacで試す

    ラズパイでいきなり試すと辛いので、まず普通に試します。

    Gifアニメを作る

    movieというフォルダに次の画像を入れます。

    こんな感じの猫の素材を、frame_01.jpg・・・と連番でフォルダに入れます。

    imagemagickをインストールします。

    $ brew install imagemagick

    これで convert コマンドが使えるようになりました。

    $ convert -delay 500 0 frame_*.jpg movie.gif

    5秒切り替えのスライドショーができるはず。

    読み上げ音声を作ってみる

    どうやら、openjtalkという良いものがあるらしいので使わせてもらう。
    nodeで使いやすくしてある、node-openjtalkというものがあるのでこれを使う

    インストール

    $ npm install openjtalk

    読み上げ用のものらしく、音声ファイルがつど削除される仕様になっていた。
    それは困る。処理を途中で止めると音声ファイルは残るみたいなので使わせてもらう。

    適当な読み上げ用の テキストをファイルも作っておいてください。(text.txt)

    voice.js

    var OpenJTalk = require('openjtalk');
    var fs = require('fs');
    var mei = new OpenJTalk();
    var text = fs.readFileSync("./text.txt","utf-8");
    mei.talk(text,200);
    process.exit(1);

    file.js
    wavを探して、名前をvoice.wavに変えます。
    必要な複数の音声ファイルがあるところで実行すると危険です。消えます。
    法則性がないファイル名だったのでこんなことをしてます。
    いろいろ自動化したいという思いでこのプログラム作りましたが、普通は手動でリネームしてください。

    var fs = require('fs');
    
    readdir("./");
    function readdir(dir) {
        fs.readdir(dir, function (err, files) {
          if (err) {
              throw err;
          }
          console.log(files);
          for(let i = 0; i < files.length; i++) {
            var result = files[i].match( /.wav$/ );
            if(result != null ){
                console.log(result.input);
                fs.rename(result.input, 'voice.wav', function (err) {
                });
            }
          }
        });
      }
    

    音声と、gifアニメができました。

    結合して動画を作成する

    まずffmpegをインストールします。

    $ brew install ffmpeg

    結合するコマンド

    ffmpeg -i movie.gif -i voice.wav  -c:a aac -map 0:v:0 -map 1:a:0 output.mp4

    -i がソースとなるファイル名で、最後が出力されるファイル名。
    とりあえずできたっぽいです。
    quicktimeでは再生できませんでしたが、ブラウザでは再生されます。

    youtubeにアップしました。
    音声とgifアニメの長さが異なるのでシークバーがバグっとる
    ※サイコなので閲覧注意

    https://www.youtube.com/watch?v=hOTZsOYZcuM

    といった感じでとりあえず動画ができました(?)
    実際に使うには音声の秒数調節とかが難しそうだなぁ。

    ラズパイで試す

    ラズパイにubuntuが乗ってるのでapt-getとかでいろいろ入れてく。

    imagemagick

    $ sudo apt-get -y install imagemagick

    ffmpeg

    $ sudo add-apt-repository ppa:jonathonf/ffmpeg-4
    $ sudo apt update
    $ sudo apt-get install ffmpeg
    
    //入ったかチェック
    $ ffmpeg -version

    node-openjtalk

    $ npm install openjtalk

    pngのフレーム画像を入れて、gif作成

    $ convert -delay 500 frame_*.png movie.gif

    音声ファイル作成

    $ node voice.js
    $ node file.js

    合成

    ffmpeg -i movie.gif -i voice.wav  -c:a aac -map 0:v:0 -map 1:a:0 output.mp4

    こんな感じです。超稚拙ですが、処理は全然重くないし、工夫を加えていけば紙芝居的な画像は作れちゃいそうです。

    改善版!を考えてみる

    どうやらffmpegで動画が結合できるみたいので、紙芝居の結合はそっちに任せたいと思います。
    いめーじまじっく不要。画像をいきなり動画に変えます。
    そうなると

    • 画像を動画に変換(表示秒数の調整)
    • 音声をその画像に載せる(mp4化)
    • それを紙芝居分作成する。
    • 最後に結合する

    こんな流れですね。まずはとりあえずやってみよ。

    画像を動画にする

    $ ffmpeg -f image2 -r 1 -loop 1 -t 00:00:10 -i frame_01.jpg video01.mp4

    動画にした画像に音声を合成

    $ ffmpeg -i video01.mp4 -i voice.wav  -c:a aac -map 0:v:0 -map 1:a:0 v_01.mp4

    これをフレーム分、作ります。

    動画の後に動画をつなげる・・・な感じで結合する

    まず、結合する動画のファイル一覧をテキストファイルにします。

    maylist.txt

    file v_01.mp4
    file v_02.mp4
    file v_03.mp4

    結合コマンド

    ffmpeg -f concat -i mylist.txt  -c:v copy output.mp4

    できた動画はブラウザだと音声が繋がっておかしかったのですが、youtubeにアップしたら想定した感じになりました。

    じつは1080pです。
    macで作りましたが、全然処理が重たいとかないのでラズパイでも問題ないでしょう。

    ちょっと声が低い方が好みだなぁと思うのであとで調整します。
    あ、個人的な話でした。
    ちょっと記事が長くなってだるくなってきたのでわけます。

    この記事の結論

    全然できる!!!!!!11111

    https://logzitsu.tlog.work/%E7%B6%9A%EF%BC%9A%E3%83%A9%E3%82%BA%E3%83%91%E3%82%A4%E3%81%A7%E5%8B%95%E7%94%BB%E4%BD%9C%E6%88%90%E3%80%82node-js%E3%81%A7%E6%A5%BD%E3%81%99%E3%82%8B/
  • スマブラSPが待ちきれなかったのでamiiboを先に購入したよ

    きっかけはサイバーマンデー

    アマゾンのサイバーマンデーのニュースが耳に入ったので、ざっと確認していると…なんとスマブラのamiibo 63種セットが…!

    a
    https://amzn.to/2R48O7v

    こんなにいらねぇ…

    しかも、ファルコとかいねぇ。
    というわけで、欲しいキャラのみ購入することにしました。

    まずは前作で使い倒したソニック

    amiibo ソニック (大乱闘スマッシュブラザーズシリーズ)

    ソニックとの出会いは小さい頃に友達のお兄ちゃんのネオジオポケット。同じ横スクロールゲーのスーパーマリオブラザーズよりなんかすごくイケテルッ!!って思って虜になりました。

    それから月日は流れ、スマブラに参戦。もうソニックばっかり使ってました。

    かわいいからピクミン&オリマー

    amiibo ピクミン&オリマー (大乱闘スマッシュブラザーズシリーズ)M

    前作では2番手くらいで使ってました。私は人にやらせるほうが好きな性格なので、横Bのとりつかせるやつが地味に好きで。あとスマッシュのリーチの長さも魅力的。

    でも買った理由はかわいいから。

    ※ここに撮影画像各角度

    あとは持ってるSplatoon系amiiboで

    なんとSPはインクリングも参戦。Splatoon2用に買った子たちも使えるそうなので、一旦購入は上記2体にして、お気に入りのキャラが出てきたら買おうと思います。ポケモントレーナーとか買いそう。

    皆さんはどのキャラを使いますか??

  • fsでファイルを作成する

    単純ですがよく使うのでメモ。
    全機能の説明とかではなく、よく使うものをメモっています。

    ファイルを作成する場合

    const fs = require('fs');
    
    //ファイル名
    const filePath = "text.txt"
    const contents = "このテキストが保存したいでーす"
    
    fs.writeFileSync(filePath, contents);

    以上です。説明がいらんくらいシンプルですね。

    読み込む場合

    var fs = require('fs');
    
    var text = fs.readFileSync("./text.txt","utf-8");
    console.log(text);

    かんたんだぁー

    コピーしたい

    fs.copyFile("moto.txt", './saki/moto.txt');

    移動したい(リネーム)

    fs.renameSync("moto.txt", './saki/moto.txt');

    ディレクトリ作りたい

    fs.mkdir("tmp", function (err) {});
  • puppeteer すぐ使える取得例

    いろんな記事見ても、うーむわからん!取得できん!
    となって、うまく動かないことが多かったので、試行錯誤の末とりあえず動いた例をここにおいておきます。

    リストが並んでてそこから情報を取り出したい
    ということが多いと思いますが、そういったときにだいたい使えると思います。

    はてなブックマークの人気エントリーのリストから取り出す

    そんな例です。ブックマーク数、タイトル、URLを抜き出して配列にしています。
    コンソールに、結合してから出力しています。

    
    const puppeteer = require('puppeteer');
    
    (async () => {
        const browser = await puppeteer.launch({ 
            //executablePath: '/usr/bin/chromium-browser',
            args: ['--no-sandbox'],
            //見えるようにfalseにしたけど本番はtrueにしてね
            headless:false
        });
    
        //配列を作る
        var text = [];
        
        const page = await browser.newPage();
        await page.goto('http://b.hatena.ne.jp/hotentry/all',{ waitUntil: 'domcontentloaded' });
        //await page.waitFor(2000);
    
        //情報を取り出したい同列に並んでいる要素(liとかが多い)
        const items = await page.$$('#container > div.wrapper > div > div.entrylist-main > section > ul > li > div > div.entrylist-contents-main');
    
        //取り出したい内容のselectorをなんとかして選ぶ
        const inner1 = await page.$$('#container > div.wrapper > div > div.entrylist-main > section > ul > li > div > div.entrylist-contents-main > h3 > a');
        const inner2 = await page.$$('#container > div.wrapper > div > div.entrylist-main > section > ul > li > div > div.entrylist-contents-main > span > a');
        
        //要素分ループを回す
        for (let i = 0; i < items.length; i++) {
            //取得
            const text1 = await page.evaluate(content => content.innerText, inner1[i]);
            const text2 = await page.evaluate(content => content.innerText, inner2[i]);
            const text3 = await page.evaluate(content => content.href, inner2[i]);
            //配列に追加していく
            text.push( text1 + " 【" + text2 + "】\n" + text3 + "\n"); 
        }
    
        //配列を全て結合
        text = text.join("");
    
        //結合した配列を出力
        console.log(text);
    
        await browser.close();
    })();

    itemsが並んでる要素。
    innerが取り出したい中身です。上記の図でわかるでしょうか。

    こういうパターンもありますね。赤が「items」青が「inner」になります。

    セレクターをうまく取り出す方法

    セレクターがうまく指定できてないことが動かない原因であることが多いです。
    デベロッパーツールでセレクターを取得する方法です。

    chromeのデベロッパーツールを開き、その要素の上で右クリック。
    Copy > Copy selector と選ぶとその場所のセレクターがコピーできます。
    どこかにペーストしてください。

    #container > div.wrapper > div > div.entrylist-main > section > ul > li:nth-child(1) > div > div.entrylist-contents-main > span > a

    こんな感じになります。「何個め」を表す:nth-child はループさせるときに邪魔になるので

    #container > div.wrapper > div > div.entrylist-main > section > ul > li > div > div.entrylist-contents-main > span > a

    このように少し削除して上記のサンプルでは利用しています。

    まとめ

    スクレイピングは元サイトに迷惑をかけないようマナーを守ってやりましょう!
    訴えられた例もあるので注意してね。 https://ja.wikipedia.org/wiki/%E5%B2%A1%E5%B4%8E%E5%B8%82%E7%AB%8B%E4%B8%AD%E5%A4%AE%E5%9B%B3%E6%9B%B8%E9%A4%A8%E4%BA%8B%E4%BB%B6


  • Node.js で チャットワークにメッセージを送る

    参考にしました。

    https://qiita.com/dokkoisho/items/f95bbe96fe4bd7312f40

    APIを設定

    まずトークンを発行してください

    https://www.chatwork.com/service/packages/chatwork/subpackages/api/token.php

    ルームID

    部屋のridxxxxxxxの数字の部分です。
    送りたい場所のものを控えておいてください。

    コード

    request を使うのでインストール。

    $ sudo npm install request

    message.js

    const request = require('request');
    const room_id = "xxxxxxxxxxx"; //メッセージを送りたいchatのURL末の番号(数字部分のみ)
    const apiToken = "xxxxxxxxxxxxxxxxxxxxx"; //APIトークン
    
    /* IDの情報取得に利用
    function getInfo(){
        const options = {
            url:"https://api.chatwork.com/v2/me",
            headers:{
                "X-ChatWorkToken":apiToken
            }
        }
        function callbackFuc(error, res, body){
            //res(HTTPレスポンスヘッダ)
            //body(HTTPレスポンスボディ) jsonで返される
            res.statusCode == 200 ? console.log(body) : console.log('error: ' + error + '\nresponseCode: ' + res.statusCode);
        }
        request.get(options,callbackFuc);
    }
    getInfo();
    */
    
    //メッセージの送信
    function sendToMychat(){
        const options = {
            url:"https://api.chatwork.com/v2/rooms/" + room_id + "/messages",
            headers:{
                "X-ChatWorkToken":apiToken
            },
            form:{
                body:"メッセージ送信テストです"
            }
        }
        function callbackFuc(error, res, body){
            res.statusCode == 200 ? console.log(body) : console.log('error: ' + error + '\nresponseCode: ' + res.statusCode);
        }
        request.post(options,callbackFuc);
    }
    sendToMychat();

    実行

    $ node message.js

    puppeteerで取得してきた情報をチャットワークに出力するのもいいかもしれませんね。

    https://logzitsu.tlog.work/headless-chrome/