サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
blog.sus-happy.net
Vue3がそろそろ公開されそうな雰囲気なので、ちょっと先にVue Composition APIをつかってみました。 Composition API RFCをボチボチ読んで、Class Componentで書いてたものを変換してみたのでその時のメモを残しておきます。 Props propsはsetupの第一引数から取得可能。 <template> <p>{{ foo }}</p> </template> <script lang="ts"> import { createComponent } from '@vue/composition-api' // Propsの型推論用 type Props = { foo: string, bar: number } export default createComponent({ // createComponent内でpropsを定義する //
その2 Unicorn+Nginx編ではNginx上で動かしていましたが、もしかしたらH2O上でも動くんじゃないかと思い試し見たところ動いたのでメモを残しておきます。 ちなみに、Unicornの設定については以前の方法から変更はありませんので、今回のメモには残していません。 H2Oをインストール H2Oのインストールの手順はほぼ変わりませんが、一部だけ手順が変わっています。 以前の方法では、cmakeをyumでインストールしていましたが、バージョンが足りなくなったのでソースからインストールする必要があります。 cd /usr/local/src/ wget http://www.cmake.org/files/v2.8/cmake-2.8.12.tar.gz tar xvfz cmake-2.8.12.tar.gz cd cmake-2.8.12 ./configure make make
最近H2Oというnginxよりも早いと言われているらしいWebサーバを知ったので、取り敢えず入れてみました。 またコレを機に、HHVMよりも早くなったらしいPHP7も気になっていたので、そちらも入れてみました。今のところWordPressは動いているみたいです。 ちなみにCentOS7です。 目次 H2Oの用意 H2Oのインストール H2Oの設定 H2Oの起動・停止 PHP7をphpenv+php-buildでインストール phpenvのインストール php-buildのインストール php-buildでPHP7をインストール PHP7でphp-fpmを設定・起動 H2Oの用意 H2Oのインストール 「Development Tools」をインストールしておけば、わりとサクッとインストール出来るようです。後は依存パッケージをインストール。 yum groupinstall "Develop
以前PHPを使ってYAMLを扱う方法についてメモをしていましたが、もう少しYAMLについて調べてみました。 基本的な記述 配列とハッシュ YAMLは配列かハッシュによってデータを表現することが出来ます。 頭に「-」を付けた場合は配列、「キー: 値」の様に「:」で区切った場合にハッシュとなります。 - foo - bar hoge: fuga 階層化 半角スペースでインデントをすることで、配列・ハッシュを階層化することが出来ます。 また、インデントを行う際にタブ文字は使えません。 - - foo - bar hoge: - fuga - piyo コメントアウト 前回も何も説明せずに使っていましたが、コメントアウトは「#」です。 「#」を付けた後ろを行末までコメントアウトします。範囲指定は無いようなので、複数行コメントアウト指定場合は何度も記述する必要があります。 - foo - var #
WordPressをブログではなくもう少し大掛かりなCMSとして利用する際には、どうしても必要になってくるカスタムフィールドですが、ただのinput, textarea, selectでは面白くないので使い勝手が悪いので、色々とカスタマイズした内容を残しておきます。 目次 今回カスタマイズしてみた内容は下記の通りです。 プラグイン無しでカスタムフィールドの入力欄を追加する 通常の本文と同じTinyMCEを使う メディアアップロードボタンを使う 雑感 参考 プラグイン無しでカスタムフィールドの入力欄を追加する まずはカスタムフィールドの入力欄の追加方法からです。 カスタムフィールドの管理を行うプラグインは様々ありますが、管理側の使い勝手を向上させるためにどうしても入力欄は一定のレイアウトで、もうちょっと違う表示をさせたいんだけどな…という所が出てきてしまいます。 なので、そんな時にはプラグイ
様々な追加機能を用意してくれるJetpack for WordPressですが、その中のTwitterやFacebook等のSNSに投稿時に自動的に共有をしてくれるパブリサイズ共有で色々とカスタマイズしたい所があったので、調べたことのメモを残しておきます。 Jetpack インストール方法や設定方法は、丁寧に説明されているページがありますので割愛させていただきます。 パブリサイズ共有 ソースを追ってみたところ、デフォルトでは「title url」で共有され、投稿内容と共有するサービスをwordpress.comに送信してそこから発信しているようなので、各サービス毎に内容を変更する、と言ったことは難しそうです。 ちなみに今回調べてみた内容は下記の通り。 カスタム投稿タイプでも適用させる 共有する文言を変更する 強制的に文言を変更する 共有するURLを変更する 雑感 カスタム投稿タイプでも適用
クラウド電話APIのTwilioをPHPで使ってSMSを送信する機会があったので、今後のためにも残しておきます。 Twilioについて Twilioとは、Web上で電話を操作することが出来るクラウド電話サービスで、APIも提供されているため、Webシステムと連動して利用することが出来ます。 最近では本人認証のために、電話番号を入力→電話 or SMSで認証コードを通知という流れがあるかと思いますが、そういった電話やSMSの送信を自動的に制御する、といったことが出来るようになります。 Twilio API Twilio APIは「Twilio REST API」というREST形式も提供されており、HTTP通信で操作を行うことが出来ます。Twitter APIやFacebook API等の最近主流の方法ですね。 他にも「Twiml」という独自の形式や、「Client API」という形式も存在し
ネイティブアプリとして作るにしてはコストや、制限がかかりすぎてしまう件を考慮して、Webアプリをの方が良いと判断し、Backbone.localStorage.jsを使ってオフラインWebアプリケーションを構築した時のメモを残しておきます。 Backbone.localStorage.js Backbone.jsのModel、CollectionのSave、CreateのメソッドをOverrideし、HTML5のlocalStorage機能を利用してクライアント側に保存するライブラリです。 DLはこちらから:jeromegn/Backbone.localStorage 通常であればAjaxで通信する所をlocalStorageに保存する流れになりますので、通信したい場合はjQueryやZeptoを利用して手動で行う必要があります。 例えばCollectionでBackbone.localS
PHPのPDOを使ってMySQLにアクセスしている時に、LIMIT句でエラーが発生してしまったので、その解決方法を残しておきます。 PDOとは PHPでデータベースを扱う際に、mysql_queryでクエリ文を受け渡していると、セキュリティの関係上行わないといけないエスケープ等が面倒です。 そこで、PHP5より実装されたPDOを使うことで、プリペアドステートメントによってデータベースに安全且つ簡単にアクセスすることが出来ます。 その他、PEARで提供されているPEAR MDB2でもプレペアドステートメントを用いることが出来ます。 PDOによるプリペアドステートメント PDOを用いたプレペアドステートメントについては下記の通り記述します。 // $dbh = new PDO(); // 疑問符を用いた例 $query = 'SELECT * FROM `table` WHERE `id` <
Twitter BootstrapやHTML KickStart、Blueprint等、CSS Frameworkの一つのFoundation 4を使ってWordPressのテーマを変えてみました。 本当はYUIのPureを使ってみようかと思っていたんですが、フォントの指定によって段落ちすることがある、という不具合が起きてしまったのでFoundation 4を使ってみました。 特徴 レスポンシブウェブデザイン対応のための仕組みが多数組み込まれており、基本的な事はFoundation 4の仕様で実装することが出来ます。 例えば、特定の幅より小さいウィンドウサイズの時の表示・非表示、グリッドのサイズ変更、メニューの格納・タップで表示等、便利な機能が多数含まれています。 使い方 Foundation 4は、「normalize.css」と「foundation.css」を読み込みます。 <lin
今後様々なデバイスが発表されて、様々な解像度のディスプレイで表示されることを考えると、ビットマップ画像での対応に限界があると感じたので、SVGもちょっと調べてみました。 ついでにこのブログのロゴをSVGで描いてみました。SVGが対応しているブラウザであれば、SVGで表示しているはずです。 SVGの表示の仕方 SVGの表示のさせ方には幾つか方法があります。 objectタグ内のparamタグで指定する objectタグのdata属性で指定する imgタグで表示する HTML内に直接記述する CSSで背景画像に指定する の辺りでしょうか? これら+JavaScriptで生成するライブラリもあるようですが、今回はリンクのみの紹介としておきます。 このサイトで採用しているのは、振り分けが楽そうだったのでCSSで背景画像にして指定しています。 とはいってもあんまり表示確認していません。(Chrome
とある案件でCreateJSを利用してスマホ用のWebゲームを作ったので、その時に調べた内容をメモメモ。 Canvasを利用すること自体あんまり無かったのですが、結構簡単に実装することが出来ました。 CreteJS そもそもCreateJSとは、HTMLの要素であるCanvas要素の描画をFlashの様に操作出来るライブラリで、実際に自分もFlashを利用することもあったことから、比較的とっつきやすい内容でした。 また、実際には Canvasへの描画を制御する「EaselJS」 アニメーションの動きを制御する「TweenJS」 外部ファイルの読み込みを制御する「PreloadJS」 今回利用していなかったのでご紹介は省かせて頂きますが音声データを制御する「SoundJS」 の4つをパッケージ化したものが「CreateJS」となります。 そのため、一部の機能だけ必要という事であれば、バラバラ
FuelPHP等のフレームワークを使う時はついつい便利なのでクエリビルダを利用してるのですが、どうしても特殊な操作を行う時はクエリビルダを利用するほうが分かりづらくなってしまったり、自動的にエスケープされて利用できなかったりして、結局クエリ文を直書きしてしまっていました。 その一つとして、MySQLのorder by field機能がクエリビルダにメソッドが存在しないのですが、何とかクエリビルダを使いながら実現出来ないか調べてみました。 order by fieldって? そもそもorder by fieldとは、指定した順番に検索結果を並べかえる、というMySQL独特な記法です。 SELECT * FROM `table` ORDER BY FIELD( `column`, 3, 1, 2 ); のように記述すると、columnが3→1→2の値の順に取得出来ます。 order by fi
これまでは、さくらのVPSを利用させていただいていたのですが、最近の流行りに乗っかろうかと思いましてAWSのEC2でサーバを立ちあげて移管してみました。 単純にnginxに慣れていない事もあって色々と躓いてしまいましたが、なんとか表示できています。 不具合がまだチョコチョコ出ちゃってますが、メインコンテンツが見れてるのでとりあえず保留中です。 また何かの時に新しく作るかもしれないので、参考サイトとメモを残しておきます。 AWS EC2の設定 まずAWSのアカウントを作ってEC2のインスタンスを作ります。 使い慣れているので、CentOSを選びましたが全部同じのはなぁ…と思ってCentOS6 64bitを選択しました。 また、nginxやPHP、MySQL、WordPressまでプリインストールされているモノもあるのですが、設定方法を勉強するためにも今回はOSのみのイメージを選択しています。
自分ではなく第三者にWordPressを使って貰う場合に、メディアを追加した時に添付ファイルのページが出来てしまうことが煩わしく思っていました。 自分が更新するのであれば、リンクを切ってしまうか、ファイルへのリンクを貼っておけば良いのですが、第三者が更新を行う場合は確実に防げるかと言われると言い切れない所があります。 そこで、添付ファイルのページにアクセスしてしまっても、ファイルを表示してしまえば良いのだ、と思い立ってテーマファイルを調べてみました。 添付ファイルのページについて そもそも添付ファイルのページはテーマファイルのどのファイルが優先されるのか、というところから。 優先順位は下記のとおりとなります。 MIMEタイプ.php MIMEサブタイプ.php MIMEタイプ_MIMEサブタイプ.php attachment.php single.php index.php MIMEタイプ
個人的にMovableTypeの様な静的生成が苦手なのですが、ダイナミックパブリッシングもイマイチ上手く扱えないのでどうにかしてPHPで直接取得できないか調べていました。 今まで知らなかったのですが、どうもPHPのライブラリが内包されているようで、それを利用することで割と簡単に実装することが出来たのでメモしておきます。 記事の一覧を取得 MovableTypeのアプリケーションディレクトリ内の「PHP」ディレクトリ内にライブラリが内包されています。 簡単な使い方の例として、“最新10件分の記事を取得”する記述は下記の通り。 Movable Type 5の場合 MT5はPHP5以上を想定されているため、チェーンメソッドが使えたり、インスタンスメソッドが用意されています。 // MTのシステムディレクトリを「path/to/mt」とする $mt_dir = 'path/to/mt'; // M
なんだか名前を良く聞くような気がするBackbone.jsを一度触ってみたかったので、Twitterの仕様が変わってタイムラインが取得できなくなった自サイトに組み込んでみました。 中でもpjaxが出来るとかなんとか聞いたので、その辺りを中心に試しています。むしろそれ以外は別にBackbone.jsじゃなくても良いくらいの状態なので、少しずつ試していこうかと思います。 Backbone.jsを使う準備 Backbone.jsは単体で動くわけではないみたいなので、下記ライブラリを用意しました。 Backbone.js Underscore.js jQuery jQueryの代わりにZepto.jsでも良いのですが、IE非対応みたいなので、一応jQueryにしました。 Backbone.RouterとBackbone.history Backbone.jsでpjaxを実装するためにはBackbo
HTML/CSSのコーディングを効率化する「Zen-Coding」が次期バージョンで大幅に仕様を変更し「Emmet」と名称を変更するようなので、現在公開中のベータバージョンを試してみました。 Sublime Text 2にインストール Sublime Text 2(以下ST2)向けのEmmetはGitHunにて公開されていますので、レポジトリを追加してインストールすることが出来ます。 具体的な手順は下記の通り。 コマンドパレット(Win:Ctrl+Shift+p、Mac:Command+Shift+p)から「Package Control: Add Repository」を選択 「https://github.com/sergeche/emmet-sublime」を入力 コマンドパレットの今度は「Package Control: Install Package」を選択 「emmet-sub
IE6対応をしていると時々条件付きコメントを使って、特定のブラウザ・・・主にIE6ですが・・・だけに読み込ませたいJavaScriptやCSSを記述すると、DreamWeaver内ではコメントと扱われてしまうため、パスが通らなくなってしまい面倒だったので、色々と試してみました。 条件付コメントとは 条件付コメントとは、IEだけに解釈されるHTML内に記述することが出来る条件分岐の記述のことです。 実際には下記のように記述します。 <!--[if IE 6]> ここはIE6のみ表示 <![endif]--> この様に、通常のブラウザではコメントアウトと認識され、特定のブラウザだけ表示させられる仕組みです。 google-code-prettifyでもコメントアウトと扱われてしまっていますね。 使用例 例えばIE6だけに読み込ませ実行させたい、pngfixのライブラリであったり、印刷用のCSS
MySQLのクエリを組み立てている時に、やりたかった事を実現するために、ユーザ定義変数を利用したので、また使うときに忘れていても良いようにメモしておきます。 ユーザ定義変数の記述方法 ユーザ定義変数の記述方法は、こんな感じ。 SET @foo:="bar"; # SETの時は @foo="bar"; でもOK 一度定義しておくと、その接続の間利用することが出来ます。 SELECT * FROM `hoge` WHERE `fuga` = @foo; ユーザ定義変数を使って行番号を追加する 簡単な例として、変数を使って行番号のカラムを追加してみます。 SET @row:=0; SELECT *, ( @row:=@row+1 ) AS `row` FROM `hoge` WHERE `foo` = 'bar'; ただ、この書き方だと、クエリが2つになってしまうのが少し気になりますね。 SEL
前回の記事で、PHPでMovableTypeの記事を取得する方法を残していましたが、カスタムフィールドの情報の取得方法がちょっと回りくどい内容でした。 もうちょっとAPI内部を調べて見たところ、もう少しスマート?な方法が見つかったので残しておきます。 今回の方法では、データベースのアクセスはfetch_entriesだけになるので、動作的には良くなっているかもしれません。 実装方法 内部を見てみると、どうも事前にどんなカスタムフィールドの情報が欲しいのか渡しておかないと、fetch_entriesでは返してくれないらしく、予め何のカスタムフィールドなのかと、ベースネームと変数型を伝えておく必要があるようです。 また、渡し方もMT5とMT4とバラバラのようなので注意が必要です。 MT5の場合 静的メソッドが用意されているので、そこにカスタムフィールドの情報を渡します。 例えば、ブログ記事に、
Ajaxを利用しつつ、戻る・進むリンクが効くような作りで、Twitterと同じようにHashchangeイベントを使ったことがあったのですが、HTML5ならpushstateを覚えなくては―と思っていた頃にこの記事を読んでjquery-pjaxの存在を知りました。 また、ちょっとしたコードをメモして置く場所が欲しかったので、WordPressと組み合わせてスニペット集を作ってみました。 こんな感じです » Snippets | SUSH-i LOG まだまだ分類分けが中途半端だったり、導線が不十分だったり、ブラウザの進む・戻るを使った時に少し不具合がありますが、何とか形になったかな?と思っています。 クライアントサイド ソースファイルは、defunkt/jquery-pjax – GitHubからダウンロードできます。 クライアントサイドの記述方法は参考リンク先でもご紹介されていますが、こ
SUSH-i LOG 名古屋のWeb制作会社につとめるプログラマーのつぶやき Astroのエンドポイントを使ってVercel上でOGP画像を自動生成してみた 2023/02/13 JavaScript Astro Vercel ブログをAstroに変更してみた 2023/02/02 JavaScript Astro ReactPixiでコンテクスト(Context)を渡す 2022/09/10 JavaScript React PixiJS Gatsby.jsからNext.jsに乗り換えてみた 2020/11/15 JavaScript React Gatsby.js Next.js Vue Composition APIについて触ってみた 2019/10/20 JavaScript Vue.js Nuxt.js Herokuで日本語を含むページのスクリーンショットを撮ってみた(その2)
スマートフォン用のサイトを作る場合は、jQuery Mobileやら、jQTouchやら、Sencha Touchやら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。 スマホ特有のイベント スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。 上記操作に必要なイベントは以下の通りです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend 「touch***」というイベントが画面に指でタッチした、している時のイベント、「gesture***」というイベントが「二本指以上」の操作(ピンチイン、ピンチアウト、回転等)を行っている時
HTMLメールを作成する際の注意点を少しだけ集めてまとめてみました。ちょっとだけ内容が古いかもしれないので、現状は違うのかもしれませんが、後方互換はなされていると信じて…。 デザイン上の注意点 デザイン上の注意点は主にサイズ。テーブルレイアウトでも表現できなくは無いので、ファーストビューなどの大きさに気をつけるだけで大丈夫そうです。 横幅550~600px、少なくとも800px、できれば750px以内という説も ファーストビューに入る縦幅は300~500px以内 ただし、殆どのクライアントで初期表示は画像を読み込んでいない状態になるので、画像が読み込まれていないことを考えて作る必要があるみたいです。 コーディングの注意点 懐かしのHTML4+テーブルレイアウトで組む必要があります。今更テーブルレイアウトを組もうと考えると中々大変そう…。昔は良く組めたなぁと思います。 さらに、headタグ内
ある案件で、divタグにoverflow:autoを指定し、スクロールバーを表示される様な指定をしていたのですが、iPadで確認を取った時に、スクロールバーが表示されていない事を教えてもらい、iPhoneでも同様の状態になっている事に気づきました。 また、通常のスクロールのようになぞってもスクロールされず、中のコンテンツを確認することが出来ませんでした。 何か方法でもあるのかと調べてみたところ、「メモ: iPad(iPhone)の困った仕様」で、「二本指」でなぞることでスクロールする事が分かりました。 説明書が無い、また、二本指でのスクロールはあまり使わないことから、中々気づきにくい操作であるような気がするので、iPhone向けのコンテンツなら尚更、ページ内に説明文が必要な感じを受けました。 「直感的」な操作であるタッチパネルであっても、今回であればページ内の一部のコンテンツをスクロールさ
WordPress3.1よりmeta_queryが実装され、カスタムフィールドを用いた検索方法が細かく設定できるようになったようなので試してみました。 従来の方法 従来の方法は「meta_key」と「meta_value」を一つずつ指定するのみでした。 例えば「hoge」と名前の付けられたカスタムフィールドの値が「fuga」と設定されている記事を検索するには以下のように書きます。 query_posts( array( "meta_key" => "hoge", "meta_value" => "fuga" ) ); また、「meta_compare」に、「=」(デフォルト)、「!=」、「>」、「>=」、「<」、「<」の指定をして異なる検索結果を得ることが出来ます。 先ほどの例にmeta_compareを追加することで、「hoge」という名前の付けられたカスタムフィールドの値が「fuga」
少し特殊な利用方法となりますが、カスタム投稿タイプで追加した項目の追加・編集・削除権限を持つ独自の権限グループを作る方法について、残しておきます。 実装内容 カスタム投稿タイプの追加については「register_post_type」、権限グループの追加については「add_role」、また、そのグループに対して独自のルールを持たせるのが「add_cap」となります。 最終的に以下の内容をfunctions.phpに入力することで、「ptname」というidのカスタム投稿タイプの追加・編集・削除の権限を持つ「authid」というidの権限グループを追加できます。 <?php function my_custom_post_type() { register_post_type( 'ptname', array( 'label' => 'カスタム投稿タイプ名', 'public' => true
最近ちらほらとブログへのコメントがFacebookを介したコメントが利用されているのを見かけたので、自分も殆どFacebookを活用していませんでしたがちょっと使ってみることにしました。 なお、ここに例としてあげているコードにはappidが入力されていませんのでコピペして使わないようにしてください。 コードの入手 まずはFacebookコメントを表示するためのコードを入手します。 Comments – Facebook開発者で公開されているので、そこで自分の好きなカスタマイズを行うと、以下の様なコードが取得できます。 <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=##appidが出力されます##&xfbml=1"></script><fb:comments hr
次のページ
このページを最初にブックマークしてみませんか?
『SUSH-i LOG - 名古屋のWeb制作会社につとめるプログラマーのつぶやき』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く