月別アーカイブ 5月 2019

takahashi 著者:takahashi

隠し機能!?macOSの”ワイヤレス診断”に搭載されているWi-Fi電波解析ツールが使える…!!!

僕はmacOSを少し見くびっていたようです…

spotlightなどで

“ワイヤレス診断”

と検索すると

“ワイヤレス診断”というアプリが見つかります。

一見普通のネットワーク診断ウィザードなのですが、プルダウンメニューのウインドウを見てみると

隠されたツールが。

画像のスキャンという項目をクリックすると

macのWi-Fiがキャッチできる範囲のWi-Fiの情報の一覧が表示されました!

これは近くにどの規格のどのチャンネル(周波数帯)のWi-Fiが飛んでいるかを見ることができるツールで、Wi-Fiのつながりが悪いときの原因を探るのにとても役立ちます。

他のOSでは自分でツールをインストールしないと使えない機能ですが、macは初めから用意されているのですね。素晴らしい…

ちなみに、メニューの中にスニファというのもありますが、これはWi-Fiの電波を傍受して、(暗号化されていなければ)中にどんなデータが流れているのかを直接除くことができるツールのようです。

ただ、このツールではキャプチャした内容をバイナリデータとして”/var/tmp”にpcap形式でダンプするだけのようで、どんなデータが入っているのかを確認するにはWiresharkなどのようなツールが別途必要になりそうです。

こんな感じで、結構本格的なネットワークツールがプリインストールされているmacOS、さすがです。

  • この記事いいね! (0)
著者:杉浦

【Python】PowerPointのファイルをpythonで作るpython-pptxの紹介

 Pythonは様々なライブラリを組み合わせて、多様な作業をプログラミングできます。pptxファイル(PowerPointのファイル)の作成も、またできます。python-pptxはこれを実現します。

python-pptx — python-pptx 0.6.17 documentation
 何ができるかはpptxファイルの構造を知ると少しわかりやすいです。pptxファイルはその実zipファイルと同じ形式です。pptxをzipに変えると例えば、次の様になります。

 解凍に成功しました。pptxファイルとは特定のファイル構造のファイル群を圧縮したzipファイルのことであり、zipファイル⊃pptxファイルとなっているわけです。この中から、どのページに、どのテンプレートが使われて、テンプレート中のある空欄に、何が、どう埋まっているか、が読み取れます。python-pptxではこの構造の指定に従ってページを構成していきます。
 テンプレート構造から細かく作っていく方法はGUIからpptxを作る場合、おそらくあまりしないでしょう。必然python-pptxは普段使いからかけ離れた理解の難しいものになります。そういった際にはpython-pptxを用いたhogehogeな関数を作った、というwebページを探すとよいでしょう。わかりやすいです。
 python-pptxは例えば、次の様に記述できます。

from pptx import Presentation
import datetime
from glob import glob
from pptx.util import Pt

def makeManual():
    prs = Presentation('template.pptx')
    prs = addContentPage(
        prs, '検索画面使用方法',
        '上部の検索ボックスに検索対象の語を入力し、検索ボタンを押すことで検索ができます。\nいずれの検索画面でも同様に検索ができます。',
        [], 'Tests_Browser_TestCase_Admin_Member_SearchTest_testSearchHogeHoge_000.png'
    )
    prs.save('管理者画面操作マニュアル.pptx')


# スライドにタイトル、サブタイトル、本文、画像ファイルを追加
def addContentPage(prs, title, subtitle, texts, fn):
    fnms = glob('%s/%s' % (__screenshots_dir, fn)) # 画像ファイル読み込み
    slide = prs.slides.add_slide(prs.slide_layouts[1]) # pptxファイルにスライド追加
    # slide = addTextToSlide(slide, title, subtitle, texts) # スライドにタイトル、サブタイトル、本文を追加
    addPictureToSlide(prs, slide, fnms[0]) # スライドに画像追加
    return prs


# スライドに画像を追加
def addPictureToSlide(prs, slide, fnm):
    pic = slide.shapes.add_picture(fnm, 0, 0)

    # 縦0.8倍。画像の比率変えず
    base = pic.height
    pic.height = int(prs.slide_height * 0.7)
    pic.width = int(pic.width * (pic.height / base))
    # 左右中央揃え
    pic.left = int((prs.slide_width - pic.width) / 2)
    # 下揃え
    pic.top = int((prs.slide_height - pic.height))

    return slide

 上記のコードはtemplate.pptxというテンプレートに従ってpptxファイルオブジェクトを生成。それに画像を追加して保存する、というコードになります。これだけでも画像を更新する度にpythonを走らせるだけでpptxを更新できます。特定の形式のpptxを高頻度で変更する場合、多少わかりにくくともpptx生成をプログラミング化すると作業が大きくはかどります。

  • この記事いいね! (1)
村上 著者:村上

【CSS】短いコードで実装できるCSS小技まとめ

とても便利そうなサイトの記事を見つけたので、備忘録としてまとめ。
短いコードで実装できる CSS の小技まとめです。

見つけた記事はこちら。

【第3弾】少しのコードで実装可能な15のCSS小技集 | Webクリエイターボックス
https://www.webcreatorbox.com/tech/css-tips-3

 

ぬるぬる動くスムーズスクロールの実装方法や、Webフォントの表示遅延を回避する方法などがまとめられています。
以前紹介した CSS で計算式を扱える calc() や、画像をトリミングできる object-fit プロパティも紹介されていました。
確かに、上記 2つには大変お世話になりました…!

記事はこちらから。

【CSS】スタイルシート内で計算式が使えるcalc()が便利
【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利

 

で、紹介した記事で個人的に面白いと思ったのが、テキストを円形に回り込ませる方法です。
円形要素、例えば円形の写真に対して shape-outside: circle(); を指定すると、画像の周りにテキストを丸く回り込ませることができるそうです。
サンプルは記事に載っているので、そちらをご参考にしてください。
なお、画像自体が円形である必要はなく、border-radius プロパティで円形したものでもOKみたいです。

 

以上、CSS の小技集についてのおすすめ記事のご紹介でした。

  • この記事いいね! (0)
asaba 著者:asaba

【cordova-plugin】音量取得ができるプラグイン・cordova-android-volume-pluginについて

久々にコルドバの話題です。今回は着信音の音量を取得する機能を探していたところ有用そうなプラグインを見つけた時のネタになります。

android限定ですが、簡単なコードで現在の音声を拾ってあれこれできるのでこれは使い道があると感じ早速使ってみました。

androidの音声は三種類(メディア、アラーム、着信音)あり、この中で着信音を取りたかったのですがバリエーションを見るとしっかり

抑えてあったので書いてみました。ajaxのようにコールバックでsuccessとfailに分けて結果を出力するようなコードにすると読みやすく

なりますね。

※サンプルは着信音の音量を返しています。

 

</pre>
window.androidVolume.getNotification((volume) => {
console.log('valumen =>' +volume);
}, (error) => {
console.log('error=>' +error);
});
<pre>

 

この他にも様々なバリエーションがありますが主要機能のgetのみ挙げておきます。

 

</pre>
<span class="pl-c1">window</span>.<span class="pl-smi">androidVolume</span>.<span class="pl-en">getAlarm</span>(success, error);
<pre><span class="pl-c1">window</span>.<span class="pl-smi">androidVolume</span>.<span class="pl-en">getMusic</span>(success, error);</pre>
<pre>

 

他の類似プラグインは音量取得はできるのですがなぜかメディア音量をとってきてしまうので注意が必要です。

  • この記事いいね! (0)
takahashi 著者:takahashi

macをルーター代わりにしてネットワークを共有する(逆テザリングする)方法

最近のスマートフォンでは一般的になった、本来ネットワークのクライアントとして動作する機器自身が、Wi-Fiルーターとして動作し、機器経由でインターネットへ接続できるようにする”テザリング”技術ですが、実はWindowsなどのPC用のOSにも搭載されていることをご存知でしょうか。

以前、Windowsで所謂”逆テザリング”をする方法としてブログでご紹介しましたが、macOSでも同様のことができるようになっています。

今回は、macOSでのインターネット接続の共有方法をご紹介します。

今回は自分の所有するMacbook Airを使用しましたが、このMacにはWi-FiしかNICが搭載されていないため、USB接続の有線のNICを使用して試しました。

まず、アップルメニューから”システム環境設定”を選択します。

システム環境設定の中から”共有”を選択します。

すると下記のようなメニューが表示されます。

左側に表示されているサービスから、”インターネット共有”をクリックします。

“共有する接続経路”のプルダウンで、macに搭載あるいは接続されている、インターネットにつながっているNICを選択し、下の”相手のコンピュータでのポート”で、子機と接続するNIC(“共有する接続経路”と被らなければ複数選択可能)を選択します。

最後に、左側の”インターネット共有”のチェックボックスをONにします。

上の画像のようなメッセージが表示されるので、”開始”をクリックします。

これでインターネット共有が有効になりました。

あとは、共有先に指定したLANアダプタを…

このようにインターネット回線を共有したいPCのLANポートに接続すれば、macと接続したPCから、mac経由でインターネットに接続できます。

Windowsのインターネット共有と異なる点は、Windowsでは1つのWi-Fiアダプタでインターネットへの接続とWi-Fiルーターの役割の両方を行うことができますが、macの場合はWi-Fiだけではインターネットの共有ができず、別のNICを用意しないといけないため注意が必要です。

とはいえ、知っておいて損はない機能だと思いますので、気になった方は是非一度試してみてください。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】「No space left on device Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/dsymutil failed with exit code 1」エラーの対処法

今回は、Xcode でアプリを実行した際に遭遇したエラーについて。
ビルドは問題なく通ったので、いざ実機で実行しようとしたところ、タイトルにあるようなエラーが発生しました。

エラー全文はこちら。

IO failure on output stream: No space left on device Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/dsymutil failed with exit code 1

 

で、エラーメッセージを検索したところ、ヒットした記事がこちら。


Xcode「fatal error: error in backend: IO failure on output stream」への対処|MaryCore

https://marycore.jp/prog/xcode/clang-file-errors/

こちらの記事によると、ハードディスクの容量が足りなくなっているため、ディスクエラーなどが起こっているとのことでした。
そのため、不要なファイルなどを削除して、ゴミ箱を空にし、念のため使用していないアプリなどを終了して実行したところ、問題なくビルドできました。

 

以上、アプリを実行できなかった時の対処法でした。
解決方法はとても簡単なのですが、エラーメッセージがちょっとわかりにくかったので、今後の自分のためにまとめました。
もし、誰かの参考になれば幸いです。

  • この記事いいね! (0)
asaba 著者:asaba

【npm】nodistツールの使い方

今回は、npmのバージョンを切り替えるときに必須なツール、nodistの使用方法について書いていきたいと思います。

まず、nodistのgithubページに移動します。https://github.com/nullivex/nodist

リリースページに入り一番最新のファイルをインストールします。program files(x86)内に保存してください。

コマンドプロンプトにてnodist distと入力すると現在使用できるNode.jsの一覧が羅列で表示されます。

これがきちんと出た場合は正常にインストールができた状態になります。

続きましてnpmの追加方法を記載します。

まずProgram Files(x86)->Nodist->npmvのフォルダ内に移動します。

npmのGithubのReleaseへアクセスし、欲しいバージョンをダウンロードしていきます。

ダウンロードしたファイルをnpmvフォルダ内にぶち込みます。

 

コマンドプロンプトに移動しnodist npmと打ち込みます。npmvフォルダに格納したバージョンがきちんと入っていればその格納した

npmファイルが一挙に表示されます。

この状態でnodist npm 3.10.10とコマンド入力すれば下の段にnpm 3.10.10と表示されバージョンの切り替えが完了します。

後はnpm -vで変わったかどうか確認してみてください。npmの切り替えってなんだか複雑とか間違えたら戻るの大変そうとか勝手な

イメージを抱いていたのですがnodistを使ってみてまさかこんなに簡単に切り替えができるとは思いもしませんでした。

他にはcreate-react-appなどnode.jsに依存するツールを使いたい時に今回説明したnodistを使えばその威力を確認することができると思います。

windoesでnpmバージョンの切り替えがしたい時はとりあえずこのツールを使っておけば間違いなさそうです。

 

  • この記事いいね! (0)
著者:杉浦

【Laravel】Laravelのdumpメッセージをより便利に使うブックマークレット

 Laravelのdump, dd関数は与えた値をきれいに表示してくれます。しかし、ネストの深いオブジェクトであるとクリック数が多くなってしまいます。

 この記事で紹介するブックマークレットはこれを解決します。
ページ中のaタグを全部クリック
中身を整理すると次です。

(function () {
    document.querySelectorAll('a').forEach(function (e) {
        e.click();
    })
})()

 document以下のaタグを全てクリックするのみです。dump, dd関数の結果の折り畳みの開閉はaタグで行われています。

 このブックマークレットはそれを全てクリックすることによって、開閉を一気に操作します。これによってちまちまクリックすることなく全貌を知ることが出来ます。

  • この記事いいね! (1)
村上 著者:村上

【Android】WebViewの動作が遅い・重い時の対処法

端末にもよるのですが Android の WebView の動きが悪かったので、その対処法について。
ただ、後述しますがメリット・デメリットがあるのでお気を付けください。

 

今回参考にさせていただいた記事はこちらから。

AndroidのWebViewが死ぬほど重い – やしのブログ
http://vayacico.hatenablog.com/entry/2017/10/03/092603

対処法は、AndroidManifest.xml にて、WebView の Activityapplication に対して、下記を追加するだけ!

android:hardwareAccelerated="true"

これを追加することで、ハードウェアアクセラレーション機能が有効になるそうです。
そうすると、Canvas などの描画の処理を GPU で実行するため、速度がアップするとのこと。

 

ただし、前述したとおりデメリットもあり、このハードウェアアクセラレーション機能は、通常よりもメモリを多く消費するのだとか。
そのため、動きが遅いと感じる Activity や WebView の Activity のみで有効にするなど、工夫が必要だそうです。
どんなアプリかにもよりますが、application タグで指定して、アプリすべてで有効にする、というのは控えたほうが良さそうな気がします。
なお、詳しくはこちらの記事が参考になります。

Yukiの枝折: ハードウェアアクセラレーションのメリットとデメリット
http://yuki312.blogspot.com/2011/12/blog-post_15.html

 

以上、Android の WebView の動きが遅い・重い時の対処法でした。
使用する場所は吟味したほうが良さそうではありますが、あまりにもページの動きが重い時は、まず実装を試してみると良いと思います。

  • この記事いいね! (0)
asaba 著者:asaba

【npm】npm cache cleanの使い方

今回はnpmの話題です。cordova platforms ls androidでplatformsを消した後にnpm installをすると以下のエラー群が現れるときがあります。

 


npm WARN addRemoteGit at F (C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:69:19)
npm WARN addRemoteGit at E (C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:81:29)
npm WARN addRemoteGit at C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:90:16

 

これは、前にnpm installした時やnpm ○○ installでパッケージを入れたときの残滓がゴミとなって残り続けるのが原因で、こいつが

いると現在行っているビルドを阻害してしまうのでnpm cache cleanで早めに駆除しておくと楽になります。

 


npm cache clean

 

こいつはエラーとして出るだけでなく、warningとしても出てくるので見かけたら無視せずにこまめにクリーンしてあげることを

おすすめします。

  • この記事いいね! (0)