サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Switch 2
www.sho-yamane.me
Vue.js + Nuxt.js + GraphCMSでSSRブログ生活 先日、Vue.js + Nuxt.js + GraphCMSでブログリニューアルしました！って記事を公開したのですが、GraphCMSが気になる！っていう声がチラホラ聞こえたのでGraphCMSの使い方をVue.js + Nuxt.jsで使う際の注意点をまとめて見ようかなと思います。対象としてはVue.jsとNuxt.jsは触ったことあるよ〜という人向けに書いてますのでご了承ください。 DEMO https://explorer-combs-21111.netlify.com/blog/1/ サーバーはNetlifyにデプロイしていますが、いちおうGTMatrix評価では100点です。 GraphCMSのメリット、デメリット GraphCMSを使ってて感じたメリットデメリットを箇条書きしてみたいなと思います。 メリッ
Vue.js + Nuxt.js + GraphCMSでHPリニューアルしました 今年2回目となりますが、HPをリニューアルしました。以前は普通にWordPressで作ってたんですが、Nuxt.jsがV1のRCリリースされてたので本格的に触ってたら題材がないのでHP作り変えるかって感じですね。 Nuxt.jsはVue.jsで作ったSPAをSSR（サーバサイドレンダリング）してくれるやつで大変便利なのですが、サーバーサイドというかnode.jsでゴニョゴニョやってるところもあるみたいでそのへん意識してコード書かないといけないので最初は理解が大変でした。ググっても情報も少ないのでGithubで色んなひとのコードを貪るように読みました。 せっかくなのでサーバーレスでいきたいのとCMSどうするかというところで色んなサービス触ったのでその辺の選定を書いてみたいと思います。Vue.js + Nuxt.
知っている方も多いかもしれませんが、7月あたりにWP公式テーマの作成をしていました。その作っているテーマがWP公式ディレクトリーに公開されてたのでそのへんの作成経緯とご紹介です。 GildRest – Free WordPress Themes 作成経緯 本当はWPのプラグインにてとある機能を提供したかっただけなのですが、それなら母体となるテーマも必要になってくるのでまあ作ってみるかというような感じで作成開始しました。 そのプラグイン機能は現在開発中で、隙間時間をみつけてちょこちょこ作成していってます。 テーマ名 前半のGildが僕の屋号です。ちなみにギルドというとアジトみたいなのを想像されるのですが、「彩る」って意味です。 後半のRestが「Restaurant」の略称です。飲食店向けテーマなのでわかりやすく直球でつけました。 テーマの機能面 巷ではカスタマイザーで色々カスタマイズできる
まず前置きとしてPWAを否定するものではございませんのでご了承のほどをお願い致します。総括するとまだ時期が早いと思ったので、実装の対応をやめる方向にしました。 WordPressでのPWAの対応方法 PWAの実装はAMP関係なしにできるのですが、AMPと連携させてより効果を発揮させる方法として以下の3つのアプローチがあります。 AMP as PWA = AMPページでPWAを提供する AMP to PWA = 検索経由でAMPページを表示して後、PWAを提供する AMP in PWA = PWAをAMPで実装する 私の個人的な所感ですが、すでにある既存サイトをできるだけ工数をかけずにPWA対応するなら「AMP to PWA」が一番良いのかなと思いました。 で、その実装方法は以下の記事を参考にしました。 脱ネイティブ！Googleが推進する「PWA」にたった数時間で対応する方法 上記の方法を
以前の案件でcanvas周りの経験がなかったので人に部分的にコーディングをお願いすることがあってちょっと悔しい思いをしました。以後、canvasを使ったアニメーションがあった場合、自分の力でやりたいのでcanvasアニメーションの勉強をしました。 canvasを使ったアニメーションのやり方 ざっくりいうとそのままJavaScriptでゴリゴリ書いてしまうか、「CreateJS」「PixiJS」のcanvasアニメーションのフレームワークどちらかを使って書くかなのですが、フレームワークに沿って書いたほうが楽なので、「CreateJS」「PixiJS」のどちらを使おうか検討しました。 HTML5 CanvasとWebGLの使い分け 上記の記事によると両者ともにメリット・デメリットがあるようなのですが、今回は パーティクル描画が得意な「PixiJS」 よりも グラフィック描画が得意な「Creat
今回、Vue.js + Nuxt.jsの勉強ということで何か作りたいなと思っていたところ、HP作ってみるかと思ったので早速やってみました。どんな感じか早速見てもらったほうが早いと思うので以下のリンクをご覧下さい。（スマホ対応はしていません。） DEMO なぜVue.js + Nuxt.jsでHPを作るのか？ Vue.jsが流行りで勉強目的だったのですが、jQueryでごにょごにょやっていたところがとても楽にできます。コンタクトフォームのバリデーションやポップアップ、ツールチップ、ページ遷移アニメーションなどなどです。 Nuxt.jsを使うことによりある程度サーバーでレンダリングもやってくれますので、SEO対策にも良さそうです。またルーティングなども自動でやってくれますのでコンポーネントを作ることに注力できます。 Vue.js + Nuxt.jsでHPを作った感想 メリット Element
つい最近発売されたReactビギナーズガイドを一通りやってみました。最後のFluxはReduxの勉強をする予定だったので頭が混んがらないようにあえてやってません。 目次と概要 1章 Hello world 2章 コンポーネントのライフサイクル 3章 ：高機能な表コンポーネント 4章 JSX 5章 開発環境のセットアップ 6章 アプリケーションのビルド 7章 品質チェック、型チェック、テスト、そして繰り返し 8章 Flux 1章~3章まではReactの構文などを学び、それを踏まえてWeb上で動くExcelを作ってみよう！というお話です。ES2015（ES6）の書き方が良くわかってないjQueryばっかり使ってた老害なので第1章から勉強になりました。 4章は3章で作ったExcelアプリケーションをJSXというReact独自の文法に書き換えてみよう！という内容です。 5章~7章は自分の端末に開
Nuxt.js 公式ドキュメント翻訳完了のお知らせと、結城浩さんへの謝辞 2017年3月26日にNuxt.jsの公式ドキュメントが日本語翻訳されたとのことなので早速触ってみました。日本語翻訳お疲れ様です。 Nuxt.jsとは？ Nuxt.js – ユニバーサル Vue.js アプリケーション “Vue.js をサーバーサイドレンダリングするアプリケーションを構築するアイディアが生まれました。すなわち Nuxt.js の誕生です。” 公式ドキュメントによると上記のように記載されていますが、サーバーサイドレンダリングがわからない方はちょっとわかりにくいかと思います。 サーバーサイドレンダリングとはJSなどを使ってブラウザ上で行っていたDOMの操作（HTMLの中身の操作）をサーバーで実行してから表示してしまいましょうということです。 Vue.jsやReact.jsを使ったことがあるかたならわかる
2014年の3月に京都に帰ってきたので3年経ちました。その前までは神奈川県川崎市→大阪吹田市に住んでました。京都でフリーランスというと聞こえが良いかもしれませんが何かとデメリットも多いと思います。その辺の話を書いてみようと思います。 仕事面 以下は京都でフリーランスをする仕事面でのメリットデメリットです。正直デメリットの方が多い気がします。ITで独立して大成したいのなら絶対東京に行くべきだと思います。 メリット 競合が多くないです。地方都市なのでIT化も遅れてますし、フリーランスのデザイナーやエンジニアも多くはありません。なので人海戦術で仕事を取っていくタイプはそれなりにちゃんとしたスキルがあれば、仕事は取りやすいかもしれません。 これは肌感覚なのですが、東京のエンジニアやデザイナーの方が能力が高い気がします。（もちろん地方でもすごい方はいらっしゃいますが）理由は求められるものが高いからと
ブログやメディアを運営されている方で、OGP画像の切り取りが微妙だな〜と思われたことはありませんか？ 当ブログでも失敗したのですがこのブログのアイキャッチを1200px × 900pxで作ってFacebookやTwitterなどでシェアすると上記のように失敗して表示されてしまいました。 このようなことがないようにOGP画像を作る際にTwitterやFacebookでどのように表示されるのか意識して作る必要があります。 FacebookやTwitterは画像が大きいと中央切り取りをする形で表示されるようなので簡単にPSDファイルを作ってみました。以下のような環境を想定しています。 Photoshopのスクショ WordPressのアイキャッチは4:3で表示 = 1200px × 900px FacebookのOGP = 1200px × 630px TwitterのOGP(Large) =
皆さん、Spotifyを使っていらっしゃいますでしょうか？自分はApple Music→AWA→Spotifyと流れてきましたが、Spotifyが一番使いやすくて気に入っております。 さてそのSpotifyですが、「Spotify – 音楽発見サービス」と謳ってることもあってとてもレコメンド機能が優れています。機械学習に力を入れてるということだそうです。 そのレコメンド機能ですが、ここ半年ぐらいSpotifyを使ってみて、自分の気に入った曲を発見する方法がわかってきたのでご紹介したいと思います。 PC用のアプリをインストール Spotify – 音楽発見サービス 2017年3月現在では、この方法はPCのSpotifyアプリのみできるようです。まずは上記のリンクよりSpotifyのPCアプリをダウンロードしてインストールしましょう。 自分の好きな曲でプレイリストを作る 手順は簡単です。まずは
みなさんはじめまして！「 筋肉 Advent Calendar 2016 」をこの度主催させていただいております山根と申します！京都在住のフリーランスWeb屋をやっています。 今回は シルバージム というブログを運営している@K-BOYと「筋肉 Advent Calendarやるぞー！！！！」となったので開催させていただきました。 トランプ政権となることが確定した以上、信じられるのは筋肉とバーベルだけです。参加されているみなさん何かのご縁ですのでこの機会に有意義な筋肉の情報交換をし、情報化社会を乗り切りましょう。 筋肉との馴れ初め この時代の流れの速いIT業界をサヴァイブするのに必要不可欠となっているスキルの一つが「筋肉」となっているのは議論の余地がない事実でございますが、誠に恥ずかしながら筋トレをするようになったのは約1年8ヶ月前のことです。 体たらくな生活をしていた私は体脂肪が24,2
こんばんわ、山根です。今回は以前からコツコツと作成していたWebサービスの公開する目処がついてきたのでご紹介します。 どんなサービスなのかざっくりいうと「Webサイトのネーミングライツ(命名権)を売買できるサービス」です。名前は「Named」。ティザーサイトは以下になります。 Named[ネームド] – ネーミングライツ(命名権)売買サイト ネーミングライツってなに？ ネーミングライツとは聞き慣れない言葉かもしれませんが、日本語に訳すと「命名権」のことです。とあるものに対して命名することができる権利です。 ネーミングライツ売買事例 とあるところに名前のない大きな建物がありました。その建物は京都の劇場として賑わいをみせていく予定です。ただし、名前がありません。そこで名前をつけてくれる人を募集しました。京都の大企業がその劇場を買う権利を買い取りました。50年契約で50億円です。その劇場は「ロー
g.o.a.tで書いた記事を自分のサイトのサイドバーなどに表示させるスクリプトを書きました。ついでにg.o.a.tのデザインに合わせたCSSも書いたので使いたい方は使って下さい。DEMOページというか自分のg.o.a.tの記事は以下のように表示されます。 g.o.a.tの新着記事一覧 ソースコード Javascript 以下のコードを必ず改変してから 内に貼り付けてください。改変するのは5行目と6行目です。 5行目：自分のブログのURLを貼り付けて下さい。 6行目：g.o.a.tのRSSのURLを貼り付けて下さい。RSSのURLはg.o.a.tの最下部右下にあるRSSのマークにあるリンクです。 7行目（任意）：表示させる記事数です。初期設定は10記事にしてあります。変更する場合はこの数字を変更してください。 右下のアイコンがRSSリンクです。リンク先のURLを6行目の例のように貼り付けて下
飲食店を経営されている方は レビューサイトやブログで悪評を書かれてしまい悩ましい 思いをされたことは多いのかなと思います。もちろん、本音のレビューはお客様からの叱責ですので悪いと思った点は受け入れるべきですが、今回はそのへんの論点は除きます。 テキストメインだとネガティブなことを書いてしまいがち 人間の習性と思うのですが、感想を文章に起こした場合、文字数の制限や表現の幅が広いために悪い点を云々かんぬん書いてしまいがちになります。 このブログ、レビューは「褒めてくれてるんだけど一言多いな」 とかよくありがちかと思います。 また、テキストだと客観的な内容に限らず、主観的に書かれがちなので、「まあ人によってはそうとらえられるけど、メインにしてるお客さんの層はそう思わないよ」みたいな感想が繰り広げられがちです。 例えば、スイーツのお店で中年男性が「このお店は肉料理が少ないので★2つ！」のような感想
結構会う人に「いつもどうやって過ごしてるんですか？」みたいなこと聞かれることが多くて、この人いつも何やってんだと思われてるんだなと感じたので書いてみようかなと思いました。 数ヶ月ごとに習慣変化してると思うんですけど2016年8月現在の1日のスケジュールです。また習慣が変わったらアップデートするかも。 スケジュール（円グラフ） 1日のタイムスケジュール スケジュール（詳細） フリーランス初めて昨年ぐらいまでは好き勝手にやってたんですが、色々スケジュールを固定して習慣化したほうがメリットあることに気づいてこのようなタイムスケジュールに現在のところ落ち着いてます。 起床して準備（6:30〜7:45） 木曜は休みにしてるので、それ以外は6:30に起きてます。起床後にシャワー浴びて、プロテインとバターコーヒー（シリコンバレー式の完全無欠コーヒー）飲んで外出の準備します。18時間固形物を食べないように
g.o.a.t 自分のタイムラインでは少々話題になってましたが、みなさん「g.o.a.t」はもう使われましたでしょうか？現在ベータ版公開で、事前申請を上げないと使用できないようですが、私の知り合いは朝に申請すると夕方には使えるようになったとおっしゃられてましたので先行登録してなくてもすぐ使えるようですね。 ちなみに私の「g.o.a.t」で作成したブログは以下になります。京都の写真ログとしてとりあえず使用してますので興味があればのぞいて下さい。また「g.o.a.t」のオフィシャルブログでも取り上げてくださったのでそちらのリンクも貼っておきます。 g.o.a.t from Kyoto Pick up Articles – g.o.a.t OFFICIAL 以下は3日感使ってみた感想です。とりあえず3記事ほどアップしました。 「g.o.a.t」でちょっと気になったところ 外部リンクのウィジェット
年齢を追うごとにインスタント食品が食べられないようになってきましたが、老いでしょうか。 それはさておき、掲題の件ですが、みなさんFacebookのInstant Articlesは対応しましたでしょうか。Instant Articlesがどのようなものかは以下の動画をご覧頂ければお分かりいただけるかと思います。 日本国内では、BuzzFeedJapanさんやLIGさんなどが対応されています。（以下のリンクはスマホのFBアプリで見てください。） BuzzFeedJapan LIG さて、WordPressで構築されたブログであれば比較的簡単にInstant Articlesに対応することができます。 WordPressでInstant Articlesの対応する方法 WordPressでInstant Articlesの対応する方法に関しましては以下の記事をご覧下さい。大変丁寧に説明されてお
天邪鬼なのでチェック項目があったら片っ端から反対のことをしたくなる性格なのですが、もう三十路の大人なのでそんなことも言ってられません。 さて、皆さん記事を書く際に自分ルールみたいなのを持っていたりしませんか？だけど、記事を書くのに必死になっていると自分を見失ってしまうことがよくありますよね。（あるのか？） そのために、今回はWordPressの投稿画面のサイドバーにチェック項目を入れる方法をご紹介したいと思います。 DEMO 右サイドバーに好きなチェック項目を入れることができます。 文章やチェック項目の数は自由に増やしたりできます。 コード ある程度、HTMLがわかる方向けに書いてますのでご了承ください。かといってfunction.phpにいかのコードを編集して挿入するだけですのでそこまで難しくもないかと思います。 なお、チェック項目はこれを書く直前まで読んでた「人を操る禁断の文章術」とい
ヘルスケアをメイン活用としたスマートウォッチである「Fitbit」を愛用していらっしゃる方も多いのではないでしょうか？私自身も24時間着用して心拍数を計ったり、睡眠時間を記録したりしており大変有効活用しています。 Fitbitアプリの表示例 FitbitでもAPIが公開されており、oAuth認証すれば自由に心拍数などを出力してWebサイトに活用したりできますのでその方法をご紹介したいと思います。 Fitbitのディベロッパーページにアクセス dev.fitbit.com 上記リンクのFitbitのディベロッパーページにアクセスして「REGISTER AN APP」をクリックしましょう。 アプリケーションを作成 以下を参考に各項目を入力しましょう。 Application Name:任意のアプリケーションネームをつけてください。 Description：アプリケーションの説明を入力しましょう
Withingsとはフランスのエレクトロニカルメーカーで様々な電化製品を全世界に売り出しています。その中でも以下の体重計は人気なので使ってるい方は多いのではないでしょうか。 私も愛用しているのですが、体重を計るとデーターがWifi経由でWithingsのサーバーへ連携されてスマホのアプリで推移が簡単に見れるので重宝しております。 Fitbitのアプリと連携して体重を見ることも可能 さてWithingsではAPIが公開されておりますので情報を取得して自分で好きなように加工することができます。今回はそのやり方をご説明したいと思います。 ディベロッパーアカウントでログイン まずは以下のリンクよりディベロッパーサイトにアクセスしてWithingsのアカウントでログインしましょう。まだWithingsのアカウントをお持ちでないかたは作成してください。 Withings – Partners アプリケ
GoogleとTwitterが共同開発したAMP(Accelerated Mobile Pages)ですが、現在のところGoogleの検索結果をはじめとして、Gunosyなどのキュレーションアプリやはてなブックマークなどに対応されています。また、Twitterも米国では一部AMP対応のテストをしているようです。 Accelerated Mobile Pages Project Androidアプリ「はてなブックマーク」がAMPに対応しました TwitterがAMPのサポートを開始、まずはMomentsでシェアされたコンテンツに対して WordPressでも簡単に「 AMP 」というWordPress.comを開発しているAutomattic社のプラグインを使用すれば簡単にAMP化できるのですが、日本語向けには作られておらず、デザインがイマイチというのが正直なところです。 そこで今回は「AM
Raspberry PIにセンサーをつけて動くものを感知したらスマホにプッシュ通知をするものを作りました。防犯対策にも使えそうですね。カメラをつければ近づいてきた人の写真も同時に撮影できそうですがカメラがなかったのでそこまではやってないです。 仕組み 上のPIR Motion Sensorで動くものを感知するとメールをIFTTTのトリガーとなる”[email protected]”に送信。するとIFTTTがスマホにプッシュ通知を送るという仕組みです。 デモ動画 作り方 以下は必要なモノやソースコードになります。必要の無い方は読み飛ばして下さい。 必要なもの
マイクロソフトやLINE、Facebookが人工知能を使ったBotのプラットフォームを公開しだしたので早速自分も弄くってみました。 今回は FacebookのMessenger上に最新の地震情報を10件取得するBotを作成 しました。（本当はLINE BOTでやりたかったんですけど申し込み締め切りで使えませんでした泣） 動作DEMO 何かしらメッセージを打ち込むと地震情報が流れてきます。 今回はどんなメッセージを打ち込んでも最新の地震情報が10件流れてくる仕様にしていますが、「地震」とかメッセージを限定することも可能です。 動作環境 サーバー：heroku 言語：PHP 地震API: ガラクタ＠P2P地震情報 動作環境は「 これからPHPでFacebook Messenger Botづくりを始める人向けの簡易スターターキット 」を使って構築しました。環境構築手順はリンク先を参照して下さい。
FacebookのWordPress Plugin for Instant Articlesをインストール 昨日、上記リンクの通り「Instant Articles for WP」をインストールしてみたのですが、日本での正式対応は2016年4月からなんですね。本来なら上記プラグインをインストール後にFacebookにフィードのURLを提出しなければならないのですが、日本のFacebookだとまだ、フィードのURLを提出するページが出てませんでした。 それはさておき、「Instant Articles」正式公開まで日もないので、広告やアナリティクスの対応をする方法を備忘録がてら残しておきます。なお、AMPプラグインの記事同様にプラグインを直接変更する事になりますので、アップデート時には面倒ですが適宜対応が必要になるかと思いますのでご了承の程よろしくお願い致します。 Instant Artic
前回紹介した「 WordPressのAMPプラグインで対応したページのデザイン変更方法 」ですが、この方法だとプラグインをアップデートすると再度対応が必要だったのですが、プラグインのドキュメントを読んでたらテーマファイルのfunction.phpからデザインを変更できる方法が書かれていました。 Automattic/amp-wp: WordPress plugin for adding AMP support では早速やり方を紹介したいと思います。 amp-style.phpを作成 ファイル名はなんでも大丈夫ですが、今回は「amp-style.php」にしました。作成後そのファイルをテーマファイルの任意の場所に設置して下さい。私の場合はテーマファイル直下に「amp」フォルダを作成し、その中に格納しました。 funcion.phpにamp-style.phpを呼び出すコードを記述 funct
2016年2月24日にリリースされた「AMP」ですが、WordPressをお使いの方はAutomatic社が作ったプラグインを利用してAMPの対応をしている方も多いのではないでしょうか。 AMP – WordPress Plugins 最近のアップデートでエラーが表示されることも少なく、自分が関わっているWebサイトはうまく表示できています。 しかし、このプラグインで対応するとTHE・WordPressというようなデザインかつ書式が明朝体でなかなかダサい です。 そこで今回はAMPプラグインで表示されるページのデザインを修正する方法をご紹介したいと思います。 このサイトのAMPページ例： DEMO なお、前回の AMPのアナリティクス対応記事 と同様にプラグインを直接編集しますのでアップデートすると再度対応が必要になりますのでご注意下さい。 amp-style.phpを作成 FTPソフトを
Googleの検索結果の記事を高速表示させる「AMP（Accelerated Mobile Pages) 」ですが、本日より検索結果に正式に表示されるようになっているようです。 リーク情報では2月24日の公開予定でしたが、1日早い公開になりました（時差の関係で日本ではすでに24日ですが）。 噂より1日早く、AMP対応のモバイル検索をGoogleが一般公開 さてAMPページにどのくらいアクセスがきているのか知りたいところなのですが、以下のWordPressの「AMP」プラグインで表示しているだけだとGoogleアナリティクスに表示されません。 AMP – WordPress Plugins そこで今回はAMPプラグインで表示したページにGoogleアナリティクスを反映させる方法をご紹介したいと思います。なお、 AMPプラグインを直接編集するため、プラグインをアップデートすると再度対応が必要に
2015-05-25 【レポート】はじめての肛門科に行ってきた！ 健康 日記 一昨日からできた肛門付近のデキモノの件ではじめての肛門科にいってきた。（経緯：XVIDEOS系痔ろう男子 - ShoYamane Blog） 普段かけない目覚ましがなり、「なんでだ？」と一瞬困惑。そういえば肛門科に行くんだったと絶望感がわく。とりあえずースヌーズボタンを押して2度寝。しかたなしに起き上がりシャワーを浴びて鏡越しに青白い顔を見て、肛門付近のデキモノが夢じゃないのを確認。 バスに乗りレッツゴー肛門科へ。肛門科に到着。京都では有名の肛門科で京都市民の半分ぐらいはみんなここの肛門科のお世話になっているんじゃないかという病院。中へ入り、診察の説明を受ける。早起きしたので4番目になった。 この肛門科の常連さんの堂々たる態度を見ていると自分が悲しくなる。自分よりあとに来た初診の人が落ち着きなさそうだったので仲間
次のページ
このページを最初にブックマークしてみませんか？
『ShoYamane.me』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
