はてなブックマーク

WordPress+Gridsome+Netlifyを組み合わせたJAMStackにて静的に出力することを試みした。 こんにちわ、こんばんば。今日は昨今流行と言われているJAMStackに挑戦してみました。とりあえずやってみた！というところですので、間違いとかあればご指摘くださいませ。引続きがんばります。 成果物とその仕組について 当ブログをもとに、静的に出力したものがこちらです。https://gridsome.demodemo.link/ Githubのリポジトリはこちら https://github.com/megane9988/gridsome-megane-blog もともとあった、このWordPressのブログの情報をAPIとして利用します。静的出力までの流れは、NetlifyがGithubのリポジトリにおいてあるGridsomeのフレームワークを利用して、WordPressの

LTといえば、5分間でいかにウケるか（もしくはスベるか)ということで、ふんだんにネタを詰め込もうと考えられる方も多いと思います。 そのサービス精神はとてもよいことで、大抵のイベントの場合、LTは最後のセッションとして行われるケースが多いので、今までまじめに展開されていたセッションとはうって変わって楽しく見たいものですよね。 しかし、よくよくある失敗例として内輪受けに終止してしまうケースがあります。 内輪受けの危険性 特定のその界隈では有名な人のニックネームや、その人のやらかしたことなど、そういうことを盛り込むケースはとても注意が必要です。 注意することはそのLTの場にいる聴衆者の多くが、その人や事象を知っているかどうかということです。私はこのことをよく、聴衆者の最大公約数がどうか？という風に話します。 最大公約数の人々が、そのことを十分に知っているのであれば、それは強いネタになりますから、

先日fishシェルがとても素晴らしかったので、お伝えします。という記事を書きましたがその続報と関連情報のお知らせです。まず、このfishシェルを知るきっかけともなった、こもりさんがブログで私の記事よりも詳しい内容を書いてくださってます。御覧ください。 Bash to the Fisher で、ですね。別件なのですが、Gitに脆弱性が発表されたということで、バージョンアップをしないといけない状況が諸々来ています。 Vulnerability announced: update your Git clients 丁度、今の自分のシェルで使うGitのバージョンなんだっけ？としらべたら。 [code lang=text] git –version git version 1.9.3 (Apple Git-50) [/code] ちょ！！！ あれ。。なぜかmacにもともと入ってるgitを使う形になっ

先日行われました、CPI x CSS Nite x 優クリエイト「After Dark」（17）「webクリエイターのための情報交換所 2014年振り返りスペシャル」（2014年12月18日開催）　において、LTで デザイン事務所 TIMINGの北村さんが紹介していた。SVGファイルをイラレから、コピペでWebに利用できるという内容が衝撃的なぐらい簡単で使いやすそうだったので紹介します。該当のセッションのスライドは下記です。 そうすると、下記のようなズラズラーとっとした文字列が張り付きます <!– Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In –> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999

どもメガネです。最近では、もろもろ作業をはじめるために、まず黒い画面を開く程度になった私です。そんな私が最近、おしえてもらって便利だったシェルがfishシェルです。 fish shell シェルってなんだよ？という方にはWikipediaをどうぞ シェル つまりは、黒い画面を動かすときのインターフェイスですね。分かり難いですが、そういうことです。じゃあどういう具合にfashシェルが便利なのかをお伝えしていきましょう。 インストールが簡単 homebrewでインストールできるので簡単ですね。 OSXでfish shellを使う fish-shell はじめてみた ほとんど設定しなくていい .bashrc とか .bash_profile とかそういったのをほとんど触らなくていいです。 後述しますが私が追加したのは２つぐらい。楽ちんですね。 秀逸な候補提案 ※ 画像は公式サイトから流用 ディレ

JSON REST API (WP API) プラグインを利用して ブログを API 化したり、そこから情報を取得して表示したり 最近 JSON REST API (WP API) (Githubのリポジトリはこちら)が人気ということを聞きつけまして、さっぱりわかってないのですが、とりあえずやってみたら何かになるかもしれないという具合で、やってみました。ひとまず表示まで出来たのでその一部始終です。 最終的にこんなのが出来ました ≫ 先にサンプルを見る megane-blog.com の最新の記事を取得してタイトルをリンクとして表示するというものですね。下記より手順です。 1. WordPress を API化する ひとまず JSON REST API (WP API) をインストールして有効化します。 その後、おもむろに有効化した WordPress の URL に /wp-json/ を

Backlogの便利な小ネタ10個 キーボードのショートカット,Markdown,Googleカレンダー連携等 日々の案件の対応はクライアント様がOKしていただければほとんど Backlog を利用しています。すでに使っている人は十分便利だということは気がついてられると思いますが。その中でも気に入っている小ネタを集めてみました。 1. キーボードのショートカットが効く 課題詳細を見ている時に j で次の課題 k で前の課題 とすすめます。その他にもいろいろショートカットがあります ショートカットキーの概要 共通のショートカットキー 課題の検索のショートカットキー 課題の詳細のショートカットキー 課題をまとめて操作のショートカットキー 2. 課題タイトルと課題のキーをワンクリックでコピーできる タイトル横のコピー用のアイコンをクリックするだけで、課題名とキーがクリップボードにコピーされます。

1. コードフォーマット パッケージとして提供されている HTML-CSS-JS Prettify を導入する。使い方はソースコードで右クリックして、Prettify Codeを選択。ショートカットは　Shift + Command + H。しかるべきところでの改行と、インデントをまとめてしてくれるのでたすかります。 コードフォーマットの設定 Prettify Code コードフォーマットにおけるデフォルトでのインデントの設定はスペースです。設定変更や拡張子の追加などを行う場合は、Performance→Package Setting → HTML/CSS/JS/Prettify → Set Prettify Setting と進むと、設定ファイルが表示されます。(コマンドパレットからも呼び出し可。) インデントの設定を変更する場合は インデントの文字をスペースからタブに dent_cha

CSS フレームワークの Foundation を利用して、WordPressのテーマを制作する際に関連のJSとCSSを読み込む方法です。ファイルを読み込む際には wp_enqueue_style と wp_enqueue_script を使います。読み込んだままだと app.js において [code lang=text] Uncaught TypeError: undefined is not a function [/code] というエラーが出てしまい正しく動作しないので、カプセル化を行います。 上 : app.jsのカプセル化 下 : JSとCSSを functions.php から読み込み 参考サイト WordPress で CSS、JavaScript ファイルを読み込む正しい方法 | EastCoder wordpressにjQueryのスクリプトを書くとUncaught

まだ使ってない人向けです。WordPressの場合は、Jetpackが提供してくれるMarkdownを利用することで、普通にタグを書くよりもずいぶんブログを書く時間が短縮できますよ。 見出し [code lang=text] # h1 ## h2 ### h3 // 増やした数だけ数字が増える [/code] リスト [code lang=text] – リスト – リスト – 子要素(先頭にタブインデント1つ) – 孫要素(先頭にタブインデント2つ) – 子要素(先頭にタブインデント1つ) – リスト [/code] 数字のリスト [code lang=text] 1. リスト 2. リスト 3. リスト //数字を増やさなくても同じ結果になる 1. リスト 1. リスト 1. リスト [/code] リンク [code lang=text] [リンクのテキスト](http://hoge

参考 MW WP Formに郵便番号による住所入力補完をつけるには 導入手順 ajaxzip3の読み込み (functions.phpに記載) ajaxzip3 [code lang=php] <?php function ajaxzip3_scripts() { wp_enqueue_script( 'ajaxzip3-script', 'https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js', array( 'jquery' ), '20140807', true ); } add_action( 'wp_enqueue_scripts', 'ajaxzip3_scripts' ); [/code] WordPress内で動かすための設定 (nameとzip2addr内は適時修正) [code lang

流行期を過ぎたレスポンシブ・Webデザインのこれから こちらを見てのブログです。 新年度サイトリニューアルの目玉はスマホ対応！！ さて2012年も、もうすぐ6月。制作会社は忙しかった年度末進行から、残案件がなくなりはじめ、新たな案件にとりかかる時期。クライアントとなりうる企業の方々におかれましても、「WEBサイトのリニューアル」というプロジェクトが稼働し始めている。というケースも多いのではないかなと考えています。よく頂くご要望としましては 既存サイトは継ぎ接ぎだらけ。管理が散漫になっているので整理したい。 便利簡単に自社で更新が可能と言われているCMSの導入したい。 どうも古くなってしまったデザインの改修したい などがありますが、そんなご要望の中でも、見た目にわかりやすいリニューアルの目玉！WEBサイトが新しく変わったということをみんなで感じたい！それを実現できそうなのが今回の話題、マルチ

はいどうも、メガネですよ。 今夜はWEBデザインでも日本らしい、縦書きのフォントを利用したデザインがすてきなサイトをあつめてみました。とりあえず13個。どっとご紹介しますのでご覧ください。 メニュー自体を縦書きにしている意欲作から、メイン画像やロゴなど一部分だけに縦書きを利用しているサイトまで、利用方法もさまざまですね。こういう要望があった時にもどうじずに、縦板に水のように対応したいもんですね（使い方あってるのか。。） ではどうぞ！ おすすめの縦書きデザインサイトあったら教えてくださいね！ では、ちゃお(^^)