75ちょっとした技術系の記事を書きたいと思った時、htmlやcss、JavaScriptやSwiftのようなプログラミング言語なんかのソースコードを書く必要が出てきますよね。あなたが、WordPressでソースコードをキレイに表示したい(埋め込みたい)と思うとします。テキストをそのまま貼るのはすごく見づらいので、別枠で表示してくれてシンタックスハイライトしてくれて...。他のブログでも使われているの見ますし。実は、私が「技術系の記事を書きます」と宣言していながらもほとんど書けてなかったのは、コードを表示するのに良いプラグインがない、という事がありました。Highlighter」を使ってみてたんですけどね。•̀ᄆ•́;)超ビミョー、どうしたもんだろ〜」と思ったまま過ごしていました。́∇`*)簡単すぎて説明することがないですが、WordPressでソースコードを表示するためにGistを使うメリット・デメリット、方法を解説します。Gistとは?さて、まずはGistが何なのかわからない人のためにちょっぴり説明を!GistはGitHubがやっている、短いコードやメモをgitでバージョン管理できるサービスでです。Gistを使うにはまずGitHubのアカウントをつくらないといけません。built「バージョン管理って何?gitって甘くて美味しいやつ?」って方もいると思います。そんな方は、Gistは、外部にソースコードをみんなに見えるように(限定公開も可能)おいておけるサービス、と考えてもらっていいです。Gistで(管理しているもの)公開したものは、ブログなどの他のサイトに埋め込んで表示、公開することができます。ブログを書いている皆さん、YouTubeに動画をupして自分のブログ記事内は貼り付けけることとかありますよね?それのソースコード版だと思ってくれたらOKです。gist自体の使い方はまた別の記事にしてupしますね。Gistを使ってWordPressにコードを表示するメッリトとデメリットGistを使うメリット・デメリットをあげるためには比較対象が必要ですね。Highlighter」のプラグイン。プラグインは重いしビミョーだな、という知識のある人達に人気なのが「Highlight.js」などのライブラリです。ライブラリは速くていいんですが、WordPressの仕組みとかちょっとはわかっていないと導入するのに手こずるでしょう。検索すると出てくる情報はこれらのプラグインとライブラリです。(そのままテキストして貼り付けるは論外ということにしておきますねー)これに対して、GistはYouTube動画のように埋め込みコードを貼り付けるだけの簡単仕様。なし!使い始めたいと思った時にすることはGitHubのアカウントを作ることだけ。ライブラリのようにダウンロードして設置して...という手間はありません。プラグインのようにそのプラグイン特有の表記方法を覚える必要はなしです。(使ってないとすぐに忘れる)通常作業、メンテ作業がラク通常、コードを表示する際は、記事内にコードを記述していくことになりますが、記述はプラグインやライブラリの方法に合わせる必要があります。作ったコードをGistにコピペして公開。そのGistの埋め込みコードを記事内に貼り付けます。Highlighter」もあったんですが、何かの拍子にエスケープ文字がそのままになったりしたことがありました。(うっかり投稿をビジュアル編集モードでいじったりしたら悲劇です)プラグインやライブラリと同居してもトラブルになりづらいGistは外部のものなので、プラグインやライブラリと同時に導入してもトラブルのたねになりづらいです。(そうやって使っている人もいますね)また、プラグインを別のプラグインに乗り換える時はコード部分を書き換えないといけなかったりします。シンタックスハイライトコード系プラグインを複数いれっぱなしとか干渉したり重くなったりすると思われるので、(公開している量にもよりますが、)全部書き換えはかなり面倒です。Gistなら書き換も時間のある時に少しずつすればOK。Gistを表示するためのプラグインを使用したりすると、シンタックスハイライト系プラグインとCSSのidやclass名が被って表示がおかしなことになる、なんてことがあるようです。これはどんなプラグインでも起こりうりますけど。動作が重くないプラグインを使っていた時は重くて重くて...。Evolved」でした。Highlighter」。これも(そうじゃなくても重いこのブログには)イマイチでした。;∀;)ふつーに行けるよー!とは言え「Highlight.js」のようなのライブラリの方が速いと思われますが。(スピードテストはしてませんすみません)もちろんシンタックスハイライトもプラグインやライブラリに当然の如くあるシンタックスハイライト。Gistもコードが読みやすいように色分け(シンタックスハイライト)してくれますよー!最新言語でも対応が早いこれはシンタックスハイライトと関連しますが、プラグインは新言語にすぐに対応してくたりはしません。「新言語なんてそうそうないじゃん?使わないじゃん?w」という人もいるかもですが、Apple系デベロッパーにはSwiftがありますからね!Swiftが発表されてもう1年半たちますけど、使える言語にSwiftがないサービスなんてまだまだたくさんありますからね!その点、天下のGitHub!Gistはだいじょーぶ!gitなので差分も見れる!forkされたりmergeしたりできる一応メリットにあげておきますが、gitなので差分も見られます。他の人からのリクエストも受けられます!ブログにコードを貼り付けるだけの目的の場合、実際そうやって使われることはほとんどないかなと思いますが!デメリット!見た目などのカスタマイズはできない良いことばっかり書きましたが、他の方法に比べてイマイチな点も挙げておきます。プラグインやライブラリのように、背景色や行番号のカスタマイズなんかはできません。シンタックスハイライトはあるけど、「指定した行を特別にハイライトする」とかもできません。コピーボタンとかありません。※CSSの知識があれば、行に線を入れる、背景色を変えるなどのカスタマイズではきます。記事とコードの管理が別もうひとつ。これはメリットともデメリットともとれるのですが、記事の管理とコードの管理が別々になります。最初の簡単な説明にあげたように、YouTube動画を埋め込んでいるようなもので、コードをGistに任せている状態です。私はメリットだと思うのですが、これは考え方によって意見が分かれそうです。WordPressにソースコードを表示する方法比較プラグインとライブラリ、Gistを表にして比較してみました。※あくまで管理人の経験によるイメージです。表にするとどれも一長一短ですが、全体的に「お手軽さ、気の使わなさ」がGistでコードを表示することの最大の魅力だと思っています。́ー`*)それでは、さっそくそのお手軽な表示方法を説明していきます〜。Gistを使ってWordPressにコードを表示する方法GitHubのアカウント取得後、Gistページ(https://gist.github.com/)へ。1)拡張子をつけてファイル名を記入2)肝心なコードを記入3)コードを公開。左のボタンはURLを知っている人でないと見られない非公開Gist、右ボタンは公開Gistが作れます。WordPressに貼り付ける分にはどちらでもいいです。Gistができました。今回は私が実際にこのブログで作ったテーマの一部を例にしています。※上の「Edit」ボタンを押せば、編集し直すこともできます。ボタンやコードの位置は変更になることもありますが、基本的にEmbed(埋め込み)のそばのコードをコピーすればOKです。6)コピーしたコードを記事内にペーストします。テキストモードでないと(ビジュアルモードだと)おかしくなることもあるようです。基本の埋め込み方は以上です!実際の表示は↓のようになります。下にファイル名があります。ファイル名をクリックするとGistページに飛びます。row」をクリックすると別ウィンドウ(タブ)にコードだけがテキストで表示されます。見た目要素かカスタマイズできないのなんてお手軽の前にはちっぽけな事なのであるっ。上手く動かないコピーボタンとか要らないですもん。Gistのページに飛べばいいですもん。ンタックスハイライトがあれば私には十分だーーーー!(」°ロ°)」と、いうことで、私はしばらくGistさんと仲良く過ごそうと思います!オクトキャットはGitHubのキャラクターです。「全てが簡単お手軽なGistを使ってキミもWordPressでコード表示をしてみないか?!」のコーナーでした。Fri.WordPressなのでモバイル(スマフォ)用テーマも作りました。Tue.サイト(ブログ)のお引っ越し(移転)は301リダイレクトを。Mon.API変更に伴いFacebookの「いいね」ボタンを設置し直しました。方は今年2015年の4月30日までに。iSOデベロッパー)パソコンのパの字も知らない人生を送っていたが、ある日MacBookと出会い恋に落ちる。数年後、Mac好きが昂じてAppleブログを開設。ブログを始めてから何故かMacのトラブルが頻発するようになりAppleの神対応を体験。Proを持ち運び寝食を共にする。(いろいろバッサリ割愛)2014年にはWWDCに行き、自作のiOSアプリもリリース。ix100のクリエイターモデルにデザインを提供。「ねこ事務所」お手伝い1号の赤魔道士デザイナー(つまり何でも大抵やる、このwordpressのテーマも自作)。未経験者向けiPhoneアプリ開発入門講座「アプリクリエイター道場」アシスタントティーチャー。Layout入門講座」では講師を務める。「もっと知りたいリンゴあれこれ」とは都内某所にあるApple率100%の弱小事務所『ねこ事務所』で起こるドタバタ劇(実話)を綴るため、また筆者ゆこびんの経験や知識が誰かの役に立つことがあるかもしれないという思い込みから開設されたAppleブログである。MacやiPhone、iPadなどをイラスト入りでゆるゆると綴るのが特徴。Web、アプリ開発など簡単な技術的なことや筆者の個人的な話なども。読者の方々は略して「リンあれ」と呼んでくれている。良ければブックマーク(お気に入り)やRSS登録をよろしくお願いします。Facebook「いいね」の他、TwitterやGoogle+をフォローしてくれると更新情報が流れます。いつも読んでくれてるそこのアナタも、ブックマークした上にさらにいいねしてくれたりしてもいいのよ(/∇\*)*関連ページに飛びます。クリックすることで自動で(勝手に)フォローしたりいいねをすることはありません。コメントは認証制です。一度認証された方は即時認証されるようになります。方は下の使い方とお約束をお読みください。各アカウントと連携することでコメントできます。コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。メールアドレスと名前を入力することでコメント出来ます(自サイトをお持ちの方はサイトURLも是非ご記入下さい)。入力頂いたメールアドレスには確認のメールが送られる事があります。その場合はお手数ですが内容にしたがって返信して下さい。確認がとれないメールアドレスでの投稿は認証されない事があります。宣伝目的や明らかに内容にそぐわないもの、いわゆる公序良俗に反することや誹謗中傷めいたもの、管理人及びブログ読者を不快にさせる表現などを含むものは、内容にかかわらず削除されます。顔の見えないインターネット上のやり取りは誤解が生じることが多々あります。諍いに発展する事は本意ではありませんのでご理解下さい。内容も言葉も少し気をつけて頂くだけで、コメント欄はとても有意義な交流の場になります。管理人多忙のため、コメントの返信が出来ないことがあります、ご了承下さい。旧サイトにあった非公開コメントシステムはなくなりました。以前のようにちょっとした情報や個人的なお話して下さる方は、Contactフォームからお気軽にどうぞ。●このブログのイラスト及び写真の無断転載や加工、二次配布を禁止します。文章を引用する場合はこのブログからの引用であることがわかるよう明記して下さい。引用を超えて転載する場合は上部contactから連絡して下さい。(紹介記事、それに類するものの場合はこれにあたりません。その場合のイラストの加工は原型が分かる程度でお願いします。)●このブログのプライバシーポリシーはこちら。私(ゆこびん/佐久間にの)のアプリやブログで公開しているものがお役に立ったりなどして、私の活動を応援したいと思ってくださる方はAmazonギフトからお願いします。少人数制の未経験向けiPhoneアプリ開発講座「アプリクリエイター道場(略してアプリ道場)」のアシスタント・キュレーターをしています。アプリを作れるようになりたいプログラミング未経験者さん、独学で挫折した人やエンジニアさんとのコミュニケーションのためiOSアプリのプログラミングを学びたい人など、今までいろいろな方が受講されています。ヽ('ヮ'*)ゝ現在、東京と大阪で定期開催されています。(上の画像をクリックすると講師ブログのアプリ道場関連記事一覧にとび、今後の開講予定や卒業生インタビューなどがチェックできます。AppleiPhoneアプリをリリースしました。文字組み(組版)を始めたばかりの人、文字ばかり扱ってるわけではないデザイナーさんのためのアプリです。Q(級)やH(歯)をptや他の単位に自動変換。行送りも含め印刷した際の実寸プレビューが見られます。いくつかの便利なガイド計算機も付いています。↓今更ですがPinterestが楽しいです。日本ではあまり流行ってないですし、私も知ってからから始めるまで2年くらいの差がありましたが、利用してみたらかなりお気に入りです。写真、映像、デザイン、イラスト、ハンドクラフトをやっている人には激オススメしておきます。↓Instagramをひっそりとやってます。Apple、食べ物、猫が主な被写体です。気になる方はFollowしてみてください。→今までのApple製品を並べてみました。